Web/CSS/list-style を更新

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

1 files changed, 104 insertions, 96 deletions

diff --git a/files/ja/web/css/list-style/index.md b/files/ja/web/css/list-style/index.md
index 72fbb70159..d9ff714936 100644
--- a/files/ja/web/css/list-style/index.md
+++ b/files/ja/web/css/list-style/index.md
@@ -3,31 +3,35 @@ title: list-style
 slug: Web/CSS/list-style
 tags:
   - CSS
+  - CSS Lists
   - CSS プロパティ
-  - CSS リスト
   - Reference
-  - list-style
-  - list-style-image
-  - list-style-position
-  - list-style-type
-  - リファレンス
+  - recipe:css-shorthand-property
+browser-compat: css.properties.list-style
 translation_of: Web/CSS/list-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>CSS の <strong><code>list-style</code></strong> プロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>で、リストスタイルプロパティの {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}} を設定します。</p>
+**`list-style`** は CSS の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、リストのすべてのスタイルプロパティを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/list-style.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
-<div class="note">
 <p><strong>メモ:</strong> このプロパティはリスト項目、すなわち <code>{{cssxref("display")}}: list-item;</code> の要素に適用されます。<a href="https://www.w3.org/TR/html5/rendering.html#lists">既定では</a> {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素（ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}）に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。</p>
+> **Note:** このプロパティはリスト項目、すなわち `{{cssxref("display")}}: list-item;` の要素に適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists) {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。
 </div>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構成要素のプロパティ
+
+このプロパティは以下の CSS プロパティの一括指定です。
+
+- [`list-style-image`](/ja/docs/Web/CSS/list-style-image)
+- [`list-style-position`](/ja/docs/Web/CSS/list-style-position)
+- [`list-style-type`](/ja/docs/Web/CSS/list-style-type)
 
-<pre class="brush:css no-line-numbers">/* type */
+## 構文
+
+```css
+/* type */
 list-style: square;
 
 /* image */
@@ -48,111 +52,115 @@ list-style: none;
 /* グローバル値 */
 list-style: inherit;
 list-style: initial;
+list-style: revert;
 list-style: unset;
-</pre>
+```
+
+`list-style` プロパティは 1 つ、2 つ、3 つのキーワードを任意の順序で指定します。 {{cssxref("list-style-type")}} と {{cssxref("list-style-image")}} が両方とも設定された場合、 `list-style-type` は画像が利用できない場合の予備として使用されます。
 
-<p><code>list-style</code> プロパティは1～3つのキーワードを任意の順序で指定します。 {{cssxref("list-style-type")}} と {{cssxref("list-style-image")}} が両方とも設定された場合、 <code>list-style-type</code> は画像が利用できない場合の予備として使用されます。</p>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- {{cssxref("list-style-type")}}
+  - : {{cssxref("list-style-type")}} を参照して下さい。
+- {{cssxref("list-style-image")}}
+  - : {{cssxref("list-style-image")}} を参照して下さい。
+- {{cssxref("list-style-position")}}
+  - : {{cssxref("list-style-position")}} を参照して下さい。
+- `none`
+  - : リストスタイルは使用されません。
 
-<dl>
- <dt>{{cssxref("list-style-type")}}</dt>
- <dd>{{cssxref("list-style-type")}} を参照して下さい。</dd>
- <dt>{{cssxref("list-style-image")}}</dt>
- <dd>{{cssxref("list-style-image")}} を参照して下さい。</dd>
- <dt>{{cssxref("list-style-position")}}</dt>
- <dd>{{cssxref("list-style-position")}} を参照して下さい。</dd>
- <dt><code>none</code></dt>
- <dd>リストスタイルは使用されません。</dd>
-</dl>
+## アクセシビリティの考慮
+
+注意すべき例外として、Safari は順序なしリストで `list-style` の値に `none` が適用されると、アクセシビリティツリー上でリストとして認識しません。
+
+この問題に対処する最も簡単な方法は、明示的に `role="list"` をマークアップ内の `<ul>` 要素に追加することです。これにより、デザインに影響を与えることなく、リストの意味を復元することができます。
+
+マークアップを変更できない場合の CSS のみの解決策もあります。一つは、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を[擬似コンテンツ](/ja/docs/Web/CSS/content)として追加することです。
+
+```css
+ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+```
+
+もう一つは、 list-style プロパティに url の値を適用する方法です。
+
+```css
+nav ol, nav ul {
+  list-style: none;
+}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+/* こうします */
+
+nav ol, nav ul {
+  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
+}
+```
+
+これらの CSS による回避策は HTML での解決ができない場合のみに使用してください。また、ユーザーの使い勝手に悪影響を与えないことをテストした後にのみ使用してください。
+
+- ['Fixing' Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)
+- [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="HTML">HTML</h3>
+<h3 id="Setting_list_style_type_and_position">リストスタイルの種類と位置の設定</h3>
 
-<pre class="brush: html">List 1
-&lt;ul class="one"&gt;
-  &lt;li&gt;List Item1&lt;/li&gt;
-  &lt;li&gt;List Item2&lt;/li&gt;
-  &lt;li&gt;List Item3&lt;/li&gt;
-&lt;/ul&gt;
+#### HTML
+
+```html
+List 1
+<ul class="one">
+  <li>List Item1</li>
+  <li>List Item2</li>
+  <li>List Item3</li>
+</ul>
 List 2
-&lt;ul class="two"&gt;
-  &lt;li&gt;List Item A&lt;/li&gt;
-  &lt;li&gt;List Item B&lt;/li&gt;
-  &lt;li&gt;List Item C&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+<ul class="two">
+  <li>List Item A</li>
+  <li>List Item B</li>
+  <li>List Item C</li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+#### CSS
 
-<pre class="brush: css">.one {
+```css
+.one {
   list-style: circle;
 }
 
 .two {
   list-style: square inside;
-}</pre>
+}
+```
 
-<h3 id="Result" name="Result">結果</h3>
+#### 例
 
-<p>{{EmbedLiveSample('Examples', 'auto', 220)}}</p>
+{{EmbedLiveSample('Setting_list_style_type_and_position', 'auto', 220)}}
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+## 仕様書
 
-<p>Safari は順序なしリストで <code>list-style</code> の値に <code>none</code> が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。</p>
+{{Specifications}}
 
-<pre class="brush: css">ul {
-  list-style: none;
-}
+## ブラウザーの互換性
 
-ul li::before {
-  content: "\200B";
-}
-</pre>
+{{Compat}}
 
-<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 "WCAG を理解する ― ガイドライン 1.3 の解説"</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="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', '#list-style-property', 'list-style')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}</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")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
-</ul>
+- {{Cssxref("list-style-type")}}、{{Cssxref("list-style-image")}}、{{Cssxref("list-style-position")}}