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

1 files changed, 76 insertions, 91 deletions

diff --git a/files/ja/web/css/counter()/index.md b/files/ja/web/css/counter()/index.md
index b652047eb5..b525841d28 100644
--- a/files/ja/web/css/counter()/index.md
+++ b/files/ja/web/css/counter()/index.md
@@ -3,136 +3,121 @@ title: counter()
 slug: Web/CSS/counter()
 tags:
   - CSS
-  - CSS Counter
-  - CSS Function
-  - Function
-  - Reference
+  - CSS カウンター
+  - CSS 関数
+  - 関数
+  - リファレンス
+browser-compat: css.types.counter
 translation_of: Web/CSS/counter()
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p><strong><code>counter()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>において用いるのが多いものの、理論的には<code><a href="/ja/docs/Web/CSS/string">&lt;string&gt;</a></code>に対応するすべての箇所で用いることができます。</p>
+**`counter()`** は [CSS](/ja/docs/Web/CSS) の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)において用いるのが多いものの、理論的には [`<string>`](/ja/docs/Web/CSS/string) に対応するすべての箇所で用いることができます。
 
-<pre class="brush: css notranslate">/* 単純な使用法 */
+```css
+/* 単純な使用法 */
 counter(countername);
 
 /* カウンターの表示の変更 */
-counter(countername, upper-roman)</pre>
+counter(countername, upper-roman)
+```
 
-<p><a href="/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters">カウンター</a>自身には視覚的効果が何もありません。 <code>counter()</code> 関数 (および {{cssxref("counters", "counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。</p>
+[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counter()` 関数 (および {{cssxref("counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。
 
-<div class="blockIndicator note">
-<p>注: <code>counters()</code> 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。</p>
+> **Note:** `counter()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。
+>
+> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。
 
-<p><a href="#Browser_compatibility">ブラウザーの互換性の表</a>を注意深く確認してから本番環境に用いてください。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- {{cssxref("&lt;custom-ident&gt;")}}
+  - : カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。
+- `<counter-style>`
+  - : {{cssxref("&lt;list-style-type&gt;")}} 名、 {{cssxref("&lt;@counter-style&gt;")}} 名、 {{cssxref("symbols()")}} 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。
 
-<dl>
- <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
- <dd>カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また <code>none</code>, <code>unset</code>, <code>initial</code>, <code>inherit</code> という名前は禁止です。</dd>
- <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
- <dd>カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の<a href="/ja/docs/Web/CSS/CSS_Counter_Styles">定義済みカウンタースタイル</a>があります。省略された場合は、既定で <code>decimal</code> になります。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+### 形式文法
 
 {{CSSSyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="default_value_compared_to_upper_Roman" name="default_value_compared_to_upper_Roman">既定値と upper-roman との比較</h3>
+### 既定値と upper-roman との比較
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html; notranslate">&lt;ol&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css; highlight[2] notranslate">ol {
+```css
+ol {
   counter-reset: listCounter;
 }
 li {
   counter-increment: listCounter;
 }
 li::after {
-  content: "[" counter(listCounter) "] == ["
+  content: "[" counter(listCounter) "] == ["
                counter(listCounter, upper-roman) "]";
-}</pre>
+}
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}</p>
+{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}
 
-<h3 id="decimal-leading-zero_compared_to_lower-alpha" name="decimal-leading-zero_compared_to_lower-alpha">decimal-leading-zero と lower-alpha との比較</h3>
+### decimal-leading-zero と lower-alpha との比較
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html; notranslate">&lt;ol&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css; highlight[2] notranslate">ol {
+```css
+ol {
   counter-reset: count;
 }
 li {
   counter-increment: count;
 }
 li::after {
-  content: "[" counter(count, <dfn>decimal-leading-zero</dfn>) "] == ["
+  content: "[" counter(count, decimal-leading-zero) "] == ["
                counter(count, lower-alpha) "]";
-}</pre>
-
-<h4 id="Result_2" name="Result_2">結果</h4>
-
-<p>{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}</p>
-
-<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("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS3 Lists")}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.types.counter")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters">CSS カウンターの使用</a></li>
- <li>{{cssxref("counter-reset")}}</li>
- <li>{{cssxref("counter-set")}}</li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("@counter-style")}}</li>
- <li>CSS の <code><a href="/ja/docs/Web/CSS/counters">counters()</a></code> 関数</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)
+- {{cssxref("counter-reset")}}
+- {{cssxref("counter-set")}}
+- {{cssxref("counter-increment")}}
+- {{cssxref("@counter-style")}}
+- CSS の [`counters()`](/ja/docs/Web/CSS/counters()) 関数