【CSS】箇条書きリストマーク・数字一覧表【覚え書】

HTMLのul、ol要素を使って箇条書きリストを作る際、CSSプロパティ list-style-type を使ってリストの先頭に付けるマーカーや数字の種類を指定できます。

指定できる値のうち、日本語文書で使われるものに絞って一覧にしています。

list-style-type 指定できる値

 セレクタ{ list-style-type: 値;} 

説明ブラウザ対応状況
none表示しない(C2/e/Fx/Ch/Op/Sa)
disc黒丸(●)(既定値)(C2/e/Fx/Ch/Op/Sa)
circle白丸(○)(C2/e/Fx/Ch/Op/Sa)
square黒四角(■)(C2/e/Fx/Ch/Op/Sa)
decimal数字(1, 2, 3...)(C2/e/Fx/Op/Sa)
decimal-leading-zero0付き数字(01, 02, 03...)(C2/e/Fx/Ch/Op/Sa)
cjk-ideographic漢数字(一、二、三、、、)(C3/Fx/Ch/Sa)
lower-roman小文字ローマ数字(i, ii, iii...)(C2/e/Fx/Ch/Op/Sa)
upper-roman大文字ローマ数字(I, II, III...)(C2/e/Fx/Ch/Op/Sa)
upper-alpha大文字アルファベット(A, B, C...)(C2/e/Fx/Ch/Op/Sa)
hiraganaひらがな(あ、い、 う...)(C2/Fx/Ch/Sa)
hiragana-irohaひらがな-いろは(い、ろ、 は...)(C2/Fx/Ch/Sa)
katakanaカタカナ(ア、イ、 ウ...)(C2/Fx/Ch/Sa)
katakana-irohaカタカナ-イロハ(イ、 ロ、 ハ...)(C2/Fx/Ch/Sa)

<ol>には、項目番号のタイプを指定するtype属性がありましたが、HTML5.0で廃止されています。

「list-style-type」指定サンプル

指定なし(初期値:黒丸)

<ul>
   <li>Word</li>
   <li>Excel</li>
   <li>PowerPoint</li>
</ul>
  • Word
  • Excel
  • PowerPoint

リストマークを消す

<ul>
   <li>Word</li>
   <li>Excel</li>
   <li>PowerPoint</li>
</ul>
ul{
   list-style-type: none;
}
  • Word
  • Excel
  • PowerPoint

白丸

<ul>
   <li>Word</li>
   <li>Excel</li>
   <li>PowerPoint</li>
</ul>
ul{
   list-style-type: circle;
}
  • Word
  • Excel
  • PowerPoint
タイトルとURLをコピーしました