パーセンテージ・PX計算とは?

CSSで使うパーセンテージ(%)とピクセル(px)を相互に変換できるツールです。親要素の幅を基準に、パーセンテージが実際に何ピクセルになるか、またはピクセル値が何パーセントに相当するかを計算できます。Figmaなどのデザインツールで確認したピクセル値をコードに落とし込むときに便利です。

主な機能

• 双方向の計算: パーセンテージ→PX、PX→パーセンテージの両方に対応
• 親要素サイズの変更: 任意のサイズに変更できる
• サイズプリセット: 320px、768px、1440pxなど一般的なブレークポイントをワンクリック設定
• 計算式の表示: 計算過程が見える
• コピー機能: 計算結果をワンクリックでコピー
• 小数点精度: 0〜2桁で選べる
• プリセット表: よく使うパーセンテージの換算値を一覧表示

使い方

1. 親要素のサイズを入力、またはプリセットから選択(デフォルトは1000px)
2. パーセンテージまたはピクセル値のどちらかを入力
3. 反対側の値が自動計算される
4. コピーボタンで結果をクリップボードへ

使用例

デザインツールで確認した720pxの要素を、コンテナ幅1200pxでパーセンテージ化したいとき。720pxを入力すれば60%と分かります。

レスポンシブグリッドで33.33%の列幅を実寸で把握したいとき。親要素1000pxなら333.3pxです。

サイドバーを25%から固定幅に変更するとき。コンテナ1440pxなら360pxになります。

計算式

パーセンテージからピクセルへの変換:

px = (パーセンテージ ÷ 100) × 親要素サイズ

例: 50% → (50 ÷ 100) × 1000px = 500px

ピクセルからパーセンテージへの変換:

% = (ピクセル ÷ 親要素サイズ) × 100

例: 500px → (500 ÷ 1000px) × 100 = 50%

プリセット変換表

よく使うパーセンテージ値の換算結果を一覧で確認できます。

親要素サイズを変更すると表の値も連動して更新されます。

よくある質問

小数点の桁数はどう選べばいい?

レイアウト用途なら1桁か2桁で十分です。きっちり整数で扱いたければ0桁、細かく調整したければ2桁を選んでください。

親要素サイズは何を入れればいい?

実際のコンテナ幅やビューポート幅です。一般的なブレークポイント(320px、768px、1024px、1440pxなど)で試すと、各デバイスでの実寸がイメージしやすくなります。