Take off with CSS - Section 1

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

　HTML において <LI> に代表される“箇条書きの項目”の整形はブロック要素をもとにしているが，ややそれと異なる部分がある。この“箇条書きの項目”にはとくにいくつかの属性を指定することができる。

リストマーカのスタイル：list-style-type 属性

　箇条書きの先頭につくであろう番号や記号（リストマーカ）のスタイルは CSS によって変えることができる。

list-style-type: （キーワード）;

　指定できるキーワードは次の 9 つである。

disc: 黒丸。既定値。
square: 四角。
circle: 円。
decimal: 数字。1，2，3，4，...。
upper-roman: 大文字のローマ数字。I，II，III，IV，...。
lower-roman: 小文字のローマ数字。i，ii，iii，iv，...。
upper-alpha: 大文字のアルファベット。A，B，C，D，...。
lower-alpha: 小文字のアルファベット。a，b，c，d，...。
none: 先頭に記号や数字はつけない。

　この属性は箇条書きの項目に適用され，継承される。ここで気をつけていただきたいのは，継承によってたとえば <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-image-属性

　先ほどの 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>