検索結果

使用値

この記事内

詳細
例
計算値との違い
仕様
参照

CSS プロパティの使用値は、そのプロパティのすべての計算が実行された後の最終的な値です。使用値は window.getComputedStyle を呼び出すことで読み出すことができます。 width や line-height といった寸法はすべてピクセルで、 background のような短縮プロパティは background-color といったその構成要素のプロパティと一致し、 display は position や float と一致し、すべての CSS プロパティは値を持ちます。

詳細

どの CSS プロパティでも最終的な値を計算するには 3 つの手順があります。最初に指定値が、プロパティを変更する最も詳細なスタイルシート規則の選択であるカスケーディング、プロパティが継承可能な場合に親のいくつかの計算値を使用する継承、または初期値の使用の結果となります。そして、計算値は仕様によって計算されます（例えば、position: absolute を持つ span は、 block に変更された、計算された display を持つでしょう）。最後に、レイアウトが計算され（ auto または親に相対的なパーセントの寸法は、ピクセル値に置き換えられます）、その結果が使用値です。これらの手順は内部的に計算され、スクリプトは最終的な使用値のみを window.getComputedStyle から読むことができます。

例

明確な width を持たない。指定された width は auto （初期値）。計算された width は auto 。使用された width は例えば、 998px。

明確な width は 50% 。指定された width は 50% 。使用された width は例えば447px。

明確なwidth は inherit 。指定された width は 50%。計算された width は 50%。使用された width は例えば 221px。

計算値との違い

CSS 2.0 はプロパティの計算の最後の手順において、計算値のみを定義しました。そして、 CSS 2.1 は、ある要素が、計算値がパーセントである親の幅と高さを明確に継承できるように、使用値の明確な定義を導入しました。 display、font-size、line-height などのレイアウトに依存しない CSS プロパティに関しては、計算値と使用値は同じです。以下は、レイアウトに依存する、異なる計算値と使用値を持っているプロパティです（CSS 2.1 Changes: Specified, computed, and actual values から取得した）。