リストっす
おっす、オイラこの章を解説させてもらうッス。
リストの横に付いてる、ul要素の「・」やol要素の数字とかのことをマーカーっていうッス。ここでは、それをいじるッス。
リストマーカーの種類
まずは、リストアイテム要素のマーカーを変えてみるッス。
list-style-type
| 値 | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none |
|---|---|
| 初期値 | disc |
| 適用 | リスト項目要素 |
| 継承 | する |
これでマーカーの種類を決めるッス。ol要素やul要素のtype属性みたいなモンっすね。あ、このプロパティが有効なのは、下で紹介する'list-style-image'プロパティ値が[none]か、指定された画像が見付からなかった場合ッスよ。
それから、ul要素でもol要素でも、こいつらは共通ッス。
それじゃぁキーワードを見て行くッス。
- disc
- 丸いポイント。●。
- circle
- 白抜きの丸いポイント。○。
- square
- 四角いポイント。□。
- decimal
- 十進数で1から数えるッス。（1, 2, 3, 4, 5）
- lower-roman
- 小文字のローマ数字。(i, ii, iii, iv, v)
- upper-roman
- 大文字のローマ数字。(I, II, III, IV, V)
- lower-alpha
- 小文字のアルファベット。(a, b, c, d, e)
- upper-alpha
- 大文字のアルファベット。(A, B, C, D, E)
そうそう、文字を使い切った後(例えば[lower-alpha]でzまで来た時)の処理方法は、UA任せらしいッスよ。
例を挙げておくッス。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>小文字のローマ数字の番号不利</title>
<style type="text/css"><!--
ol { list-style-type: lower-roman }
--></style>
</head>
<body>
<ol>
<li> This is the first item.</li>
<li> This is the second item.</li>
<li> This is the third item.</li>
</ol>
</body>
</html>
これを表示すると、
こうなるッス。
リストマーカーを画像で
list-style-image
| 値 | <URL> | none |
|---|---|
| 初期値 | none |
| 適用 | リスト項目要素 |
| 継承 | する |
このプロパティは、リストマーカーとして用いる画像を設定するッス。指定した画像がある場合はマーカーにそれを使って、無い場合は'list-style-type'で指定したマーカーを使うッス。
次の例だと、各リスト項目の先頭にマーカーとして「ellipse.png」っていう画像を設定するッス。
ul { list-style-image: url("image/ellipse.png") }
万が一、画像が手に入らない時の事も考えて、'list-style-type'も設定しときたいところッスね。
リストマーカーの位置指定
list-style-position
| 値 | inside | outside |
|---|---|
| 初期値 | outside |
| 適用 | リスト項目要素 |
| 継承 | する |
このプロパティは、主要ブロックボックス(内容部分)に対するマーカーボックスの位置を指定するッス。ややこしく思えるかも知んないけど、こういう事ッス。
- inside
- マーカーは、主要ブロックボックス内の最初にインラインボックスとして整形されるッス。
- outside
- マーカーは主要ボックスの外側になるッス。
一括指定
list-style
| 値 | [ <'list-style-type'> || <'list-style-image'> || <'list-style-position'> ] |
|---|---|
| 初期値 | 簡略化プロパティなので定義しない |
| 適用 | リスト項目要素 |
| 継承 | する |
ここまで来たら、もう予想はつくッスね。これは簡略化プロパティで、'list-style-type'、'list-style-image'、'list-style-position'という3つのプロパティを1箇所で設定出来るッスよ。相変わらず、値を省略すると、初期値が利用されるッスよ。
そうそう、この'list-style'で"none"と設定すると、'list-style-type'と'list-style-image'両方を[none]と設定する事になるんだって。
'list-style-image'を指定するなら、万が一、画像が手に入らない時の事も考えて、'list-style-type'も指定しときたいところッスね。
ul { list-style: url("image/ellipse.png") disc }
しっかし、HTMLと違って、「番号を途中から始める」為のプロパティが無いッスなー。
関連のプロパティは以上ッス。お疲れさんス。でわでわ〜。