Web/CSS/list-style-type を更新 (#2096)

2021/08/13 時点の英語版に同期

1 files changed, 522 insertions, 551 deletions

diff --git a/files/ja/web/css/list-style-type/index.html b/files/ja/web/css/list-style-type/index.html
index fb9dfc1575..518ab2a49c 100644
--- a/files/ja/web/css/list-style-type/index.html
+++ b/files/ja/web/css/list-style-type/index.html
@@ -6,23 +6,24 @@ tags:
   - CSS プロパティ
   - CSS リスト
   - Reference
+  - recipe:css-property
+browser-compat: css.properties.list-style-type
 translation_of: Web/CSS/list-style-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>list-style-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p>
+**`list-style-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p>
 
-<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div>
+{{EmbedInteractiveExample("pages/css/list-style-type.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+マーカーの[色](/ja/docs/Web/CSS/color_value)は、適用先の要素における色の計算値と同じになります。
 
-<p>マーカーの<a href="/ja/docs/CSS/color_value" title="color">色</a>は、適用先の要素における色の計算値と同じになります。</p>
+わずかな要素 ({{HTMLElement("li")}} と {{HTMLElement("summary")}}) だけが既定で `display: list-item` の値を持っています。しかし、 `list-style-type` プロパティは {{cssxref("display")}} の値が `list-item` に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p>
 
-<p>既定で <code>display: list-item</code> の値を持っている要素はわずかです ({{HTMLElement("li")}} と {{HTMLElement("summary")}})。しかし、 <code>list-style-type</code> プロパティは {{cssxref("display")}} の値が <code>list-item</code> に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* マーカーの種類の一例 */
+```css
+/* マーカーの種類の一例 */
 list-style-type: disc;
 list-style-type: circle;
 list-style-type: square;
@@ -31,10 +32,10 @@ list-style-type: georgian;
 list-style-type: trad-chinese-informal;
 list-style-type: kannada;
 
-/* &lt;string&gt; */
+/* <string> の値 */
 list-style-type: '-';
 
-/* @counter-style 規則に該当する識別子 */
+/* @counter-style 規則に一致する識別子 */
 list-style-type: custom-counter-style;
 
 /* キーワード値 */
@@ -43,471 +44,202 @@ list-style-type: none;
 /* グローバル値 */
 list-style-type: inherit;
 list-style-type: initial;
+list-style-type: revert;
 list-style-type: unset;
-</pre>
-
-<p>list-style-type プロパティは、以下のいずれかで定義することができます。</p>
-
-<ul>
- <li>単一の <code><a href="#&lt;custom-ident>">&lt;custom-ident&gt;</a></code> 値</li>
- <li>単一の <code><a href="#symbols()">symbols()</a></code> 値</li>
- <li>単一の <code><a href="#&lt;string>">&lt;string&gt;</a></code> 値</li>
- <li><code><a href="#none">none</a></code> キーワード</li>
-</ul>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><a id="&lt;custom-ident>" name="&lt;custom-ident>">{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</a></dt>
- <dd>{{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。</dd>
-</dl>
-
-<dl>
- <dt><a id="symbols()" name="symbols()">{{cssxref("symbols()")}}</a></dt>
- <dd>無名のリストスタイルを定義します。</dd>
- <dt><a id="&lt;string>" name="&lt;string>">{{cssxref("&lt;string&gt;")}}</a></dt>
- <dd>特定の文字列を、リストのマーカーとして使用します。</dd>
- <dt><a id="none" name="none"><code>none</code></a></dt>
- <dd>マーカーは表示されません。</dd>
-</dl>
-
-<dl style="">
- <dt><code>disc</code></dt>
- <dd>
- <ul style="list-style-type: disc;">
-  <li>塗りつぶされた円形 (既定値)</li>
- </ul>
- </dd>
- <dt><code>circle</code></dt>
- <dd>
- <ul style="list-style-type: circle;">
-  <li>中空円</li>
- </ul>
- </dd>
- <dt><code>square</code></dt>
- <dd>
- <ul style="list-style-type: square;">
-  <li>塗りつぶされた四角形</li>
- </ul>
- </dd>
- <dt><code>decimal</code></dt>
- <dd>
- <ul style="list-style-type: decimal;">
-  <li>数値</li>
-  <li>既定では 1 から始まります</li>
- </ul>
- </dd>
- <dt><code>cjk-decimal</code> {{experimental_inline}}</dt>
- <dd>
- <ul>
-  <li>漢数字</li>
-  <li>例: 一, 二, 三, ..., 九八, 九九, 一〇〇</li>
- </ul>
- </dd>
- <dt><code>decimal-leading-zero</code></dt>
- <dd>
- <ul style="list-style-type: decimal-leading-zero;">
-  <li>数値</li>
-  <li>ゼロ埋めされて表示されます</li>
-  <li>例: 01, 02, 03, … 98, 99</li>
- </ul>
- </dd>
- <dt><code>lower-roman</code></dt>
- <dd>
- <ul style="list-style-type: lower-roman;">
-  <li>小文字のローマ数字</li>
-  <li>例: i, ii, iii, iv, v…</li>
- </ul>
- </dd>
- <dt><code>upper-roman</code></dt>
- <dd>
- <ul style="list-style-type: upper-roman;">
-  <li>大文字のローマ数字</li>
-  <li>例: I, II, III, IV, V…</li>
- </ul>
- </dd>
- <dt><code>lower-greek</code></dt>
- <dd>
- <ul style="list-style-type: lower-greek;">
-  <li>小文字のギリシャ語</li>
-  <li>アルファ、ベータ、ガンマ、…</li>
-  <li>例: α, β, γ…</li>
- </ul>
- </dd>
- <dt><code>lower-alpha</code></dt>
- <dt><code>lower-latin</code></dt>
- <dd>
- <ul style="list-style-type: lower-alpha;">
-  <li>小文字の ASCII 文字</li>
-  <li>例: a, b, c, … z</li>
-  <li><code>lower-latin</code> は IE7 以前は対応していません</li>
-  <li>{{anch("Browser compatibility")}} の節も参照して下さい</li>
- </ul>
- </dd>
- <dt><code>upper-alpha</code></dt>
- <dt><code>upper-latin</code></dt>
- <dd>
- <ul style="list-style-type: upper-alpha;">
-  <li>大文字の ASCII 文字</li>
-  <li>例: A, B, C, … Z</li>
-  <li><code>upper-latin</code> は IE7 以前は対応していません</li>
- </ul>
- </dd>
- <dt><code>arabic-indic</code></dt>
- <dt><code>-moz-arabic-indic</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>armenian</code></dt>
- <dd>
- <ul style="list-style-type: armenian;">
-  <li>伝統的なアルメニア語の数値表記</li>
-  <li>(ayb/ayp, ben/pen, gim/keem…</li>
- </ul>
- </dd>
- <dt><code>bengali</code></dt>
- <dt><code>-moz-bengali</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>cambodian</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: cambodian;">
-  <li>例</li>
-  <li><code>khmer</code> と同義</li>
- </ul>
- </dd>
- <dt><code>cjk-earthly-branch</code></dt>
- <dt><code>-moz-cjk-earthly-branch</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>cjk-heavenly-stem</code></dt>
- <dt><code>-moz-cjk-heavenly-stem</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: cjk-ideographic;">
-  <li><code>trad-chinese-informal</code> と同義</li>
-  <li>例: 一萬一千一百一十一</li>
- </ul>
- </dd>
- <dt><code>devanagari</code></dt>
- <dt><code>-moz-devanagari</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: ethiopic-numeric;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>georgian</code></dt>
- <dd>
- <ul style="list-style-type: georgian;">
-  <li>伝統的なジョージア語の数値表記</li>
-  <li>例: an, ban, gan, … he, tan, in…</li>
- </ul>
- </dd>
- <dt><code>gujarati</code></dt>
- <dt><code>-moz-gujarati</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>gurmukhi</code></dt>
- <dt><code>-moz-gurmukhi</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>hebrew</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: hebrew;">
-  <li>伝統的なヘブライ語の数値表記</li>
- </ul>
- </dd>
- <dt><code>hiragana</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: hiragana;">
-  <li>例: あ, い, う, え, お, か, き…</li>
-  <li>日本語の「あいうえお」</li>
- </ul>
- </dd>
- <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: hiragana-iroha;">
-  <li>例: い, ろ, は, に, ほ, へ, と…</li>
-  <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li>
- </ul>
- </dd>
- <dt><code>japanese-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: japanese-formal;">
-  <li>法的または財務の文書で使用される、日本語の公的な数値表記</li>
-  <li>例: 壱萬壱阡壱百壱拾壱</li>
-  <li>似ている別の文字に書き換えられないようにするための漢字</li>
- </ul>
- </dd>
- <dt><code>japanese-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: japanese-informal;">
-  <li>日本語の日常的な数値表記</li>
- </ul>
- </dd>
- <dt><code>kannada</code></dt>
- <dt><code>-moz-kannada</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: katakana;">
-  <li>例: ア, イ, ウ, エ, オ, カ, キ…</li>
-  <li>日本語の「あいうえお」</li>
- </ul>
- </dd>
- <dt><code>katakana-iroha</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: katakana-iroha;">
-  <li>例: イ, ロ, ハ, ニ, ホ, ヘ, ト…</li>
-  <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li>
- </ul>
- </dd>
- <dt><code>khmer</code></dt>
- <dt><code>-moz-khmer</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: korean-hangul-formal;">
-  <li>朝鮮のハングルの数値表記</li>
-  <li>例: 일만 일천일백일십일</li>
- </ul>
- </dd>
- <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: korean-hanja-formal;">
-  <li>公的な朝鮮の漢数字</li>
-  <li>例: 壹萬 壹仟壹百壹拾壹</li>
- </ul>
- </dd>
- <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: korean-hanja-informal;">
-  <li>朝鮮の漢数字</li>
-  <li>例: 萬 一千百十一</li>
- </ul>
- </dd>
- <dt><code>lao</code></dt>
- <dt><code>-moz-lao</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>lower-armenian</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: lower-armenian;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>malayalam</code></dt>
- <dt><code>-moz-malayalam</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>mongolian</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: mongolian;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>myanmar</code></dt>
- <dt><code>-moz-myanmar</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>oriya</code></dt>
- <dt><code>-moz-oriya</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>persian</code> {{experimental_inline}}</dt>
- <dt><code>-moz-persian</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: simp-chinese-formal;">
-  <li>公的な簡体字中国語の数値表記</li>
-  <li>例: 壹万壹仟壹佰壹拾壹</li>
- </ul>
- </dd>
- <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: simp-chinese-informal;">
-  <li>簡体字中国語の日常的な数値表記</li>
-  <li>例: 一万一千一百一十一</li>
- </ul>
- </dd>
- <dt><code>tamil</code> {{experimental_inline}}</dt>
- <dt><code>-moz-tamil</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>telugu</code></dt>
- <dt><code>-moz-telugu</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>thai</code></dt>
- <dt><code>-moz-thai</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>tibetan</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: tibetan;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: trad-chinese-formal;">
-  <li>公的な繁体字中国語の数値表記</li>
-  <li>例: 壹萬壹仟壹佰壹拾壹</li>
- </ul>
- </dd>
- <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: trad-chinese-informal;">
-  <li>公的な場では使用しない、繁体字中国語の数値表記</li>
-  <li>例: 一萬一千一百一十一</li>
- </ul>
- </dd>
- <dt><code>upper-armenian</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: upper-armenian;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>disclosure-open</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: disclosure-open;">
-  <li>{{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号</li>
- </ul>
- </dd>
- <dt><code>disclosure-closed</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: disclosure-closed;">
-  <li>{{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Non-standard_extensions" name="Non-standard_extensions">標準外の拡張</h3>
-
-<p>Mozilla (Firefox), Blink (Chrome and Opera), WebKit (Safari) が拡張した、様々な言語のマーカーです。ブラウザーの互換性の表で、ブラウザーがどの拡張に対応しているかを確認してください。</p>
-
-<dl style="">
- <dt><code>-moz-ethiopic-halehame</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>-moz-ethiopic-halehame-am</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>ethiopic-halehame-ti-er</code></dt>
- <dt><code>-moz-ethiopic-halehame-ti-er</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>ethiopic-halehame-ti-et</code></dt>
- <dt><code>-moz-ethiopic-halehame-ti-et</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>hangul</code></dt>
- <dt><code>-moz-hangul</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
-  <li>例</li>
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>hangul-consonant</code></dt>
- <dt><code>-moz-hangul-consonant</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
-  <li>例</li>
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>urdu</code></dt>
- <dt><code>-moz-urdu</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+`list-style-type` プロパティは、以下のいずれかで定義することができます。
+
+- 単一の `<custom-ident>` 値
+- 単一の `symbols()` 値
+- 単一の `<string>` 値
+- キーワード `none`
+
+注意事項:
+
+- 種類によっては期待通りに表示するために適切なフォントのインストールが必要です。
+- `cjk-ideographic` は `trad-chinese-informal` と同じです。歴史的な理由で存在しています。
+
+### 値
+
+- {{cssxref("custom-ident", "&lt;custom-ident&gt;")}}
+  - : {{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。
+- {{cssxref("symbols()")}}
+  - : 無名のリストスタイルを定義します。
+- {{cssxref("&lt;string&gt;")}}
+  - : 特定の文字列を、リストのマーカーとして使用します。
+- `none`
+  - : マーカーは表示されません。
+- `disc`
+  - : 塗りつぶされた円形です (既定値)。 
+- `circle`
+  - : 中空円です。
+- `square`
+  - : 塗りつぶされた四角形です。
+- `decimal`
+  - : 数値です。 1 から始まります。
+- `cjk-decimal` {{experimental_inline}}
+  - : 漢数字です。
+- `decimal-leading-zero`
+  - : 数値で、先頭がゼロ埋めされます。
+- `lower-roman`
+  - : 小文字のローマ数字です。
+- `upper-roman`
+  - : 大文字のローマ数字です。
+- `lower-greek`
+  - : 小文字の古代ギリシャ文字です。
+- `lower-alpha`, `lower-latin`
+  - : 小文字の ASCII 文字です。
+- `upper-alpha`, `upper-latin`
+  - : 大文字の ASCII 文字です。
+- `arabic-indic`, `-moz-arabic-indic`
+  - : アラビア－インド数字です。
+- `armenian`
+  - : 伝統的なアルメニア語の数値表記です。
+- `bengali`, `-moz-bengali`
+  - : ベンガル語の数値表記です。
+- `cambodian`/`khmer`
+  - : カンボジア／クメール語の数値表記です。
+- `cjk-earthly-branch`, `-moz-cjk-earthly-branch`
+  - : 漢字の「十二支」順です。
+- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem`
+  - : 漢字の「十干」順です。
+- `cjk-ideographic`{{experimental_inline}}
+  - : `trad-chinese-informal` と同じです。
+- `devanagari`, `-moz-devanagari`
+  - : デーヴァナーガリーの数値表記です。
+- `ethiopic-numeric` {{experimental_inline}}
+  - : エチオピア語の数値表記です。
+- `georgian`
+  - : 伝統的なジョージア語の数値表記です。
+- `gujarati`, `-moz-gujarati`
+  - : グジャラート語の数値表記です。
+- `gurmukhi`, `-moz-gurmukhi`
+  - : グルムキー語の数値表記です。
+- `hebrew` {{experimental_inline}}
+  - : 伝統的なヘブライ語の数値表記です。
+- `hiragana` {{experimental_inline}}
+  - : ひらがなの辞書順の文字です。
+- `hiragana-iroha` {{experimental_inline}}
+  - : ひらがなの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。
+- `japanese-formal` {{experimental_inline}}
+  - : 法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。
+- `japanese-informal` {{experimental_inline}}
+  - : 日本語の日常的な数値表記です。
+- `kannada`, `-moz-kannada`
+  - : カンナダ語の数値表記です。
+- `katakana` {{experimental_inline}}
+  - : カタカナの辞書順の文字です。
+- `katakana-iroha` {{experimental_inline}}
+  - : カタカナの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。
+- `korean-hangul-formal` {{experimental_inline}}
+  - : 韓国語のハングルの数値表記です。
+- `korean-hanja-formal` {{experimental_inline}}
+  - : 韓国語の公的な漢数字です。
+- `korean-hanja-informal` {{experimental_inline}}
+  - : 韓国語の漢数字です。
+- `lao`, `-moz-lao`
+  - : ラオス語の数値表記です。
+- `lower-armenian` {{experimental_inline}}
+  - : アルメニア語の小文字の数値表記です。
+- `malayalam`, `-moz-malayalam`
+  - : マラヤーラム語の数値表記です。
+- `mongolian` {{experimental_inline}}
+  - : モンゴル語の数値表記です。
+- `myanmar`, `-moz-myanmar`
+  - : ミャンマー語 (ビルマ語) の数値表記です。
+- `oriya`, `-moz-oriya`
+  - : オリヤー語の数値表記です。
+- `persian` {{experimental_inline}}, `-moz-persian`
+  - : ペルシャ語の数値表記です。
+- `simp-chinese-formal` {{experimental_inline}}
+  - : 公的な簡体字中国語の数値表記です。
+- `simp-chinese-informal` {{experimental_inline}}
+  - : 日常的な簡体字中国語の数値表記です。
+- `tamil` {{experimental_inline}}, `-moz-tamil`
+  - : タミル語の数値表記です。
+- `telugu`, `-moz-telugu`
+  - : テルグ語の数値表記です。
+- `thai`, `-moz-thai`
+  - : タイ語の数値表記です。
+- `tibetan` {{experimental_inline}}\*
+  - : チベット語の数値表記です。
+- `trad-chinese-formal` {{experimental_inline}}
+  - : 公的な繁体字中国語の数値表記です。
+- `trad-chinese-informal` {{experimental_inline}}
+  - : 日常的な繁体字中国語の数値表記です。
+- `upper-armenian` {{experimental_inline}}`
+  - : 伝統的なアルメニア語の大文字の数値表記です。
+- `disclosure-open` {{experimental_inline}}
+  - : {{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号
+- `disclosure-closed` {{experimental_inline}}
+  - : {{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号
+
+### 標準外の拡張
+
+Mozilla (Firefox)、Blink (Chrome、Opera)、WebKit (Safari) では、他の言語のリストの種類に対応するために、さらにいくつかの定義済みの種類が提供されています。どのブラウザーがどの拡張に対応しているかを確認するには、互換性一覧表を参照してください。
+
+- `-moz-ethiopic-halehame`
+- `-moz-ethiopic-halehame-am`
+- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er`
+- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et`
+- `hangul`, `-moz-hangul`
+- `hangul-consonant`, `-moz-hangul-consonant`
+- `urdu`, `-moz-urdu`
+
+## アクセシビリティの考慮
+
+画面リーダーの [VoiceOver](https://help.apple.com/voiceover/info/guide/) には、 `list-style-type` の値に `none` が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に[幅ゼロの空白](https://en.wikipedia.org/wiki/Zero-width_space)を[擬似コンテンツ](/ja/docs/Web/CSS/content)として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。
+
+```css
+ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+```
+
+- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)
+- [MDN WCAG の理解、ガイドライン 1.3 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+<h3 id="Setting_list_item_markers">リスト項目マーカーの設定</h3>
+
+#### HTML
 
-<h3 id="CSS">CSS</h3>
+```html
+List 1
+<ol class="normal">
+  <li>Hello</li>
+  <li>World</li>
+  <li>What's up?</li>
+</ol>
 
-<pre class="brush: css notranslate">ol.normal {
+List 2
+<ol class="shortcut">
+  <li>Looks</li>
+  <li>Like</li>
+  <li>The</li>
+  <li>Same</li>
+</ol>
+```
+
+#### CSS
+
+```css
+ol.normal {
   list-style-type: upper-alpha;
 }
 
@@ -515,96 +247,335 @@ list-style-type: unset;
 ol.shortcut {
   list-style: upper-alpha;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+#### 結果
 
-<pre class="brush: html notranslate">&lt;ol class="normal"&gt;List 1
-  &lt;li&gt;Hello&lt;/li&gt;
-  &lt;li&gt;World&lt;/li&gt;
-  &lt;li&gt;What's up?&lt;/li&gt;
-&lt;/ol&gt;
+{{EmbedLiveSample("Setting_list_item_markers","200","300")}}
 
-&lt;ol class="shortcut"&gt;List 2
-  &lt;li&gt;Looks&lt;/li&gt;
-  &lt;li&gt;Like&lt;/li&gt;
-  &lt;li&gt;The&lt;/li&gt;
-  &lt;li&gt;Same&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+<h3 id="All_list_style_types">リストスタイルのすべての種類</h3>
 
-<h3 id="Result" name="Result">結果</h3>
+#### HTML
 
-<p>{{EmbedLiveSample("Examples","200","300")}}</p>
+```html
+<ol>
+  <li>Apollo</li>
+  <li>Hubble</li>
+  <li>Chandra</li>
+  <li>Cassini-Huygens</li>
+  <li>Spitzer</li>
+</ol>
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+<h2>Choose a list style type:</h2>
 
-<p>読み上げソフトの <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> には、 <code>list-style-type</code> の値に <code>none</code> が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に<a href="https://en.wikipedia.org/wiki/Zero-width_space">幅ゼロの空白</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。</p>
+<div class="container">
 
-<pre class="brush: css notranslate">ul {
-  list-style: none;
+  <label for="disc">
+    <input type="radio" id="disc" name="type" value="disc">disc
+  </label>
+
+  <label for="circle">
+    <input type="radio" id="circle" name="type" value="circle">circle
+  </label>
+
+  <label for="square">
+    <input type="radio" id="square" name="type" value="square">square
+  </label>
+
+  <label for="decimal">
+    <input type="radio" id="decimal" name="type" value="decimal">decimal
+  </label>
+
+  <label for="cjk-decimal">
+    <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal
+  </label>
+
+  <label for="decimal-leading-zero">
+    <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero
+  </label>
+
+  <label for="lower-roman">
+    <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman
+  </label>
+
+  <label for="upper-roman">
+    <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman
+  </label>
+
+  <label for="lower-greek">
+    <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek
+  </label>
+
+  <label for="lower-alpha">
+    <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin
+  </label>
+
+  <label for="upper-alpha">
+    <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin
+  </label>
+
+  <label for="arabic-indic">
+    <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic
+  </label>
+
+  <label for="armenian">
+    <input type="radio" id="armenian" name="type" value="armenian">armenian
+  </label>
+
+  <label for="bengali">
+    <input type="radio" id="bengali" name="type" value="bengali">bengali
+  </label>
+
+  <label for="cambodian">
+    <input type="radio" id="cambodian" name="type" value="cambodian">cambodian
+  </label>
+
+  <label for="cjk-earthly-branch">
+    <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch
+  </label>
+
+  <label for="cjk-heavenly-stem">
+    <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem
+  </label>
+
+  <label for="cjk-ideographic">
+    <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic
+  </label>
+
+  <label for="devanagari">
+    <input type="radio" id="devanagari" name="type" value="devanagari">devanagari
+  </label>
+
+  <label for="ethiopic-numeric">
+    <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric
+  </label>
+
+  <label for="georgian">
+    <input type="radio" id="georgian" name="type" value="georgian">georgian
+  </label>
+
+  <label for="gujarati">
+    <input type="radio" id="gujarati" name="type" value="gujarati">gujarati
+  </label>
+
+  <label for="gurmukhi">
+    <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi
+  </label>
+
+  <label for="hebrew">
+    <input type="radio" id="hebrew" name="type" value="hebrew">hebrew
+  </label>
+
+  <label for="hiragana">
+    <input type="radio" id="hiragana" name="type" value="hiragana">hiragana
+  </label>
+
+  <label for="hiragana-iroha">
+    <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha
+  </label>
+
+  <label for="japanese-formal">
+    <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal
+  </label>
+
+  <label for="japanese-informal">
+    <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal
+  </label>
+
+  <label for="kannada">
+    <input type="radio" id="kannada" name="type" value="kannada">kannada
+  </label>
+
+  <label for="katakana">
+    <input type="radio" id="katakana" name="type" value="katakana">katakana
+  </label>
+
+  <label for="katakana-iroha">
+    <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha
+  </label>
+
+  <label for="khmer">
+    <input type="radio" id="khmer" name="type" value="khmer">khmer
+  </label>
+
+  <label for="korean-hangul-formal">
+    <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal
+  </label>
+
+  <label for="korean-hanja-formal">
+    <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal
+  </label>
+
+  <label for="korean-hanja-informal">
+    <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal
+  </label>
+
+  <label for="lao">
+    <input type="radio" id="lao" name="type" value="lao">lao
+  </label>
+
+  <label for="lower-armenian">
+    <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian
+  </label>
+
+  <label for="malayalam">
+    <input type="radio" id="malayalam" name="type" value="malayalam">malayalam
+  </label>
+
+  <label for="mongolian">
+    <input type="radio" id="mongolian" name="type" value="mongolian">mongolian
+  </label>
+
+  <label for="myanmar">
+    <input type="radio" id="myanmar" name="type" value="myanmar">myanmar
+  </label>
+
+  <label for="oriya">
+    <input type="radio" id="oriya" name="type" value="oriya">oriya
+  </label>
+
+  <label for="persian">
+    <input type="radio" id="persian" name="type" value="persian">persian
+  </label>
+
+  <label for="simp-chinese-formal">
+    <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal
+  </label>
+
+  <label for="simp-chinese-informal">
+    <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal
+  </label>
+
+  <label for="tamil">
+    <input type="radio" id="tamil" name="type" value="tamil">tamil
+  </label>
+
+  <label for="telegu">
+    <input type="radio" id="telegu" name="type" value="telegu">telegu
+  </label>
+
+  <label for="thai">
+    <input type="radio" id="thai" name="type" value="thai">thai
+  </label>
+
+  <label for="tibetan">
+    <input type="radio" id="tibetan" name="type" value="tibetan">tibetan
+  </label>
+
+  <label for="trad-chinese-formal">
+    <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal
+  </label>
+
+  <label for="trad-chinese-informal">
+    <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal
+  </label>
+
+  <label for="upper-armenian">
+    <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian
+  </label>
+
+  <label for="disclosure-open">
+    <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open
+  </label>
+
+  <label for="disclosure-closed">
+    <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed
+  </label>
+
+  <label for="-moz-ethiopic-halehame">
+    <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame
+  </label>
+
+  <label for="-moz-ethiopic-halehame-am">
+    <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am
+  </label>
+
+  <label for="ethiopic-halehame-ti-er">
+    <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er
+  </label>
+
+  <label for="ethiopic-halehame-ti-et">
+    <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et
+  </label>
+
+  <label for="hangul">
+    <input type="radio" id="hangul" name="type" value="hangul">hangul
+  </label>
+
+  <label for="hangul-consonant">
+    <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant
+  </label>
+
+  <label for="urdu">
+    <input type="radio" id="urdu" name="type" value="urdu">urdu
+  </label>
+
+  <label for="-moz-ethiopic-halehame-ti-er">
+    <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er
+  </label>
+
+  <label for="-moz-ethiopic-halehame-ti-et">
+    <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et
+  </label>
+
+  <label for="-moz-hangul">
+    <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul
+  </label>
+
+  <label for="-moz-hangul-consonant">
+    <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant
+  </label>
+
+  <label for="-moz-urdu">
+    <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu
+  </label>
+
+</div>
+```
+
+#### CSS
+
+```css
+
+ol {
+  font-size: 1.2rem;
 }
 
-ul li::before {
-  content: "\200B";
+.container {
+  column-count: 3;
+}
+
+label {
+  display: block;
+}
+
+input {
+  margin: .4rem;
 }
+```
+
+#### JavaScript
+
+```js
+const container = document.querySelector(".container");
+container.addEventListener("change", event => {
+  const list = document.querySelector("ol");
+  list.setAttribute("style", `list-style-type: ${event.target.value}`);
+});
+```
+
+#### 結果
+
+{{EmbedLiveSample("All_list_style_types", "600", "800")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
 
-</pre>
-
-<ul>
- <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none – Unfettered Thoughts</a></li>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Notes" name="Notes">メモ</h2>
-
-<ul>
- <li>一部の <code>list-style-types</code> の表示には、適切なフォントのインストールが必要です。</li>
- <li><code>cjk-ideographic</code> は <code>trad-chinese-informal</code> と同義です。後方互換性のために残されています。</li>
-</ul>
-
-<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 Counter Styles', '#extending-css2', 'list-style-type')}}</td>
-   <td>{{Spec2("CSS3 Counter Styles")}}</td>
-   <td>CSS2.1 counters を再定義。<br>
-    <code>@counter-style</code> 規則に対応するため構文を拡張。<br>
-    <code>@counter-style</code> を使用して、一般的なスタイルである <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code>, <code>disclosure-closed</code> を定義。<br>
-    <code>&lt;counter-style&gt;</code> を <code>symbols()</code> 表記で拡張。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>{{cssxref("&lt;string&gt;")}} の対応を追加し、 <code>@counter-style</code> 規則で使われる識別子をキーワードに追加。<br>
-    単純な <code>&lt;string&gt;</code> の対応を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.list-style-type")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
-</ul>
+- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}