px、rem、em

この 3 つの単位はほぼすべてのフロントエンドコードベースに現れます。小さな例では互換に見えますが、実コンポーネントでは異なる挙動をします。

px：デザイン引き渡しのデフォルト

px は絶対 CSS 単位です。16px は親 font-size に関係なく 16 CSS ピクセルを意味します。

px を使うとき：

• 固定ボーダー、シャドウ、ヘアライン区切りに合わせる
• canvas、SVG ストローク幅、ピクセルパーフェクトアセットで作業
• rem トークンがまだ定義されていない一回限りの仕様を変換

デザインシステムが rem ベースのスケーリングを期待する場合、すべてのタイポグラフィに px を使うのは避けてください。

rem：root 要素に相対

1rem は root 要素（html）の計算 font-size に等しく、通常デフォルトは 16px です。

html {
  font-size: 16px;
}

.title {
  font-size: 1.5rem; /* 24px */
}

rem を使うとき：

• font-size、スペーシング、radius のデザイントークンを構築
• プロジェクトが root font-size を変更したときサイズをスケールさせたい
• 無関係なコンポーネント間で一貫した値が必要

em：現在要素の font-size に相対

1em は要素自身の計算 font-size（一部の継承ケースでは padding などは親）に等しいです。

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

ここでは padding がボタン font-size に自動スケールします。

em を使うとき：

• コンポーネント内でスペーシングがローカルタイポグラフィに従うべき
• アイコンやバッジが近くのテキストとスケールすべき
• 意図的にネストしたサイズ挙動が欲しい

クイック比較

単位	最適	注意点
px	ボーダー、精密アセット	root 設定でスケールしない
rem	グローバルトークン、タイポグラフィ	安定した root font-size を前提
em	コンポーネント内部リズム	深くネストしたテキストで複合

よくあるミス：文脈の混在

デザイナーが 20px の本文を渡す。CSS に 20px と書く。後でチームが rem 計算を楽にするため html { font-size: 62.5%; } に切り替え、px 値が rem トークンと揃わなくなる。

より良いワークフロー：px を rem に一度変換し、トークンを保存して再利用する。

要点

固定物理的詳細には px、システム全体トークンには rem、ローカルテキストに従うサイズには em を使います。

CSS Unit Converter / Clamp Generator でデザイン px を rem に変換し、値をコピーする前に root font-size をプロジェクトに合わせてください。