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

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

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

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

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

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

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

JavaScript

function updateUsedWidth(id) {
  var div = document.querySelector(`#${id}`);
  var par = div.querySelector('.show-used-width');
  var 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 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

仕様書

仕様書 状態 備考
CSS Level 2 (Revision 1)
used value の定義
勧告 初回定義

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sii
最終更新者: mfuji09,