CSSで使用する長さの単位をまとめてみた


よく、読み方とか基準とか忘れるのでメモしておきます。

CSSで使用する長さの単位
単位単位基準 説明ピクセル換算
px絶対単位。 ピクセル(pixel)。1px
%相対単位。基準は親要素の横幅。 パーセント(percent)。-
em相対単位。基準は要素のM-height(大文字Mの高さ)。 エム,イーエム(em:ラテン文字'M'の名称)。-
ex相対単位。基準は要素のx-height(小文字xの高さ)。 エックスハイト,エクス,イーエックス(ex:ラテン文字'X'の名称)。-
in絶対単位。2.54センチメートル。 インチ(inch)。96px
cm絶対単位。10ミリメートル。 センチメートル,センチ(centimetre)。約37.80px
mm絶対単位。 ミリメートル,ミリ(millimetre)。約3.78px
pt絶対単位。1/72インチ相当。 ポイント(point)。約1.33px
pc絶対単位。12ポイント相当。 パイカ(pica:英語のpieに当たるラテン語)。16px
ch相対単位。基準は要素の0-width(半角数字0の幅)。 キャラクターユニット,シーエイチ(chracter unit)。-
rem相対単位。基準はルート要素のフォントサイズ。 ルートエム,アールエム,レム(root em)。-
vw相対単位。ビューポート幅の1/100。 ビューポートウィデュス.ブイダブリュー(hundredth part of view port width)。-
vh相対単位。ビューポート高さの1/100。 ビューポートハイト,ブイエイチ(hundredth part of view port height)。-
vmin相対単位。ビューポートの短い辺の1/100。 ビューポートミン,ブイミン(hundredth part of view port minimum)。-
vmax相対単位。ビューポートの長い辺の1/100。 ビューポートマックス,ブイマックス(hundredth part of view port maximum)。-
q絶対単位。1/4ミリメートル。 キュウ(級:英語の「Quarter"四分の一"」の頭文字「Q」に由来)。約0.95px。