Web/CSS/image を更新

files/ja/web/css/image/index.md

@@ -1,6 +1,8 @@
 ---
 title: <image>
 slug: Web/CSS/image
+l10n:
+  sourceCommit: 2a23f650d86d4f5d948614a607224a2bd52cca33
 ---
 
 {{CSSRef}}
@@ -11,25 +13,25 @@ slug: Web/CSS/image
 
 `<image>` データ型は以下のいずれかによって表すことができます。
 
-- {{CSSxRef("url()", "url()")}} データ型で記述された画像
+- {{CSSxRef("url", "url()")}} データ型で記述された画像
 - {{CSSxRef("&lt;gradient&gt;")}} データ型
-- {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部
-- {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色
-- {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成
-- {{CSSxRef("image/image-set()","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択
+- {{CSSxRef("element","element()")}} 関数で定義されたウェブページの一部
+- {{CSSxRef("image/image","image()")}} 関数で定義された画像、画像フラグメント、単色の色
+- {{CSSxRef("cross-fade","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成
+- {{CSSxRef("image/image-set","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択
 
 ## 解説
 
 CSS はさまざま種類の画像を扱うことができます。
 
-- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、_自身の寸法_ (自然の寸法) を持つ画像。
-- 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。)
-- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。
-- CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。
+- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、_内在的な寸法_ (自然の寸法) を持つ画像。
+- 単一のファイルの中に複数のバージョンが存在する、*複数の内在的な寸法*を持つ画像。（この場合、内在的な寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。）
+- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、内在的な寸法を持たないが、幅と高さの間に自身の縦横比のある画像。
+- CSS グラデーションなど、*内在的な寸法がなく、固有の縦横比もない*画像。
 
-CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。
+CSS はオブジェクトの*実際の*寸法を、 (1) _内在的な寸法_、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。
 
-| オブジェクトの種類 (CSS プロパティ)                                                 | 既定のオブジェクトの寸法                                                                                       |
+| オブジェクトの種類（CSS プロパティ）                                                | 既定のオブジェクトの寸法                                                                                       |
 | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
 | {{CSSxRef("background-image")}}                                                     | 要素の背景が配置される領域の寸法                                                                               |
 | {{CSSxRef("list-style-image")}}                                                     | `1em` の文字の寸法                                                                                             |
@@ -38,13 +40,13 @@ CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2)
 | {{CSSxRef("mask-image")}}                                                           | ?                                                                                                              |
 | {{CSSxRef("shape-outside")}}                                                        | ?                                                                                                              |
 | {{CSSxRef("mask-border-source")}}                                                   | ?                                                                                                              |
-| @counter-style の {{CSSxRef("symbols()")}}                                          | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 |
+| @counter-style の {{CSSxRef("symbols", "symbols()")}}                               | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 |
 | 擬似要素 ({{CSSxRef("::after")}}/{{CSSxRef("::before")}}) の {{CSSxRef("content")}} | 300px × 150px の矩形                                                                                           |
 
 正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。
 
 - 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。
-- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像自身の寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。
+- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像の内在的な寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。
 - 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。
 
 > **メモ:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。
@@ -53,9 +55,13 @@ CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2)
 
 ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。
 
-- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
+- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
 - [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
 
+## 形式文法
+
+{{csssyntax}}
+
 ## 例
 
 ### 有効な画像
@@ -97,7 +103,7 @@ image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて
 ## 関連情報
 
 - {{CSSxRef("&lt;gradient&gt;")}}
-- {{CSSxRef("element()","element()")}}
-- {{CSSxRef("image/image()", "image()")}}
-- {{CSSxRef("image/image-set()","image-set()")}}
-- {{CSSxRef("cross-fade()","cross-fade()")}}
+- {{CSSxRef("element","element()")}} {{Experimental_Inline}}
+- {{CSSxRef("image/image", "image()")}}
+- {{CSSxRef("image/image-set","image-set()")}}
+- {{CSSxRef("cross-fade","cross-fade()")}}