ここでは,Section 1 に続いて“箇条書きの項目”に指定する属性を紹介していこう。
箇条書きの項目の先頭には記号がついているが,その位置を決めるのが list-style-position 属性である。
list-style-position: (キーワード);
指定できるキーワードは次のいずれかである。
この属性は箇条書きの項目に適用され,継承される。
指定のしかたからからすれば,inside を指定したときのほうが箇条書きがこじんまりとまとまるということになる。
次の例では,同じ箇条書きを list-style-position 属性だけを変えて出力させている。
<UL STYLE="list-style-position: outside;">
<LI>CSS では,要素を表示するのに,ブロック・インラインという大きな分類がなされ,それに置換されたもの,回り込みが指定されているものという性質を加味して“ボックス”を作ります。
<LI>箇条書きの項目は特別なブロック要素と考えるとよいでしょう。
</UL>
<UL STYLE="list-style-position: inside;">
<LI>CSS では,要素を表示するのに,ブロック・インラインという大きな分類がなされ,それに置換されたもの,回り込みが指定されているものという性質を加味して“ボックス”を作ります。
<LI>箇条書きの項目は特別なブロック要素と考えるとよいでしょう。
</UL>
IE3, NN4 list-style-position 属性はサポートされていない。
これまで出てきた list-style-type 属性,list-style-image 属性,list-style-position 属性の短縮属性として list-style 短縮属性がある。
list-style: (箇条書きの項目に関する指定);
3 つの属性の指定については,すべてを指定する必要はなく,順不同である。ただし,キーワード none は list-style-type,list-style-image 属性のいずれもとることができるので注意しなければならない。
list-style: url(bullet.gif) circle outside;
これが次と等価であることはすぐにおわかりいただけるだろう。
list-style-image: url(bullet.gif);
list-style-type: circle;
list-style-position: outside;
IE3 list-style 短縮属性はサポートされていない。
NN4 list-style 短縮属性は,list-style-type 属性相当分のみがサポートされている。
Section 1 で,<STYLE> に list-style に関する属性を書くとき,<LI> に対して指定すると不都合が起こることを触れた。これは,次の場合を考えればわかる。
UL.sample LI { list-style-type: circle; }
OL LI { list-style-type: upper-alpha; }
このとき,次の“項目 2”の先頭はどうなるだろうか。
<UL CLASS="sample">
<LI>項目 1
<OL>
<LI>項目 2
</OL>
</UL>
実はこの場合,“項目 2”の先頭は circle になってしまう。
というのは,“項目 2”が <OL> の中の <LI> であると同時に CLASS="sample" の <UL> の中の(<OL> を隔てた)<LI> でもあるからである。これに注目すれば,カスケーディング順位則からクラスがついているものほど高順位であるから,“項目 2”には OL LI の宣言に UL.sample LI の宣言が上書きされ,結果として upper-alpha は circle に上書きされてしまうのである。
しかし,UL.sample,OL をそのままセレクタとすれば,LI によって生じていたカスケーディングはもともと生じないわけだから,このような問題は起こらない。