パーセンテージ・PX計算
親要素を基準にパーセンテージとPXを変換
どちらかを編集すると、もう片方が更新されます
(50 ÷ 100) × 1000px = 500px
よく使う値
親要素サイズ 1000px
- 5%
- 50px
- 10%
- 100px
- 15%
- 150px
- 20%
- 200px
- 25%
- 250px
- 33.33%
- 333.3px
- 50%
- 500px
- 66.67%
- 666.7px
- 75%
- 750px
- 80%
- 800px
- 90%
- 900px
- 100%
- 1000px
パーセンテージ・PX計算ツールとは？
親要素のサイズを基準に、パーセンテージとピクセルを相互に換算するツールです。50%が何pxになるか、320pxが何%にあたるかを同じ画面で確認できます。
CSSのwidthやheightで相対値と固定値を行き来するときや、デザインデータのpx値を%に置き換えるときに使います。
使い方
- 親要素のサイズを入力するか、よく使うサイズから選びます。
- パーセンテージかPX値のどちらかに値を入力します。
- もう片方の値と計算式を確認します。
親要素のサイズを変えると、最後に編集した値をもう片方の単位に換算し直します。
主な設定項目
親要素のサイズ
換算の基準になるサイズです。コンテナの幅や、基準にしたいブロックの幅を入れます。
パーセンテージとPX値
どちらかを編集すると、もう片方が自動で更新されます。親要素が1000pxのとき、50%と入力すると500pxが表示されます。
活用シーン
- デザインデータのpx値をCSSの%に置き換えたいとき
- 指定済みの%が実寸で何pxになるか確認したいとき
- 固定幅の要素を相対幅に変えるとき
