list-style
==========

**`list-style`** は CSS の一括指定プロパティで、リストのすべてのスタイルプロパティを設定します。

試してみましょう
--------

**メモ:** このプロパティはリスト項目、すなわち ``display`: list-item;` の要素に適用されます。既定では `<li>` 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは `<ol>` または `<ul>`) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `list-style-image`
* `list-style-position`
* `list-style-type`
構文
--


```css
/\* type \*/
list-style: square;

/\* image \*/
list-style: url("../img/shape.png");

/\* position \*/
list-style: inside;

/\* type | position \*/
list-style: georgian inside;

/\* type | image | position \*/
list-style: lower-roman url("../img/shape.png") outside;

/\* キーワード値 \*/
list-style: none;

/\* グローバル値 \*/
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
```


`list-style` プロパティは 1 つ、2 つ、3 つのキーワードを任意の順序で指定します。 `list-style-type` と `list-style-image` が両方とも設定された場合、 `list-style-type` は画像が利用できない場合の予備として使用されます。

### 値

`list-style-type`

`list-style-type` を参照して下さい。

`list-style-image`

`list-style-image` を参照して下さい。

`list-style-position`

`list-style-position` を参照して下さい。

`none`

リストスタイルは使用されません。

アクセシビリティの考慮
-----------

注意すべき例外として、Safari は順序なしリストで `list-style` の値に `none` が適用されると、アクセシビリティツリー上でリストとして認識しません。

この問題に対処する最も簡単な方法は、明示的に `role="list"` をマークアップ内の `<ul>` 要素に追加することです。これにより、デザインに影響を与えることなく、リストの意味を復元することができます。

マークアップを変更できない場合の CSS のみの解決策もあります。一つは、それぞれのリスト項目の前にゼロ幅スペースを擬似コンテンツとして追加することです。


```css
ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}
```


もう一つは、 list-style プロパティに url の値を適用する方法です。


```css
nav ol,
nav ul {
  list-style: none;
}

/\* こうします \*/

nav ol,
nav ul {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}
```


これらの CSS による回避策は HTML での解決ができない場合のみに使用してください。また、ユーザーの使い勝手に悪影響を与えないことをテストした後にのみ使用してください。

* 'Fixing' Lists
* VoiceOver and list-style-type: none – Unfettered Thoughts
* MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `list-style-type`: `disc`
* `list-style-position`: `outside`
* `list-style-image`: `none`
 |
| 適用対象 |  リスト項目 |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして* `list-style-image`: The keyword `none` or the computed <image>
* `list-style-position`: 指定通り
* `list-style-type`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `list-style-image`: 離散値
* `list-style-position`: 離散値
* `list-style-type`: 離散値
 |

形式文法
----
```

list-style =   
  <'list-style-position'>  ||  
  <'list-style-image'>     ||  
  <'list-style-type'>        
  
```

例
-

### リストスタイルの種類と位置の設定

#### HTML


```html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>
```


#### CSS


```css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}
```


#### 例

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-property |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `list-style-type`、`list-style-image`、`list-style-position`