CSSで要素の幅や高さを指定する際の単位についてメモ

css-3 CSS

使われる単位の種別

絶対単位

単位 意味 詳細
cm センチメートル 1cm == 10mm
mm ミリメートル 10mm == 1cm
in インチ 1in == 2.54cm
pt ポイント 1pt == 1/72in == 0.3528mm
pc パイカ 1pc == 12pt

説明:

絶対単位に分類されるものは実寸値に基づいているため、表示する要素が同じサイズでも環境によって
「大きくて見づらい」「小さくて見えない」などの事象が発生しやすいため、可変的なレイアウト実現の観点からもあまり使われない。

相対単位

単位 意味 詳細
em ems 親要素の文字のサイズに対して相対
ex x-height デフォルトサイズの文字"x"の高さに対して相対
px ピクセル 画面解像度に対して相対
rem 「room」+「ems」 ルート要素 (html) の文字のサイズに対して相対
vw viewport width ビューポート(ブラウザの表示領域)の幅に対して相対
vh viewport height ビューポート(ブラウザの表示領域)の高さに対して相対
vmin viewport min ビューポート(ブラウザの表示領域)の最小値の1/100
vmax viewport max ビューポート(ブラウザの表示領域)の最大値の1/100

説明:

相対単位は絶対単位と異なり、ディスプレイの解像度、表示域のサイズに依存することのない可変的なレイアウトを実現することができる。
よってユーザ視点では相対単位を使った実装の方が良い。

パーセンテージ

単位 読み方 詳細
% パーセンテージ パーセンテージによる割合(基準になる値は各プロパティによって異なる)

最後に

相対単位の「rem」「vw」「vh」などのワードをよく耳にしたが、
「何を基準にして相対なのか?」など理解していなかった部分が多かったので今回記事を書くにあたって理解できてよかった。

厳密に言うと単位ではないが、要素に対して指定できるkeywordやその詳細なども今後記事としてまとめていこうと思う。