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

親要素のサイズを基準に、パーセンテージとピクセルを相互変換できるツールです。50% が何 px になるか、320px が何 % にあたるかを確認しながら、CSS レイアウトの値を調整できます。

レスポンシブレイアウト、Figma の数値から CSS への置き換え、固定幅と相対幅の比較をしたいときに便利です。

使い方

1. 親要素サイズを入力するか、プリセットから選びます。
2. 小数点の精度を選びます。
3. % → px または px → % のどちらかに値を入力します。
4. 変換結果と計算式を確認します。
5. 必要なら、よく使う変換表も合わせて確認します。

親要素サイズは 320、375、768、1024、1280、1440、1920px のプリセットからすぐに切り替えられます。

主な設定項目

親要素サイズ

変換の基準になるサイズです。コンテナ幅や基準ブロックの幅を入れると、相対値と実寸の関係を把握しやすくなります。

小数点精度

結果の小数点以下の桁数を 0〜2 桁で切り替えられます。ざっくり確認したいときは 0、細かく見たいときは 1〜2 桁が向いています。

よく使われる変換表

5%、10%、20%、25%、33.33%、50%、66.67%、75%、80%、90%、100% の換算値を一覧表示します。基準サイズを変えると表も一緒に更新されます。

入出力例

親要素サイズを 1000px にした場合、50% を入力すると結果は次のようになります。

(50% ÷ 100) × 1000px = 500.0px

逆に 500px を入力すると、次のように表示されます。

(500px ÷ 1000px) × 100 = 50.0%

活用シーン

• デザインツールの px 値を CSS の % に置き換えたいとき
• 33.33% や 66.67% が実際に何 px になるか確認したいとき
• 固定幅の要素を相対幅へ変えたいとき
• ブレークポイントごとの実寸差をすばやく見たいとき

使うときの注意点

• この計算は指定した親要素サイズを前提にした単純換算です
• 実際の CSS では padding、border、box-sizing などの影響を別途考慮する必要があります
• % は 0〜100 の範囲だけでなく大きい値でも考えられますが、用途に応じて妥当な値か確認したほうが安全です