使われる単位の種別
絶対単位
| 単位 | 意味 | 詳細 |
|---|---|---|
| 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やその詳細なども今後記事としてまとめていこうと思う。