HTML では UL および OL 要素といった“箇条書き”の要素があるが,たとえばそういった要素の項目についてのスタイルを指定するプロパティを解説する。

箇条書きの項目の要素には,(ブラウザのスタイルシートの設定では)HTML の LI 要素が属する。箇条書きの項目じたいは,ブロックボックスを描く要素に似るが,これは,もうひとつ,“行頭記号・番号のためのボックス”を描く。簡単に言うと,先頭に行頭記号・番号を伴う,ブロックボックスを描く要素である。
ここで,この“箇条書きの項目に対するプロパティ”は,おもにその行頭記号・番号について簡便に指定するものである。CSS2 においては,マーカボックス,生成,カウンタなどを使用してさらに詳細に箇条書きの項目のスタイルを定めることができるが,これは後述することにしよう。
list-style-type プロパティ list-style-type プロパティは,行頭記号・番号のスタイルを指定するものである。
list-style-type: キーワード;
このプロパティは,
display プロパティに list-item が指定された要素)に適用される。
disc である。
値として与えるキーワードは,次の中から 1 つである。
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
hebrew
georgian
armenian
cjk-ideographic
hiragana
katanaka
hiragana-iroha
katakana-iroha
lower-latin または lower-alpha
upper-latin または upper-alpha
lower-greek
ここで,箇条書きの項目数が多く,行頭番号が尽きてしまった場合(例えば,アルファベットで Z. まで到達してしまった場合),それ以降どのように行頭番号が振られるかは定められていない。したがって,項目数がひじょうに多い箇条書きでは,数字などで番号を振るのがよいだろう。
P, OL, UL { line-height: 150%; }
OL { list-style-type: lower-roman; }
UL { list-style-type: square; }
<P>中和滴定の実験器具</P>
<UL>
<LI>ホールピペット
<LI>ビュレット
<LI>コニカルビーカー
</UL>
<P>中和滴定の手順</P>
<OL>
<LI>酸または塩基をホールピペットでとり,コニカルビーカーにあけ,指示薬を加える。必要に応じて検液は希釈してよい。
<LI>塩基または酸をビュレットに入れ,ビュレットの目盛りを読む。
<LI>ビュレットから,指示薬の色が変わるまで検液を滴下する。指示薬の色が変わった時点でビュレットの目盛りを読み,滴下量を求める。
<LI>操作を数回繰り返して,滴下量の平均値を求める。
</OL>
中和滴定の実験器具
中和滴定の手順
decimal-leading-zero,hebrew,georgian,armenian,cjk-ideographic,hiragana,katanaka,hiragana-iroha,katakana-iroha,lower-latin,upper-latin および lower-greek はサポートしない。
list-style-image プロパティ list-style-image プロパティは,行頭記号として画像を使用することを指定する。
list-style-image: url(URI);list-style-image: none;
このプロパティは,
display プロパティに list-item が指定された要素)に適用される。
none である。
このプロパティに URI を値として与え(与え方は background-image プロパティと同様である),その URI で示された画像が使用できる場合,行頭記号がその画像になる。逆に,URI で示された画像が使用できない場合,また,値としてキーワード none が与えられた場合には,list-style-type プロパティで指定された行頭記号・番号が使用される。これは,背景色と背景画像の関係に似ている。
UL { line-height: 150%; list-style-image: url(f_bul_1.gif); list-style-type: circle; /* 画像が使用できない場合は“円”の行頭記号 */ }
<UL>
<LI>メチルレッド
<LI>メチルオレンジ
<LI>チモールフタレイン
<LI>フェノールフタレイン
</UL>