HTML において <LI> に代表される“箇条書きの項目”の整形はブロック要素をもとにしているが,ややそれと異なる部分がある。この“箇条書きの項目”にはとくにいくつかの属性を指定することができる。
箇条書きの先頭につくであろう番号や記号(リストマーカ)のスタイルは CSS によって変えることができる。
list-style-type: (キーワード);
指定できるキーワードは次の 9 つである。
この属性は箇条書きの項目に適用され,継承される。ここで気をつけていただきたいのは,継承によってたとえば <UL> に list-style-type 属性を指定して,その中にある <LI> 全体に対して効果を及ぼすことができるという点である。
一見,disc,square,circle は <UL> に,この 3 つと none を除いた 4 つは <OL> に指定しなければならないように見えるが,それは任意である。<UL> に decimal を指定してもかまわないのである。だが,HTML の記述によって <UL> は順序なし,<OL> は順序ありという明示がなされているのだから,こうした指定はあるいはナンセンスであろう。
<P>“箇条書きの項目”に対して指定する属性</P>
<OL STYLE="list-style-type: lower-roman;">
<LI>list-style-type
<UL STYLE="list-style-type: square;">
<LI>disc,square,circle
<LI>decimal,upper-roman,lower-roman,upper-alpha,lower-alpha
<LI>none
</UL>
<LI>list-style-image
<LI>list-style-position
<LI>list-style(短縮属性)
</OL>
“箇条書きの項目”に対して指定する属性
上の例では,<UL> および <OL> に list-style-type 属性を指定しているが,当然 <LI> に対してでもかまわない。だが,<STYLE> に書き込む場合は,<LI> について指定するとカスケーディングのため思わぬ表示結果になることがある。この詳細は Section 2 で解説するが,<STYLE> に書く場合は <UL>,<OL> に指定したほうがよいという事実を知っておいていただきたい。これは,“箇条書きの項目”に対して指定する属性のいずれにも共通していることである。
IE3 list-style-type 属性はサポートされていない。
先ほどの list-style-type 属性に対して,これは自分で用意した画像を先頭の記号に使おうというものである。
list-style-image: url((URL));
これも“箇条書きの項目”に適用され,継承される。url(...) には background-image 属性と同じ要領で画像の URL を指定する。また,キーワード none を値とすることもでき(これが既定値),この場合は箇条書きの先頭の記号に画像は使わないことを意味する。
<P>list-style-image 属性の値</P>
<UL STYLE="list-style-image: url(f_bul_y.gif);">
<LI>url(...)
<LI>none
</UL>
list-style-image 属性の値
list-style-image 属性と list-style-type 属性を同時に指定した場合,前者の値が none でなければ,前者が優先される。もし,前者の値が none のとき,または,指定した画像が読めない場合は後者の指定が有効になる。
IE3, NN4 list-style-iamge 属性はサポートされていない。