pxとremの違い

CSSのサイズ指定単位には様々な種類があります。px・em・remはその中でも最もよく使われますが、それぞれ基準が異なります。

px（ピクセル）

絶対単位。1pxはモニターの1ドットに相当します（デバイスピクセル比により実際の物理ピクセル数は異なります）。直感的でわかりやすいですが、ユーザーがブラウザのフォントサイズを変更しても追従しません。

em

相対単位。親要素のフォントサイズを1emとします。ネストが深くなると計算が複雑になる（1.2em × 1.2em = 1.44em）という問題があります。

rem（root em）

相対単位。ルート要素（<html>）のフォントサイズを1remとします。ブラウザのデフォルトは16pxなので、1rem = 16pxが基準です。emと違い、ネストの深さに関係なく常に同じ基準なので計算しやすいです。

remを使うべき理由（アクセシビリティ）

ユーザーがブラウザの設定でフォントサイズを大きくした場合、pxで固定されたレイアウトは追従しません。remを使うと、ユーザーの設定に応じてUIが適切にスケールし、視覚障害のある方や高齢者にとって使いやすくなります。

計算の基本

  • 16px = 1rem
  • 14px = 0.875rem
  • 12px = 0.75rem
  • 24px = 1.5rem

計算式：rem値 = px値 ÷ 16

実務での使い分け

  • フォントサイズ・余白（margin/padding）→ rem（アクセシビリティ対応）
  • ボーダー・シャドウ → px（拡大されると不自然になりやすい）
  • コンテナ幅 → %またはvw（レスポンシブ対応）