CSS/単位

単位

CSSでは、さまざまな値に単位を指定して要素のサイズや位置、間隔などを制御します。単位は大きく分けて絶対単位と相対単位の2種類があります。それぞれの特徴と使用方法について説明します。

絶対単位

絶対単位は、固定された物理的なサイズに基づいています。主に印刷用途や特定のサイズが厳密に求められる場合に使用されます。

絶対単位
単位	説明	例
cm	センチメートル	`width: 10cm;`
mm	ミリメートル	`margin: 5mm;`
in	インチ（1インチ = 2.54cm）	`height: 2in;`
px	ピクセル（画面上の最小単位）	`font-size: 16px;`
pt	ポイント（1pt = 1/72インチ）	`font-size: 12pt;`
pc	パイカ（1pc = 12pt）	`width: 2pc;`

相対単位

相対単位は、他の値（親要素やフォントサイズなど）を基準にしてサイズを指定します。レスポンシブデザインに適しており、画面サイズやコンテキストに応じた柔軟なレイアウトが可能です。

フォントサイズを基準とする単位
単位	説明	例
em	親要素のフォントサイズを基準とする	`padding: 2em;`
rem	ルート要素（<html>）のフォントサイズを基準とする	`font-size: 1.5rem;`

ビューポートを基準とする単位
単位	説明	例
vw	ビューポートの幅の1%を基準とする	`width: 50vw;`
vh	ビューポートの高さの1%を基準とする	`height: 100vh;`
vmin	ビューポートの幅と高さの小さい方の1%を基準とする	`width: 50vmin;`
vmax	ビューポートの幅と高さの大きい方の1%を基準とする	`height: 50vmax;`

その他の相対単位
単位	説明	例
%	親要素のサイズの割合	`width: 50%;`
ex	現在のフォントサイズの「x」の高さを基準とする	`font-size: 2ex;`
ch	現在のフォントで「0」の幅を基準とする	`width: 10ch;`

単位の省略

一部のプロパティでは単位を省略できます。たとえば、line-heightやz-indexは単位なしの数値を指定可能です。

body {
  line-height: 1.5; /* 単位なし */
  z-index: 10;      /* 単位なし */
}

単位の互換性

特定のプロパティでは、使用できる単位が制限されています。たとえば、font-sizeでは相対単位や絶対単位が使用可能ですが、z-indexには適用されません。

使用例

以下は、単位をさまざまに組み合わせた例です。

body {
  font-size: 16px;
}

h1 {
  margin: 2rem;
  padding: 10%;
  width: 50vw;
}

p {
  line-height: 1.5; /* 単位なし */
  font-size: 1em;   /* 相対単位 */
}

注意事項

レスポンシブデザイン: 相対単位を使用することで、さまざまなデバイスサイズに対応可能です。
絶対単位の使用: 印刷用途でない限り、絶対単位の多用は避けるべきです。
パフォーマンス: 複雑なレイアウトを作成する際には、適切な単位の選択が重要です。

参考

単位を正しく理解し活用することで、柔軟かつ視覚的に美しいデザインを実現できます。