リストのマーカーの種類

今回はリスト関連です。箇条書きの・マークもスタイルシートを使えばよりどりみどりです。

使うプロパティ

使うプロパティは

list-style-type:値；
か
list-style:値；

の2つのうち好きなほうが使えます。list-styleは他のリスト関連のプロパティの値も同時に指定できます。

ulタグで使う値は4種類あります

none   :マーカーを表示しない
disc   :マーカーを黒丸にする
circle :マーカーを白丸にする
square :マーカーを四角にする

olタグで使う値は6種類あります

none   :マーカーを表示しない
decimal:1から始まる数字する
lower-roman:小文字のローマ数字にする
upper-roman:大文字のローマ数字にする
lower-alpha:小文字のアルファベットにする
upper-alpha:大文字のアルファベットにする

実はulやolに関係なく値をとることができます。しかし、HTMLの持つ意味を考えると使い分けたほうがいいでしょう。 liタグに対して設定することもできるので、次のようなことも可能です。

li.sample1{
    list-style:disk;
}
li.sample2{
    list-style:circle;
}
li.sample3{
    list-style:square;
}

あああ
いいい
ううう

マーカーとして画像を使うこともできます。こちらは応用編で紹介しています。ぜひご覧ください。