使用値

使用値 (used value) は CSS プロパティにおいて、計算値で行われたすべての計算が実行された後の値です。

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

メモ: DOM の getComputedStyle() API が返すのは解決値であり、これはプロパティによって計算値または使用値のどちらかになります。

例

この例は、3 つの要素の width の使用値を計算および表示します (大きさを変更すると更新されます)。

HTML

html
<div id="no-width">
  <p>明示的な幅の指定なし</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>明示的な幅: 50%</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>明示的な幅: inherit</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

CSS

css
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* 結果を見やすくする */
div {
  border: 1px solid red;
  padding: 8px;
}

JavaScript

js
function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);

結果

計算値との違い

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

  • background-position
  • bottom, left, right, top
  • height, width
  • margin-bottom, margin-left, margin-right, margin-top
  • min-height, min-width
  • padding-bottom, padding-left, padding-right, padding-top
  • text-indent

仕様書

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# used-value

関連情報