CSS 単位とは何か

CSS 長さ値には常に単位（または auto のような特殊キーワード）が含まれます。単位は数値が何に対して相対かをブラウザに伝えます。

例：

.card {
  padding: 16px;
  font-size: 1rem;
  width: 50%;
  gap: 2vw;
}

上記の各値はレイアウトエンジンで計算された px サイズに解決されますが、参照フレームは異なります。

開発者が最もよく使う 3 つのファミリー

ファミリー	例	相対対象
絶対	px	デバイスピクセル（CSS px）
フォント相対	rem, em, %	root または親 font-size
ビューポート相対	vw, vh	ビューポート幅または高さ

本番 CSS は 3 つすべてを混在させるのが普通です。

実プロジェクトで単位が重要な理由

単位は構文だけではありません。次に影響します。

• アクセシビリティ：rem ベースのタイポグラフィは、どこでも固定 px よりユーザーのブラウザ font 設定を尊重しやすい
• デザイン引き渡し：デザイナーは px を指定しがち、コンポーネントライブラリは rem トークンを保存しがち
• レスポンシブ挙動：vw と clamp() は各ステップのメディアクエリなしにビューポートでスケール
• コンポーネントネスト：em と % は親文脈に依存し、ネストコンポーネント内で驚かせることがある

単位 vs メディアクエリ

メディアクエリはブレークポイントでルールを変えます。相対単位と clamp() は文脈からサイズを連続的または相対的に計算します。

両方ともレスポンシブ問題を解きますが、異なる質問に答えます。

• メディアクエリ：「このブレークポイントで別ルールを適用する。」
• rem/em/vw/clamp：「文脈からサイズを計算する。」

要点

デザイン値を変換する前に、「このサイズは何に対して相対か？」 を問いかけます。px は画面、rem は root、em は親、vw はビューポート、% は包含ブロックです。

16px で CSS Unit Converter / Clamp Generator を試し、文脈が変わると同じ数値が rem、em、vw でどう変わるか確認してください。