リストマーカーのスタイルを変更するには、「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(黒丸)です。
コメント