From 17cd5fb06a1e70c389225fbecf0a0cf29680855c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 20:00:34 +0900 Subject: CSS の主要概念の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/used_value/index.html | 130 --------------------------------- files/ja/web/css/used_value/index.md | 130 +++++++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 130 deletions(-) delete mode 100644 files/ja/web/css/used_value/index.html create mode 100644 files/ja/web/css/used_value/index.md (limited to 'files/ja/web/css/used_value') diff --git a/files/ja/web/css/used_value/index.html b/files/ja/web/css/used_value/index.html deleted file mode 100644 index 80cd1f5827..0000000000 --- a/files/ja/web/css/used_value/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -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")}}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/used_value/index.md b/files/ja/web/css/used_value/index.md new file mode 100644 index 0000000000..80cd1f5827 --- /dev/null +++ b/files/ja/web/css/used_value/index.md @@ -0,0 +1,130 @@ +--- +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")}}初回定義
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf