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-zero | 0付き数字(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) |
「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