リスト
list-style-type
list-style-type は、リストの項目の頭に付く印（マーカー）の種類を指定します。黒丸や数字のほか、いろは順や漢数字、好きな文字も使えます。
構文
<counter-style> | <string> | noneプレビュー
りんご
Banana
みかん
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
list-style-type: decimal;
}コントロール
list-style-typedecimal
記号
数字
英字・ギリシャ文字
日本語
りんご
Banana
みかん
解説
値の書き方
- 記号：
disc（黒丸、初期値）、circle（白丸）、square（四角）、disclosure-closed/disclosure-open（開閉の三角）。 - 数字・文字：
decimal（1. 2. 3.）、decimal-leading-zero（01.）、lower-roman（i.）、lower-alpha（a.）、cjk-decimal（一、二、三、）など。項目の順番で数えます。 - 日本語：
hiragana（あ、い、う、）、hiragana-iroha（い、ろ、は、）、japanese-informal（一、二、）、japanese-formal（壱、弐、参、）など。 - 文字列：
"★ "のように書くと、その文字がそのまま印になります。本文との間を空けたいときは、後ろにスペースを入れます。 none：印を付けません。
どこに書くか
印が付くのは display: list-item の要素（ふつうは <li>）です。list-style-type は継承するので、<ul> や <ol> に書けば中の項目すべてに効きます。このページのプレビューも、箱に書いた値を中の 3 つの項目が受け取っています。
気をつけること
- Tailwind CSS などのリセット CSS は
ul・olをlist-style: noneにしています。印を出すには、ul・olに list-style-type を書き直します。 - Safari の読み上げ（VoiceOver）は、
list-style: noneにしたリストをリストとして読まないことがあります。見た目の印を消してもリストとして伝えたいときは、<ul role="list">のように role を付けます。 - 印の色や大きさは
::marker疑似要素で変えられます。数え方そのものを自分で作るときは@counter-styleを使います（その場で書けるsymbols()は Firefox だけが対応しています）。