CSS値の計算過程（specified→computed→used→actual）

値は6つの段階を経て画面上の実寸になる

width: 50% や font-size: 1.2em と書いた宣言が、最終的に画面上の何ピクセルになるか。CSSはこの変換を明確に定義された段階のパイプラインとして処理します。各段で「何が解決され、何がまだ残るか」が仕様で決まっており、継承されるのも、calc() が評価されるのも、特定の段に固定されています。段階は次のとおりです。

declared value   宣言値：そのプロパティに当たった全宣言
   ↓ カスケード（オリジン/レイヤ/詳細度/出現順で1つ選ぶ）
cascaded value   カスケード値：勝ち残った1つの宣言値
   ↓ 欠落を継承/初期値で補う（inherit/initial 等の解決）
specified value  指定値：そのプロパティに「指定された」最終的な値
   ↓ 相対値の絶対化・正規化
computed value   計算値：継承される、レイアウト非依存の正規形
   ↓ レイアウトを実行し、基準サイズを確定
used value       使用値：レイアウト後に決まる実寸（px）
   ↓ デバイス制約で丸め
actual value     実際値：描画に使う最終値

ここで決定的なのは、継承されるのは computed value だという点です。カスケードで勝者を選ぶアルゴリズムそのものは CSSカスケード・詳細度・継承 で扱いますが、その出口（cascaded→specified→computed）から先が本稿の主題です。

computed value：レイアウト前に確定する継承の通貨

computed value は、specified value からレイアウトに依存しない正規化を施した値です。「レイアウト前に決まる」ことが要点で、だからこそ子要素はレイアウト計算を待たずに親の computed を継承できます。computed の段で絶対化される代表例を挙げます。

em は computed の時点で親（または自要素）の font-size を基準にpx へ畳み込まれます。一方 line-height: 1.5 のような単位なし数値はあえて computed でも数値のまま継承され、各子が自分の font-size に掛けて使う——これが「単位なし line-height を親に置くと各子で適切な行間になる」理由です。px を継承させると親の行間がそのまま降りてしまいます。

used value と actual value：レイアウト後とデバイス丸め

used value は、computed value にレイアウトの結果を流し込んで確定する実際の寸法です。パーセンテージや auto、フレックスの伸縮など、基準サイズが分からないと決められない値がここで初めて px になります。width: 50% は、包含ブロック幅が 800px と判明して初めて used value 400px になります。margin: auto の実際の余白量、フレックスアイテムの最終幅、min-height による下限の適用なども used の段の産物です。レイアウトの解決順序そのものは CSSレイアウトアルゴリズム が詳しく、used value はその出力に相当します。

actual value は used value にデバイス由来の制約を反映した最終値です。代表はピクセルへの丸めで、used が 400.6px でも、サブピクセルを許さない描画系では 401px のように整数化されます。border-width が計算上 0.4px になっても、最低 1 物理ピクセルを確保するために繰り上がる、といった調整もこの段です。actual はスクリプトから直接は取りにくく、getComputedStyle() が返すのは多くのプロパティでused value（一部は computed）である点に注意してください。

相対単位とパーセンテージの基準は段で異なる

相対値が「何を基準に絶対化されるか」は単位ごとに決まっており、解決される段も異なります。

em の基準が「font-size プロパティ自身では親、それ以外のプロパティでは自要素の font-size」である点はよく引っかかります。font-size: 1.2em は親基準ですが、同じ要素の padding: 1em はその要素の computed font-sizeが基準です。rem と vw/vh は基準（ルート font-size、ビューポート）がレイアウト前から既知なので computed で絶対化できます。対して width: 50% は包含ブロックというレイアウトの産物を待つため used まで残る——同じ「相対値」でも解決段が割れるのはこの「基準が既知か否か」の差です。相対単位を土台にした設計は レスポンシブデザイン でも要になります。

calc() とカスタムプロパティの置換タイミング

calc() はできるだけ computed value time まで簡約され、異なる単位が混在する式は最後まで保持されます。calc(100% - 20px) は、% の基準（包含ブロック幅）が未確定なので computed では簡約しきれず、100% を used で px 化したうえで - 20px を適用して初めて単一の px になります。一方 calc(2em + 4px) は computed で em が px 化され、計算済みpx + 4px に畳まれます。混在単位を保持できるのが calc() の本質で、% と px を直接足せるのはこのためです。

calc(100% - 20px)
  computed: 100% は基準未確定 → 式のまま保持（emやpx部分のみ正規化）
  used:     100% を包含ブロック幅で解決し、- 20px を適用 → 単一の px

カスタムプロパティ（--* と var()）の置換は computed-value time に起こります。重要なのは置換の順序で、(1) まず var() がカスタムプロパティの値（トークン列）に文字列的に置換され、(2) その置換結果をそのプロパティの本来の文法で再パースします。だから無効な値を仕込むと、置換後に初めて不正と判明し、そのプロパティは**無効値時の継承（initial か親の値）**へフォールバックします。

:root { --gap: 16px; }
.box {
  --pad: 1em;            /* カスタムプロパティの値は「ほぼ自由なトークン列」 */
  padding: var(--pad);   /* computed-value time に 1em へ置換 → さらに em を解決 */
  margin: var(--gap);    /* 16px へ置換 */
  width: var(--missing, 50%);  /* 未定義なのでフォールバック 50% を採用 */
}

まとめ