リストとマーカー

リスト項目マーカーに画像,グリフ,番号などを用いたり,その位置を指定するプロパティ。

目次

リストのプロパティ

list-style-type(リストマーカーの種類)

プロパティの解説
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

伝統的なヘブライ数字(aleph, beth, gimel, daleth, he …)

armenian

伝統的なアルメニア数字(ayb, ben, gim, da, ech …)

georgian

伝統的なグルジア数字(an, ban, gan, don, en …)

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; }

list-style-image(リストマーカーの画像)

プロパティの解説
<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"); }

list-style-position(リストマーカーの位置)

プロパティの解説
inside | outside | inherit
初期値outside
適用display:list-item の要素(li要素)
継承性あり
パーセント値受けつけない
メディアグループvisual

リスト項目の主要ブロックボックスに対するマーカーの位置を指定するプロパティです。

各値は以下のような意味を持ちます:

outside

マーカーボックスは主要ブロックボックスの外側に配置される。

inside

マーカーボックスは主要ブロックボックスの内側にある先頭インラインボックスに成り,それに続けて要素内容を流し込む。

CSS2.1仕様では,マーカーボックスの正確な位置は明確にされません。将来の仕様で明確にされます。

リストスタイルの適用には,ulもしくはol要素からli要素へ継承させるべきです。詳細は 'list-style' の節を参照。

使用例

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; }

marker-offset(マーカーと対応する主要ブロックとの間隔)

プロパティの解説
<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;
}