list-style

値の書き方

• inside・outside：list-style-position（印を行の中に入れるか、外に出すか）になります。
• url(…) などの画像：list-style-image（印にする画像）になります。
• square・decimal などのキーワードや、引用符で囲んだ文字：list-style-type（印の種類）になります。

3 つはどの順で書いても構いません。書かなかったものは、それぞれの初期値（outside・none・disc）に戻ります。このページのコントロールは、仕様の構文の順（position・image・type）で書き出します。

none の入り方

none は list-style-image にも list-style-type にもなれるので、値のほかの部分で決まっていないほうに入ります。

• list-style: none：画像も種類も none になり、印が消えます。
• list-style: none square：画像が none、種類が square です。
• list-style: url(…) none：画像が url(…)、種類が none です。
• list-style: none square url(…)：none の入る先が無いので、宣言ごと無視されます。

画像と種類を両方書く

画像を読み込めないときは、list-style-type の印が代わりに出ます。list-style: url(check.svg) circle のように書いておくと、画像が出ないときは白丸になります。

このページのプレビューは、印の付く 3 行（display: list-item の div）を並べ、箱に書いた list-style を受け継がせています。

気をつけること

• list-style の 3 つのプロパティはどれも子に受け継がれるので、ふつうは li ではなく ul や ol に書きます。
• Safari では、list-style: none にしたリストをスクリーンリーダー（VoiceOver）がリストとして読み上げないことがあります。リストとして伝えたいときは、ul に role="list" を付けます。