CSSの値の計算（指定値 / 初期値 / 計算値 / 使用値 / 実効値）

CSSプロパティの【実効値】

CSSプロパティの 実効値 は、実際にブラウザによってレンダリングされる際の値のことで、すべての必要な推定が適用された後の 使用値 です。

例えば、border-width プロパティに % や em 単位で値を指定した場合、px 換算すると小数点以下の値が出てくる場合がありますが、線の幅を「整数値のpx幅」でしか描画できないブラウザの場合、px換算した結果の値を、近似の整数値に丸める場合があり、この丸めた結果が【実効値】ということになります。

実効値の計算ルール

CSSプロパティの実効値は、以下の順序で計算されます。

1. 最初に【指定値】を決定します。なお、指定値の決定は以下のルールで行われます。
   1. スタイルシートで明示的に指定された値があれば、それを使用
   2. 明示的な指定がなく、継承可能なプロパティであれば、親要素の値を使用
   3. 上記のいずれも使用できない場合は、【初期値】を使用
2. 次に仕様に従って、【計算値】を求めます。例えば、em 値で指定値が設定されていた場合、その要素の font-size プロパティの値をもとに、px値を求めます。
3. 次にレイアウトが計算され【使用値】となります。
4. 最後に、使用値がローカル環境の制約によって変換され、結果として【実効値】となります。

指定値

CSS プロパティにおいて文書のスタイルシートから受け取る値です。

初期値

定義表に挙げられている既定値です。初期値の使い方はプロパティが継承されているかどうかで異なります。

• 継承プロパティの場合：初期値はルート要素に対してのみ、特定の値が指定されていない場合に限り使用されます。
• 非継承プロパティの場合：初期値はすべての要素において、特定の値が指定されていない場合に限り使用されます。

計算値

継承の過程で親から子へ伝えられる値で、これは指定値から計算されます。

この際に、特殊な値である inherit, initial, unset, revert が指定されていた場合には、親要素から値を参照したり、初期値を参照したりします。

指定値からの計算にあたっては、プロパティの公式定義にある【計算値】として表せるように単位の換算などを行います。例えば、em 値で指定値が設定されていた場合、その要素の font-size プロパティの値をもとに、px値を求めます。

ただし、必ずしも【計算値】＝【絶対値】になるとは限りません。line-height プロパティでは、計算値の定義が「パーセンテージか length を指定すると絶対的な値、それ以外は指定通り」となっているので、”16px”や”100%”と指定された場合は、計算値の時点で絶対値に変わりますが、”1.5″や”2.0em”と指定された場合は、そのまま相対値のまま残ります。

使用値

計算値において行われたすべての計算が実行された後の値です。計算値が相対値で残っていた場合は、この時点で絶対値（px値）に換算されます。

ユーザーエージェントが計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ (width や line-height など) の使用値はピクセル数です。一括指定プロパティ (background など) の使用値は、各成分 (background-color や background-size など) のプロパティに、 position や float が加味されたものと一致します。