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
