CSSの単位には、要素のサイズや位置を指定するために使用されるさまざまな種類があります。これらの単位は、絶対長、相対長、ルート基準、ビューポート、論理的プロパティに分類できます。
1. 絶対長 (Absolute Length Units)
絶対長の単位は、固定の物理的長さを持ち、デバイスや画面の解像度に依存せず、常に同じサイズで表示されます。
- px (ピクセル): 1px = 1画素。通常、画面のピクセルを基準にします。
- pt (ポイント): 1pt = 1/72インチ。主に印刷用途で使われます。
- pc (パイカ): 1pc = 12pt。
- in (インチ): 1in = 2.54cm = 96px。
- cm (センチメートル): 1cm = 10mm。
- mm (ミリメートル): 1mm = 1/10cm。
- Q (Q): 1Q = 1/40cm = 0.25mm。
2. 相対長 (Relative Length Units)
相対長の単位は、他の値（通常は親要素やフォントサイズ）に対して相対的に指定されるため、コンテキストによって変わります。
- em: 親要素のフォントサイズに基づく相対単位。1em = 現在のフォントサイズ。
- rem (ルートem): ルート要素（通常はhtml要素）のフォントサイズに基づく相対単位。
- % (パーセント): 親要素に対する割合で指定。
- ex: 小文字「x」の高さ（x-height）に基づく単位。
- ch: 数字の「0」の幅に基づく単位。
- lh (line-height):
line-heightプロパティの値に基づく単位。 - rlh (ルートline-height): ルート要素の
line-heightに基づく単位。
3. ルート基準 (Root-based Units)
ルート基準の単位は、ルート要素の特定のプロパティに対して相対的です。remが代表的で、これはhtml要素のフォントサイズを基準とします。
- rem: 上記の通り、ルート要素のフォントサイズに基づきます。
- rlh: ルート要素のline-heightに基づきます。
4. ビューポート (Viewport-based Units)
ビューポートのサイズに基づく相対単位で、画面のサイズに応じて変動します。
- vw (ビューポート幅): ビューポートの幅の1%。
- vh (ビューポート高さ): ビューポートの高さの1%。
- vmin: ビューポートの幅と高さのうち小さい方の1%。
- vmax: ビューポートの幅と高さのうち大きい方の1%。
- svw (Small Viewport Width): 小さなビューポートの幅の1%。
- svh (Small Viewport Height): 小さなビューポートの高さの1%。
- lvw (Large Viewport Width): 大きなビューポートの幅の1%。
- lvh (Large Viewport Height): 大きなビューポートの高さの1%。
- dvw (Dynamic Viewport Width): 動的なビューポートの幅の1%。
- dvh (Dynamic Viewport Height): 動的なビューポートの高さの1%。
5. 論理的プロパティ (Logical Properties)
CSSには、テキストの方向性（左から右、右から左、縦書きなど）に基づいて要素の幅や高さを指定する論理的なプロパティが含まれています。これらはビジュアルデザインと異なるコンテキストに基づいています。
- block-size: コンテンツのブロック方向のサイズ（通常、縦方向）。
- inline-size: コンテンツのインライン方向のサイズ（通常、横方向）。
- min-block-size: ブロック方向の最小サイズ。
- max-block-size: ブロック方向の最大サイズ。
- min-inline-size: インライン方向の最小サイズ。
- max-inline-size: インライン方向の最大サイズ。
これらのプロパティは、異なる書字方向やレイアウトのフローに対応するため、横書きと縦書きの両方に対応できる柔軟なデザインを可能にします。
まとめ
CSSの単位は、デザインの柔軟性とレスポンシブ性を高めるために多様化しており、それぞれが異なる状況で適用可能です。デザインの目的に応じて、適切な単位を選択することが重要です。
