リスト項目マーカーに画像,グリフ,番号などを用いたり,その位置を指定するプロパティ。
値 | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit |
---|---|
初期値 | disc |
適用 | display:list-item の要素(li要素) |
継承性 | あり |
パーセント値 | 受けつけない |
メディアグループ | visual |
このプロパティでは,リスト項目マーカーの外観を指定します。もし 'list-style-image' の値が 'none' であるなら,もしくはURIによって示される画像を表示できないなら,この 'list-style-type' によるマーカーが有効になります。値に 'none' を指定するとマーカーは表示されません。それ以外の値は三つのタイプに分類されます: すなわちグリフ(図形)の種類,番号体系,そしてアルファベット体系です。
(補足:CSS2では,新しい値として 'decimal-leading-zero', 'hebrew', 'armenian', 'georgian', 'cjk-ideographic', 'hiragana', 'katakana', 'hiragana-iroha', 'katakana-iroha', 'lower-latin', 'upper-latin', 'lower-greek' の十二種類が追加されています。)
グリフの種類としては 'disc','circle','square' があります。これらのレンダリングはUAに依存します。
番号体系は,以下の値を指定できます:
decimal
10進数で1から数える(1, 2, 3, 4)
decimal-leading-zero
10進数で上位桁にゼロをつけて1から数える(01, 02, … 98, 99)
lower-roman
, upper-roman
小文字のローマ数字(ⅰ, ⅱ, ⅲ, ⅳ),大文字のローマ数字(Ⅰ, Ⅱ, Ⅲ, Ⅳ)
hebrew
伝統的なヘブライ数字
armenian
伝統的なアルメニア数字
georgian
伝統的なグルジア数字
cjk-ideographic
表意文字の数え方(一,二,三 etc…)
hiragana
, katakana
, hiragana-iroha
, katakana-iroha
あ,い,う … ア,イ,ウ … い,ろ,は … イ,ロ,ハ …
番号体系の厳密な仕組はまだ定められておらず,将来で明確化が図られます。(see CSS3 module: Lists)
アルファベット体系は,以下の値を指定できます:
lower-alpha
, lower-latin
小文字のASCIIアルファベット(a, b, c, … z)
upper-alpha
, upper-latin
大文字のASCIIアルファベット(A, B, C, … Z)
lower-greek
小文字の古典的なギリシャ文字(α, β, γ, δ, … ω)
既存仕様ではまだアルファベットの終りをどう扱うのかは定められていません。たとえば26項目のラテンアルファベットを数えた後をどのようにレンダリングするのかは定っていません。したがって,リストが長くなる場合には番号の種類を使用するよう推奨しています。
リストスタイルの適用には,ulもしくはol要素からli要素へ継承させるべきです。詳細は 'list-style' の節を参照。
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ol { list-style-type: lower-roman; }
ol ol { list-style-type: lower-alpha; }
値 | <uri> | none | inherit |
---|---|
初期値 | none |
適用 | display:list-item の要素(li要素) |
継承性 | あり |
パーセント値 | 受けつけない |
メディアグループ | visual |
このプロパティでは,リスト項目マーカーに用いる画像を指定します。'list-style-type' が同時に設定されたなら,この 'list-style-image' のほうが優先されます。ただし画像が利用できないなら,逆に 'list-style-type' で設定されたマーカーを表示します。
各値は以下のような意味を持ちます:
<uri>
リスト項目マーカーに用いる画像リソースのURI。
none
リスト項目マーカーに画像を用いない。
リストスタイルの適用には,ulもしくはol要素からli要素へ継承させるべきです。詳細は 'list-style' の節を参照。
ul { list-style-image: url("list-marker1.png"); }
ul ul { list-style-image: url("list-marker2.png"); }
値 | inside | outside | inherit |
---|---|
初期値 | outside |
適用 | display:list-item の要素(li要素) |
継承性 | あり |
パーセント値 | 受けつけない |
メディアグループ | visual |
リスト項目の主要ブロックボックスに対するマーカーの位置を指定するプロパティです。
各値は以下のような意味を持ちます:
outside
マーカーボックスは主要ブロックボックスの外側に配置される。
inside
マーカーボックスは主要ブロックボックスの内側にある先頭インラインボックスに成り,それに続けて要素内容を流し込む。
CSS2.1仕様では,マーカーボックスの正確な位置は明確にされません。将来の仕様で明確にされます。
リストスタイルの適用には,ulもしくはol要素からli要素へ継承させるべきです。詳細は 'list-style' の節を参照。
値 | [<'list-style-type'> || <'list-style-image'> || <'list-style-position'>] | inherit |
---|---|
初期値 | 個別のプロパティを参照 |
適用 | display: list-item; の要素(li要素) |
継承性 | あり |
パーセント値 | 受けつけない |
メディアグループ | visual |
これは簡略化表記であり,三つのプロパティ 'list-style-type','list-style-image' および 'list-style-position' の各値を一箇所にまとめて指定できます。このうち少くとも一つの値を指定するか,複数の値を空白類文字で区切ります。順序は問われません。
これを用いると,まづリストのプロパティはすべて初期値にされ,そして指定値にわりあて直されます。
このプロパティに 'none' だけを設定すると,'list-style-type' と 'list-style-image の両方を非表示にします。
リストスタイルを適用する際には,ulもしくはol要素からli要素へ継承させるべきです。なぜならli要素をセレクタの主体に指定してしまうと――継承やカスケード処理の都合で――幾重にも入れ子になっているリスト構造の場合うまく扱えないからです。
たとえば ol li
というセレクタの場合,ol内にあるulにも影響を及ぼして了います。かりに ul li
で上書きしたとしても,今度はul内にあるolに影響を及ぼして了うのです。これは子供セレクタの ol>li
で解決するのですが,CSS1適合では扱えません。
ul { list-style: disc url("list-marker1.png") outside; }
値 | <length> | auto | inherit |
---|---|
初期値 | auto |
適用 | display:marker の要素 |
継承性 | なし |
パーセント値 | 受けつけない |
メディアグループ | visual |
マーカーと対応する主要ブロックの最も近いボーダー辺同士の距離を指定するプロパティです。
各値は以下のような意味を持ちます:
<length>
マーカーと主要ブロックの距離を長さで指定する。
auto
マーカーと主要ブロックの距離をUAに任せる。
【註】:このプロパティは改訂版のCSS2.1仕様では除外される豫定です。なぜなら,'display: marker' の役割はCSS3 module: Listsにおいて新しく考案されているThe ::marker pseudo-elementに取って代る豫定なので,事実上 obsolete だからです。
li:before {
display: marker;
content: url("list-marker.png");
marker-offset: 2em;
}