どのCSSユニットを使うべきか、そしていつ使うべきか？

Question

IT Interview Practice · Accepted Answer

CSSユニットは**絶対単位**（固定）と**相対単位**（何かに対してスケーリング）に分かれます。適切に選択することは、レスポンシブでアクセシブルなレイアウトの鍵となります。

## 絶対単位

```css
.x { width: 100px; }  /* px — fixed pixels; predictable, doesn't scale */
```

`px`はスケーリングすべきでない要素（ボーダー、小さな固定詳細）に使用してください。

## 相対単位 — 重要なもの

```css
font-size: 1.5rem;  /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em;   /* em — relative to the PARENT's font-size. Compounds! */
width: 50%;         /* % — relative to the parent's size */
width: 50vw;        /* vw — 50% of viewport WIDTH */
height: 100vh;      /* vh — 100% of viewport HEIGHT */
```

## rem vs em — 重要な区別

```css
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em;  } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
```

`em`はネストを通じて**累積**し（子の子は掛け算される）、予期しない結果になることがあります。`rem`は常にルートを参照するため予測可能です。フォントサイズと間隔の標準的な選択肢です。ローカルフォントに対する相対的なサイズが*必要*な場合に`em`を使用してください（例：テキストと共にスケーリングするボタンのパディング）。

## アクセシビリティにおいて相対単位が重要な理由

```css
font-size: 16px;   /* ❌ ignores the user's browser font-size preference */
font-size: 1rem;   /* ✅ scales when the user increases their default size */
```

テキストに`rem`を使用すると、デフォルトフォントサイズを大きく設定したユーザーを尊重します。これは`px`では損なわれる本当のアクセシビリティの利益です。

## なぜ重要なのか

適切なユニットは、レスポンシブで高いアクセシビリティを備えたレイアウトを実現します：`rem`はテキスト/間隔用（予測可能 + ユーザー設定を尊重）、`%`/`vw`/`vh`は流動的レイアウト用、`px`は固定詳細用、そして`em`はローカル相対サイジング用です。

より新しいビューポートユニット（`dvh`、`svh`）は、モバイルアドレスバーの高さの問題も解決します。

絶対単位

相対単位 — 重要なもの

rem vs em — 重要な区別

アクセシビリティにおいて相対単位が重要な理由

なぜ重要なのか

関連する質問