リストマーカーの種類を指定する

リストマーカーの種類を指定するには、list-style-typeプロパティを使います。
list-style-typeプロパティは、ul要素、ol要素、li要素の他に、displayプロパティで list-item を指定した要素にも設定することができます。
サンプル
- リスト1
- リスト2
- リスト3
<!-- html --> <ul class="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
/* css */ .sample { list-style-type: disc; }
マーカーの種類
値 | 説明 | サンプル |
---|---|---|
none | なし |
|
disc | 黒丸 |
|
circle | 白丸 |
|
square | 四角 |
|
decimal | 数字 |
|
upper-alpha | アルファベット(大文字) |
|
lower-alpha | アルファベット(小文字) |
|
upper-roman | ローマ数字(大文字) |
|
lower-roman | ローマ数字(小文字) |
|
decimal-leading-zero | 数字(2桁) |
|
lower-greek | ギリシャ文字(小文字) |
|
upper-latin | ラテン文字(大文字) |
|
lower-latin | ラテン文字(小文字) |
|
hebrew | ヘブライ数字 |
|
armenian | アルメニア数字 |
|
georgian | グルジア数字 |
|
cjk-ideographic | 漢数字 |
|
hiragana | ひらがな |
|
katakana | カタカナ |
|
hiragana-iroha | いろは(ひらがな) |
|
katakana-iroha | いろは(カタカナ) |
|
マーカーに色をつけることもできます
- リスト1
- リスト2
- リスト3
<!-- html --> <ul class="sample"> <li><span>リスト1</span></li> <li><span>リスト2</span></li> <li><span>リスト3</span></li> </ul>
/* css */ .sample { list-style-type: disc; color: #f33; } .sample span { color: #000; }
下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事
Comment