--- title: 使用値 slug: Web/CSS/used_value tags: - CSS - Reference - レイアウト translation_of: Web/CSS/used_value ---
{{cssref}}

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

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

メモ: DOM の {{domxref("Window.getComputedStyle", "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);

結果

{{ EmbedLiveSample('Example', '80%', 372) }}

計算値との違い

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

仕様書

仕様書 状態 備考
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}} {{Spec2("CSS2.2")}}

変更なし。
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}} {{Spec2("CSS2.1")}} 初回定義

関連情報