[CSS] リストマーカーのスタイルを指定する（list-style-type）
リストマーカーのスタイルを変更するには、「list-style-type」を使用します。
サンプルソース
例）リストのスタイルを「白丸」にする
|
1 2 3 |
ul.sample{ list-style-type:circle; } |
|
1 2 3 4 5 |
<ul class="sample"> <li>いぬ</li> <li>ねこ</li> <li>うさぎ</li> </ul> |
【結果】
- いぬ
- ねこ
- うさぎ
リストマーカースタイル一覧
リストマーカーには以下のようなスタイルを指定できます。
| 値 | スタイル | サンプル |
|---|---|---|
| none | なし |
|
| disc | 黒丸 |
|
| circle | 白丸 |
|
| square | 四角 |
|
| lower-roman | ローマ数字 （小文字） |
|
| upper-roman | ローマ数字 （大文字） |
|
| lower-greek | ギリシャ文字 （小文字） |
|
| upper-greek | ギリシャ文字 （大文字） |
|
| lower-alpha | アルファベット （小文字） |
|
| upper-alpha | アルファベット （大文字） |
|
| decimal | 数字 |
|
| decimal-leading-zero | 数字 （ゼロ埋め） |
|
備考
- リストマーカーのデフォルトは、desc（黒丸）です。