CSS Values and Units の文書を更新

- 2021/11/19 時点の英語版に同期

1 files changed, 67 insertions, 111 deletions

diff --git a/files/ja/web/css/custom-ident/index.md b/files/ja/web/css/custom-ident/index.md
index 0770a40aac..46bbf511c9 100644
--- a/files/ja/web/css/custom-ident/index.md
+++ b/files/ja/web/css/custom-ident/index.md
@@ -3,132 +3,88 @@ title: <custom-ident>
 slug: Web/CSS/custom-ident
 tags:
   - CSS
-  - CSS Data Type
-  - Data Type
-  - Layout
-  - Reference
-  - Web
+  - CSS データ型
+  - データ型
+  - レイアウト
+  - リファレンス
+  - ウェブ
 translation_of: Web/CSS/custom-ident
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>&lt;custom-ident&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。</p>
+**`<custom-ident>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code>&lt;custom-ident&gt;</code> の構文は CSS の識別子 (プロパティ名など) に似ていますが、<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96">大文字と小文字を区別</a>する点が違います。これは次の文字から成る文字の並びです:</p>
+`<custom-ident>` の構文は CSS の識別子 (プロパティ名など) に似ていますが、[大文字と小文字を区別](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96)する点が異なります。これは 1 文字以上の下記の文字のから成ります。
 
-<ul>
- <li>任意のアルファベット (<code>A</code>-<code>Z</code>, <code>a</code>-<code>z</code>)</li>
- <li>任意の数字 (<code>0</code>-<code>9</code>)</li>
- <li>ハイフン (<code>-</code>)</li>
- <li>アンダースコア (<code>_</code>)</li>
- <li>エスケープ文字 (バックスラッシュ <code>\</code> に続く)</li>
- <li><a href="http://ja.wikipedia.org/wiki/Unicode">Unicode</a> 文字 (バックスラッシュ <code>\</code> と、それに続く 1 - 6 個の16進値の形式をとる、Unicode コードポイント）</li>
-</ul>
+- 任意のアルファベット (`A`-`Z`, `a`-`z`)
+- 任意の数字 (`0`-`9`)
+- ハイフン (`-`)
+- アンダースコア (`_`)
+- エスケープ文字 (バックスラッシュ `\` に続く)
+- [Unicode](http://ja.wikipedia.org/wiki/Unicode) 文字 (バックスラッシュ `\` と、それに続く 1 - 6 桁の 16 進数の形式で Unicode コードポイントを表す)
 
-<p>このデータ値は<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96">大文字と小文字を区別</a>するため、<code>id1</code>、<code>Id1</code>、<code>iD1</code>、<code>ID1</code> はすべて異なった識別子です。逆に、別のエスケープ方式を使っていますが、 <code>toto\?</code> と <code>toto\3F</code> は同じ識別子です。</p>
+なお、このデータ型では `id1`、`Id1`、`iD1`、`ID1` は[大文字と小文字を区別](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96)するため、すべて異なった識別子として扱われます。逆に、`toto\?` と `toto\3F` は文字をエスケープする方法が異なりますが、同じ識別子として扱われます。
 
-<h3 id="Forbidden_values" name="Forbidden_values">禁止されている値</h3>
+### 禁止されている値
 
-<p><code>&lt;custom-ident&gt;</code> を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("&lt;string&gt;")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (<code>-</code>) および、それら続くものであってはなりません。</p>
+`<custom-ident>` を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("&lt;string&gt;")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (`-`) および、それらの続くものであってはなりません。
 
-<p>曖昧さを避けるため、 <code>&lt;custom-ident&gt;</code> を使用する各プロパティは、特定の値の使用を禁止しています:</p>
+曖昧さを避けるため、 `<custom-ident>` を使用する各プロパティでは、特定の値の使用が禁止されています。
 
-<dl>
- <dt>{{CSSxRef("animation-name")}}</dt>
- <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) を禁止し、 <code>none</code> も禁止しています。</dd>
- <dt>{{CSSxRef("counter-reset")}}</dt>
- <dt>{{CSSxRef("counter-increment")}}</dt>
- <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) を禁止し、 <code>none</code> も禁止しています。</dd>
- <dt>{{CSSxRef("@counter-style")}}</dt>
- <dt>{{CSSxRef("list-style-type")}}</dt>
- <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) および <code>none</code>、 <code>inline</code> 、そして <code>outside</code> の値を禁止しています。また、かなりの数の定義済みの値が様々なブラウザーに実装されています: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code>, and <code>disclosure-close</code>.</dd>
- <dt>{{CSSxRef("grid-row-start")}}<br>
- {{CSSxRef("grid-row-end")}}<br>
- {{CSSxRef("grid-column-start")}}<br>
- {{CSSxRef("grid-column-end")}}</dt>
- <dd><code>span</code> 値を禁止しています。</dd>
- <dt>{{CSSxRef("will-change")}}</dt>
- <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) および <code>will-change</code>、 <code>auto</code>、 <code>scroll-position</code> そして <code>contents</code> の値を禁止しています。</dd>
-</dl>
+- {{CSSxRef("animation-name")}}
+  - : グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。
+- {{CSSxRef("counter-reset")}}, {{CSSxRef("counter-increment")}}
+  - : グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。
+- {{CSSxRef("@counter-style")}}, {{CSSxRef("list-style-type")}}
+  - : グローバル CSS 値 (`unset`, `initial`, `inherit`) および `none`, `inline`, `outside` の値を禁止しています。また、`disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, and `disclosure-close` といった定義済みの値が、様々なブラウザーで実装されています。
+- {{CSSxRef("grid-row-start")}}, {{CSSxRef("grid-row-end")}}, {{CSSxRef("grid-column-start")}}, {{CSSxRef("grid-column-end")}}
+  - : `span` 値を禁止しています。
+- {{CSSxRef("will-change")}}
+  - : グローバル CSS 値 (`unset`, `initial`, `inherit`) および `will-change`, `auto`, `scroll-position`, `contents` の値を禁止しています。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Valid_identifiers" name="Valid_identifiers">有効な識別子</h3>
+### 有効な識別子
 
-<pre class="notranslate">nono79            アルファベットと数字の組み合わせ
+
+```plain example-good
+nono79            アルファベットと数字の組み合わせ
 ground-level      アルファベットとダッシュの組み合わせ
 -test             ダッシュとそれに続くアルファベット
 _internal         アンダースコアとそれに続くアルファベット
 \22 toto          Unicode 文字とそれに続くアルファベット
-bili\.bob         ピリオドは正しくエスケープされています
-</pre>
-
-<h3 id="Invalid_identifiers" name="Invalid_identifiers">無効な識別子</h3>
-
-<pre class="notranslate">34rem             数字で始まってはいけません
--12rad            ダッシュで始まって数字が続いてはいけません
-bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけです
---toto            2 つのダッシュで始まってはいけません
-'bilibob'         &lt;string&gt; です
-"bilibob"         &lt;string&gt; です</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}</td>
-   <td>{{Spec2('CSS Will Change')}}</td>
-   <td>{{CSSxRef("will-change")}} で除外する値を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>キーワードの有限リストの代わりに <code>&lt;custom-ident&gt;</code> を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td><code>&lt;identifier&gt;</code> から <code>&lt;custom-ident&gt;</code> へ改名。使い方を新しい <code>counter-set</code> プロパティへ追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>{{CSSxRef("animation-name")}} で除外する値を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td><code>&lt;identifier&gt;</code> から <code>&lt;custom-ident&gt;</code> へ改名。擬似型とし、除外値の使用を禁止した。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p><em>このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。</em></p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{CSSxRef("&lt;ident&gt;")}}</li>
-</ul>
+bili\.bob         ピリオドが正しくエスケープされている
+```
+
+### 無効な識別子
+
+```plain example-bad
+34rem             数字で始まってはいけない
+-12rad            ダッシュで始まって数字が続いてはいけない
+bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけ
+--toto            2 つのダッシュで始まってはいけない
+'bilibob'         <string> になります
+"bilibob"         <string> になります
+```
+
+## 仕様書
+
+| 仕様書                                                                                                                                                                        | 状態                                       | コメント                                                                                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}                                                                         | {{Spec2('CSS4 Values')}}             |                                                                                                                                                                                          |
+| {{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}     | {{Spec2('CSS Will Change')}}         | {{CSSxRef("will-change")}} で除外する値を定義。                                                                                                              |
+| {{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}} | {{Spec2('CSS3 Counter Styles')}} | キーワードの有限リストの代わりに `<custom-ident>` を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。 |
+| {{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}                             | {{Spec2('CSS3 Lists')}}             | `&lt;identifier&gt;` から `<custom-ident>` へ改名。使い方を新しい `counter-set` プロパティへ追加。                                                                                            |
+| {{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}} | {{Spec2('CSS3 Animations')}}         | {{CSSxRef("animation-name")}} で除外する値を定義。                                                                                                          |
+| {{SpecName('CSS3 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}                                                                         | {{Spec2('CSS3 Values')}}             | `&lt;identifier&gt;` から `<custom-ident>` へ改名。擬似型とし、除外値の使用を禁止した。                                                                               |
+| {{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}                                                         | {{Spec2('CSS2.1')}}                     | 初回定義                                                                                                                                                                      |
+
+## ブラウザーの互換性
+
+*このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。*
+
+## 関連情報
+
+- {{CSSxRef("&lt;ident&gt;")}}