From 7287170965f966c40b64728990289f25ae893204 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 23:30:42 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/used_value/index.md | 138 +++++++++++++++++------------------ 1 file changed, 69 insertions(+), 69 deletions(-) (limited to 'files/ja/web/css/used_value') diff --git a/files/ja/web/css/used_value/index.md b/files/ja/web/css/used_value/index.md index 80cd1f5827..51adbefab4 100644 --- a/files/ja/web/css/used_value/index.md +++ b/files/ja/web/css/used_value/index.md @@ -3,45 +3,45 @@ title: 使用値 slug: Web/CSS/used_value tags: - CSS - - Reference + - リファレンス - レイアウト translation_of: Web/CSS/used_value --- -
{{cssref}}
+{{CSSRef}} -

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

+**使用値** (used value) は [CSS](/ja/docs/Web/CSS) プロパティにおいて、[計算値](/ja/docs/Web/CSS/computed_value)で行われたすべての計算が実行された後の値です。 -

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

+{{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 が返すのは解決値であり、これはプロパティによって計算値または使用値のどちらかになります。

-
+> **Note:** DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API が返すのは[解決値](/ja/docs/Web/CSS/resolved_value)であり、これはプロパティによって[計算値](/ja/docs/Web/CSS/computed_value)または[使用値](/ja/docs/Web/CSS/used_value)のどちらかになります。 -

例

+## 例 -

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

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

HTML

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

+  
明示的な幅の指定なし

+  
..

 
-  <div id="width-50">
-    <p>明示的に幅に 50% を指定</p>
-    <p class="show-used-width">..</p>
+  

+    
明示的な幅: 50%

+    
..

 
-    <div id="width-inherit">
-      <p>明示的に幅に inherit を指定</p>
-      <p class="show-used-width">..</p>
-    </div>
-  </div>
-</div>
-
+
+

明示的な幅: inherit

+

..

+
+ + +``` -

CSS

+### CSS -
#no-width {
+```css
+#no-width {
   width: auto;
 }
 
@@ -57,11 +57,13 @@ translation_of: Web/CSS/used_value
 div {
   border: 1px solid red;
   padding: 8px;
-}
+} +``` -

JavaScript

+### JavaScript -
function updateUsedWidth(id) {
+```js
+function updateUsedWidth(id) {
   var div = document.querySelector(`#${id}`);
   var par = div.querySelector('.show-used-width');
   var wid = window.getComputedStyle(div)["width"];
@@ -76,55 +78,53 @@ function updateAllUsedWidths() {
 
 updateAllUsedWidths();
 window.addEventListener('resize', updateAllUsedWidths);
-
+``` -

結果

+### 結果 -

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

+{{ 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 より取得)。

+CSS 2.0 では、プロパティの計算の最後のステップとして*計算値*のみを定義していました。そして CSS 2.1 では、使用値を別な定義として導入しました。そして、計算値がパーセント値である親の幅や高さを、要素が明確に継承できるようになりました。レイアウトに依存しない CSS プロパティ (`display`, `font-size`, `line-height` など) に関しては、計算値と使用値は同じです。以下のものは CSS 2.1 のプロパティのうち、レイアウトに依存し、計算値と使用値が異なるものです。 ([CSS 2.1 Changes: Specified, computed, and actual values](https://www.w3.org/TR/CSS2/changes.html#q21.36) より取得)。 - +- `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` -

仕様書

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

変更なし。

-
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}初回定義
仕様書状態備考
+ {{SpecName("CSS2.2", "cascade.html#used-value", "used value")}} + {{Spec2("CSS2.2")}}変更なし
+ {{SpecName("CSS2.1", "cascade.html#used-value", "used value")}} + {{Spec2("CSS2.1")}}初回定義
-

関連情報

+## 関連情報 - +- {{domxref("window.getComputedStyle")}} +- {{CSS_key_concepts}} -- cgit v1.2.3-54-g00ecf