Skip to content

CSSの指定値、計算値・算出値、使用値、実効値

計算段階を表す値

CSS のプロパティは、いくつかの段階の計算を通して最終的な値が決まっています。

これらの段階には名前があり、1段階目は指定値、2段階目は計算値・算出値、3段階目は使用値、最終段階は実効値といわれています。

指定値(specified value)

https://developer.mozilla.org/en-US/docs/Web/CSS/specified_value

計算の1段階目で、要素の style 属性や外部 CSS で指定した値です。

計算値・算出値(computed value)

https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value

計算の2段階目で、初期値と指定値、そして親要素からの継承によって決定する値です。

プロパティによってはさらなる計算が行われます。

たとえば color は rgb への変換が行われ、 font-size は相対値から絶対値への変換が行われます。ここで行われる計算はプロパティごとに決まっており、MDN でも確認できます。

使用値(used value)

https://developer.mozilla.org/en-US/docs/Web/CSS/used_value

計算の3段階目で、レイアウトの計算が行われた結果の値です。

レイアウトにかかわる height, width といったプロパティも絶対値が計算された状態になります。

実効値(actual value)

https://developer.mozilla.org/en-US/docs/Web/CSS/actual_value

計算の4段階目で、使用値をブラウザで使用可能な値へ近似した値です。

1 未満の px の切り捨てなどが行われます。

計算段階以外の値

これらの値以外にも、4つの段階に含まれない初期値、解析値という値があります。

初期値(initial value)

https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

スタイルを指定しなかったときの値です。

たとえば width なら ”auto”、overflow なら “visible” が初期値です。

解析値(resolved value)

https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value

JavaScript の window.getComputedStyle() で取得される特殊な値です。

ほとんどのプロパティは計算値・算出値がそのまま解析値となりますが、width, height などの一部のプロパティでは歴史上の理由により使用値が解析値となります。

Comments are closed.