Section 2 : 箇条書きの項目(2)

 ここでは,Section 1 に続いて“箇条書きの項目”に指定する属性を紹介していこう。

リストマーカの位置:list-style-position 属性

 箇条書きの項目の先頭には記号がついているが,その位置を決めるのが list-style-position 属性である。

list-style-position: (キーワード);

 指定できるキーワードは次のいずれかである。

outside
先頭の記号を項目のテキストの流れの外側に出す。既定値。
inside
先頭の記号を項目のテキストの流れの内側に入れる。

この属性は箇条書きの項目に適用され,継承される

 指定のしかたからからすれば,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 短縮属性

 これまで出てきた 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 属性相当分のみがサポートされている。

list-style とカスケーディング

 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-alphacircle に上書きされてしまうのである。

 しかし,UL.sample,OL をそのままセレクタとすれば,LI によって生じていたカスケーディングはもともと生じないわけだから,このような問題は起こらない。