CSS単位(px・pt・em・rem・vw・vh)の換算
数値と単位を選ぶと、CSSでよく使うpx・pt・in・cm・mm・em・rem・vw・vhに、まとめて換算します。
くわしい条件を変える(なくても計算できます)
px
ブラウザの初期値は16pxです
px
初期値はスマホ表示の目安です
px
計算方法
絶対単位は、1インチ=96px=72pt=2.54cm=25.4mmという関係で換算します(W3Cの仕様による)。
em・rem = px ÷ 基準のフォントサイズ、vw = px ÷ 画面の横幅 × 100、vh = px ÷ 画面の高さ × 100
例:16pxは、基準フォントサイズ16pxのとき1em(1rem)、横幅375pxの画面では約4.27vwです。
出典:W3C CSS Values and Units Module Level 4 6.2 Absolute Lengths(絶対単位の定義:1in=96px=72pt=2.54cm=25.4mm)
PR
よくある質問
pxとptの違いは?
pxは画面の表示に使う単位、ptは印刷でよく使われてきた単位です。CSSでは1pt=96÷72px(約1.333px)という決まった比率で変換できます。
remとemはどちらを使えばいい?
remはルート要素(html)のフォントサイズだけを基準にするため、入れ子になった要素でも比率がぶれにくいという特徴があります。emは親要素のフォントサイズを基準にするため、入れ子が深いと積み重なって変わることがあります。
vwやvhはどんなときに使う?
画面の大きさに応じて文字や余白の大きさを変えたいときに使われる単位です。画面幅が変わるレスポンシブなデザインでよく使われます。