目次
文書作成者は木構造に由来しない内容を出力したくなることもあると思う。 リストの番号振りがよい例で、振る番号などいちいち明示せずともUAに自動生成して欲しいだろう。 図のタイトルの先頭に「図」という文字を挿入したり、七番目の章題の前に「第七章」という文字列を挿入する場合なども同じことである。 特に音声出力や点字出力のUAはこういった文字列挿入ができるようにすべきである。
CSS2にはこういった内容生成の方法がいくつか用意されている:
この章では、これらのうち'content'プロパティに関する仕組みについて述べる。
これらの疑似要素を使って、生成内容のスタイルと挿入位置を指定する。 その名称が示す通り、木構造の中にある要素の直前又は直後に内容を挿入する。 これらの疑似要素と'content'プロパティを組み合わせることによって挿入する内容を指定する。
たとえば次の規則は、class属性値が「note」となっているすべてのP要素の直前に「Note: 」という文字列を挿入する:
P.note:before { content: "Note: " }
要素に生成されるオブジェクト（たとえばボックス）を整形する際は、生成内容もその一部とみなす。 したがって、たとえば上のスタイルシートを次の様に変更すると:
P.note:before { content: "Note: " }
P.note { border: solid green }
緑の実線ボーダーは、先頭の挿入文字列も含んだ段落全体の周囲に表示される。
':before'及び':after'疑似要素は、自身が取り付けられた要素から継承可能なすべてのプロパティ値を継承する。
たとえば、次の規則はすべてのQ要素の直前に開始引用符を挿入する。 この時、引用符の色は赤になるのだが、フォントに関するその以外の特徴はQ要素から継承する:
Q:before {
content: open-quote;
color: red
}
':before'及び':after'疑似要素の宣言において、継承を行わないプロパティは初期値を取る。
たとえば、'display'の初期値は'inline'なので、前の例に出てきた引用符はインラインボックスとして挿入される（すなわち要素の先頭にあるテキストと同じ行に挿入される）。 次の例では、'display'の値を'block'と明示しているので、挿入するテキストはブロックになる:
BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
この時、音声出力のUAなら、BODYの残りの内容をすべて出力した後に「The End」を読み上げる。
':before'及び':after'疑似要素について、UAは'position'、'float'、リストのプロパティ、そして表に関するプロパティを無視しなければならない。
':before'及び':after'疑似要素の'display'プロパティには以下の値が使用可能である:
注。 将来は上記以外の値が認められるようになるかもしれない。
このプロパティは、':before'及び':after'疑似要素を伴って文書中に内容を生成するのに使う。 各値は以下の様な意味を持つ:
注。 CSS2には、埋め込みオブジェクトのサイズを変更したり、HTMLで画像に付けるalt属性やlongdesc属性の様に代替テキストを記述する仕組みが存在しない。 将来この状況は改善されるかもしれない。
注。 CSS2では、セレクタの主体とならない要素の持つ属性値は参照できない。
生成内容をブロック、インライン、マーカーのうちどのボックス内に置くかを'display'プロパティで指定する。
生成内容が特定の媒体に依存する場合、文書作成者は@media規則内に'content'を宣言すべきである。 たとえば、リテラルテキストは全媒体グループに汎用だが、画像は視覚系且つビットマップの媒体グループ、音声はそれ専用の媒体グループでのみ利用可能である。
次の規則は引用部の後で音声ファイルを再生させる（詳細は[19 音声スタイルシート]を参照のこと）:
@media aural {
BLOCKQUOTE:after { content: url("beautiful-music.wav") }
}
また、次の規則は画像の直前にalt属性の値を挿入する。 画像が表示されない場合、ユーザは代替テキストだけを目にすることになる。
IMG:before { content: attr(alt) }
生成内容内にエスケープ文字"\A"を記述すると、文字列型に改行を含めることができる。 すなわち、HTMLにおけるBR要素と同様に強制改行（forced line break）を挿入するのである。 エスケープ文字"\A"についての詳細は[4.3.10 文字列]と[4.1.3 文字列と活字ケース]を参照のこと。
H1:before {
display: block;
text-align: center;
content: "chapter\A hoofdstuk\A chapitre"
}
生成内容が木構造を変更することはない。 特に、たとえば文書の再解析を行う目的で、生成内容が構造化言語のプロセッサにフィードバックされることはない。
注。 将来は'content'プロパティが上に挙げた以外の値も取れるようになり、生成内容の一部に異なるスタイルを付与できるだろう。 しかし、CSS2の段階では、':before'あるいは':after'疑似要素に含まれる内容はすべて同じスタイルとなる。
以下の様な場合が考えられる:
以下は:after疑似要素を伴うランイン要素の例である。 更に、後ろに続くP要素は:before疑似要素を伴っている。 この例では、疑似要素がすべてインラインであるとする:
H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }
このスタイルシートを次のソースに適用すると:
<H3>Centaurs</H3> <P>have hoofs <P>have a tail
下の様に整形される:
Centaurs: ... have hoofs ... have a tail
CSS2では、前後関係に応じてUAが採用すべき引用符の種類を指定できる。 'quotes'プロパティは、引用の入れ子レベルごとに、それぞれ一組の引用符を指定する。 そして、'content'プロパティでそれら指定した引用符を参照し、引用箇所の前後に挿入する。
このプロパティは、幾重に入れ子にされた引用に対しても引用符を指定できる。 各値は以下の様な意味を持つ:
たとえば次のスタイルシートを:
/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }
/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after { content: close-quote }
以下のHTML断片に適用すると:
<HTML lang="en">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Quote me!</Q>
</BODY>
</HTML>
UAはこの様に引用符を生成することになる:
"Quote me!"
一方次の様なHTML断片なら:
<HTML lang="no">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
</BODY>
</HTML>
こうなる:
«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»
注。 前の例で'quotes'に指定した引用符は、便利な事にコンピュータのキーボード上に入力キーを割り当てられている。 しかし、高質な植字を行うには[ISO10646]にある他の文字も必要になるだろう。 以下の表に[ISO10646]に存在する引用符のうち幾つかを列挙しておく:
| 表示 | ISO 10646コード （16進数） | 説明 |
|---|---|---|
| " | 0022 | QUOTATION MARK [the ASCII double quotation mark] |
| ' | 0027 | APOSTROPHE [the ASCII single quotation mark] |
| < | 2039 | SINGLE LEFT-POINTING ANGLE QUOTATION MARK |
| > | 203A | SINGLE RIGHT-POINTING ANGLE QUOTATION MARK |
| « | 00AB | LEFT-POINTING DOUBLE ANGLE QUOTATION MARK |
| » | 00BB | RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK |
| ` | 2018 | LEFT SINGLE QUOTATION MARK [single high-6] |
| ' | 2019 | RIGHT SINGLE QUOTATION MARK [single high-9] |
| `` | 201C | LEFT DOUBLE QUOTATION MARK [double high-6] |
| '' | 201D | RIGHT DOUBLE QUOTATION MARK [double high-9] |
| ,, | 201E | DOUBLE LOW-9 QUOTATION MARK [double low-9] |
引用符は'content'プロパティの'open-quote'や'close-quote'などの値によって適切な位置に挿入される。 すなわち、'open-quote'や'close-quote'が出現する度に、それらは引用レベルに応じて、'quotes'の値に含まれる文字列型のうち1つと置き換わるのである。
2つ1組の引用符に対して、'open-quote'は1つ目の引用符を、'close-quote'は2つ目の引用符を参照する。 どの引用符の組み合わせを用いるかは、引用の入れ子レベルによって決まる。 ある時点での引用レベルとは、そこまでの'open-quote'の出現回数から'close-quote'の出現回数を差し引いた値である。 引用レベルが0の時は一番最初の組み合わせが、引用レベルが1の時は2番目の組み合わせが用いられ、以下同様になる。 引用レベルが引用符の組み合わせの数より多い場合、最後に指定された組み合わせが繰り返し用いられる。
引用レベルは、ソース文書あるいは整形構造における入れ子レベルとは独立であることに注意せよ。
ある種の印刷スタイルでは、引用が複数の段落にまたがる時に、開始引用符は全段落の先頭に挿入するが、終了引用符は最後の段落にのみ挿入することがある。 CSSでは、見えない終了引用符を挿入することによってこれを実現できる。 キーワード'no-close-quote'は、引用レベルを1段階浅くするが引用符は挿入しないのである。
次のスタイルシートはBLOCKQUOTE内の全段落の先頭に開始引用符を、最終段落の末尾に1つだけ終了引用符を挿入する:
BLOCKQUOTE P:before { content: open-quote }
BLOCKQUOTE P:after { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }
ある要素の最後の子供要素にマッチするセレクタが存在しないので、最終段落を表すのに.lastというクラスセレクタを使っている。
同様に'no-open-quote'というキーワードは、引用レベルを1段階深くするが引用符は挿入しない。
注。 引用文の言語が周りのテキストと異なる場合、引用文の言語で使われる引用符ではなく、周りにあるテキストの言語で使われる引用符を用いるのが通例である。
たとえば英語の文中にフランス語が出てくる場合:
The device of the order of the garter is “Honi soit qui mal y pense.”
フランス語の文中に英語が出てくる場合:
Il disait: «Il faut mettre l'action en ‹fast forward›.»
次のスタイルシートは、すべての要素に対して'open-quote'と'close-quote'が正しく対応する様に設定している。 この規則は英語、フランス語、あるいはその両方を含む文書を対象にしている。 別の言語に対応するには、規則を更に追加する必要がある。 子供セレクタの結合子を用いることによって、問題の要素の周囲に書かれた言語に基づいた引用符を設定している:
[LANG|=fr] > * { quotes: "«" "»" "\2039" "\203A" }
[LANG|=en] > * { quotes: "\201C" "\201D" "\2018" "\2019" }
ここで、英語に用いられる引用符は、多くの人が入力できるよう文字参照として提示した。 もしこれらの引用符を直接入力できるのであれば、次の様に記述することになる:
[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }
CSS2の自動番号振りは、'counter-increment'及び'counter-reset'という2つのプロパティによって制御する。 これらのプロパティで定義したカウンタからは、'content'プロパティのcounter()及びcounters()関数を通して値を取り出す。
| Value: | [ <identifier> <integer>? ]+ | none | inherit |
|---|---|
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
| Value: | [ <identifier> <integer>? ]+ | none | inherit |
|---|---|
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
'counter-increment'の値は、1つ以上のカウンタの名称（識別子）と、各カウンタ名に続く整数値（オプション）である。 整数値は、数える要素が出現した時のカウンタの増加値を示す。 デフォルトの増加値は1で、ゼロあるいは負の整数値も指定できる。
'counter-reset'の値も、1つ以上のカウンタの名称と、各カウンタ名に続く整数値（オプション）である。 整数値は、初期化要素が出現した時のカウンタの初期化値を示す。 デフォルトの初期化値は0である。
'counter-increment'で参照したカウンタが、どの'counter-reset'の作用範囲にも入っていない場合、そのカウンタはルート要素で0に初期化されているものとみなす。
下の例は、章や節などに「Chapter 1」「1.1」「1.2」といった番号を振る方法を示している:
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
ある要素が、カウンタの増加・初期化と同時にそのカウンタを（':before'あるいは':after'疑似要素の'content'プロパティに）使用する場合、カウンタの増加・初期化を行った後にその結果を取り出すこと。
ある要素がカウンタの増加と初期化が同時に行う場合、先に初期化を行い、その後で増加を行う。
'counter-reset'プロパティはカスケード処理の規則に従う。 したがって次のスタイルシートだと:
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
'imagenum'カウンタの初期化のみを行うことになってしまう。 両者を初期化するにはまとめて指定する必要がある:
H1 { counter-reset: section -1 imagenum 99 }
子供要素で同じカウンタを再使用すると自動的に新規のカウンタ・インスタンスが作り出されるという意味において、カウンタは自分自身を入れ子にすることが可能である。 このことは、HTMLで使うリストの様に、要素が自身を任意の深さに入れ子できる場合には重要である。 何故なら、各入れ子レベルについて一意な名称のカウンタを定義するのは恐らく不可能だからである。
したがって、次の様な指定でもって入れ子構造のリストに番号を振ることができる。 この指定の効果は、LI要素に'display:list-item'及び'list-style: inside'を指定した場合と非常に似たものとなる:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
カウンタXに対して'counter-reset'で初期化を行うすべての要素は、新規にカウンタXを創り出す。 そして、その新規に作り出されたカウンタの作用範囲（scope）は、その要素自身と兄要素、そしてそれらの子孫にあたるすべての要素である。 【訳注:この文章絶対おかしい。】
上の例ではOL要素がカウンタを作り出し、すべての子供要素がそのカウンタを参照する。
今item[n]という表記によってitemカウンタN番目のインスタンスを、中括弧によってカウンタの作用範囲の先頭と末尾を表すとすれば、以下のHTMLはコメントに記した通りにカウンタを使うことになる。 （上の例で示したスタイルシートを用いるとする）
<OL> <!-- (set item[0] to 0 -->
<LI>item <!-- increment item[0] (= 1) -->
<LI>item <!-- increment item[0] (= 2) -->
<OL> <!-- (set item[1] to 0 -->
<LI>item <!-- increment item[1] (= 1) -->
<LI>item <!-- increment item[1] (= 2) -->
<LI>item <!-- increment item[1] (= 3) -->
<OL> <!-- (set item[2] to 0 -->
<LI>item <!-- increment item[2] (= 1) -->
</OL> <!-- ) -->
<OL> <!-- (set item[3] to 0 -->
<LI> <!-- increment item[3] (= 1) -->
</OL> <!-- ) -->
<LI>item <!-- increment item[1] (= 4) -->
</OL> <!-- ) -->
<LI>item <!-- increment item[0] (= 3) -->
<LI>item <!-- increment item[0] (= 4) -->
</OL> <!-- ) -->
<OL> <!-- (reset item[4] to 0 -->
<LI>item <!-- increment item[4] (= 1) -->
<LI>item <!-- increment item[4] (= 2) -->
</OL> <!-- ) -->
関数'counters()'は、同じ名称のすべてのカウンタを、与えられた文字列で区切った文字列を返す。
以下のスタイルシートは入れ子構造のリストに「1」「1.1」「1.1.1」という番号を振るものである。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
デフォルトではカウンタは10進数で整形されるが、'list-style-type'にあるすべての形式はカウンタにも適用可能である。
counter(name)
これがデフォルトである。 カウンタの形式を変えるには:
counter(name, 'list-style-type')
'disc'、'circle'、'square'、'none'なども含めてすべての形式が適用可能である。
H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
表示されない（'display'が'none'に設定されている）要素では、カウンタの増加や初期化を行うことができない。
たとえば次のスタイルシートだと、class属性値が「secret」であるH2要素で'count2'の数値は増加しない:
H2.secret {counter-increment: count2; display: none}
一方、'visibility'が'hidden'に設定された要素では、カウンタの増加／初期化を行える。
ブロック要素の多くは、主要ブロックボックスを1つだけ生成する。 この章では、1つの要素が2つのボックスを生成する場合の、2通りの仕組みについて述べる。 2つのボックスとは、当該要素の内容を含む主要ブロックボックスと、黒丸・画像・番号などの装飾を含むマーカーのボックスである。 マーカーのボックスは主要ボックスの内部にも外部にも配置できる。 ':before'や':after'の生成内容とは異なり、マーカーのボックスは配置体系に関わらず主要ボックスの位置に影響しない。
これらの仕組みの一般的な原理はCSS2で初めて定められ、マーカー（marker）と呼ばれている。 仕組みの一部はCSS1にもリストのプロパティとして含まれており、不連続な項目をも共通のリストとして扱うことができる。 しかしマーカーのプロパティだと、更にマーカーの内容や位置を厳密に制御できるのである。 マーカーとカウンタを組み合わせると、新しいリストの形式を作り出したり、欄外の注釈を数え上げたり、その他にも様々なことができる。
次の例は、各リスト項目の番号にピリオドを付け加える方法を示している。 以下のHTMLとスタイルシートは:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Creating a list with markers</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
次の様に整形すべきである:
i. This is the first item. ii. This is the second item. iii. This is the third item.
子孫セレクタや子供セレクタを併用すると、項目の深さに応じてマーカーの種類を使い分けることもできる。
マーカーは、:beforeあるいは:after疑似要素の'display'プロパティを'marker'に設定すると生成される。 ブロックやインラインの生成内容が主要ボックスの一部であるのに対して、マーカーは主要ボックスの外側に独立して整形される。 マーカーボックスは単一の行として（つまりラインボックスとして）整形されるので、浮動体ほど柔軟性に富まない。 マーカーボックスは、疑似要素の'content'プロパティが実際に内容を生成する場合にのみ創り出される。
マーカーボックスには、パディングやボーダーは存在するがマージンは存在しない。
:before疑似要素内にあるマーカーボックスのベースラインは、主要ボックスの1行目のベースラインに揃える。 主要ボックスがテキストを含まない場合、マーカーボックスと主要ボックスの外上辺を揃える。 逆に、:after疑似要素内にあるマーカーボックスのベースラインは、主要ボックスの最終行のベースラインに揃える。 主要ボックスがテキストを含まない場合、マーカーボックスと主要ボックスの外下辺を揃える。
マーカーボックスの高さは'line-height'の値で決まる。 :before及び:after疑似要素内にあるマーカーボックスは、それぞれ主要ボックスの第1行と最終行の高さの計算に従う。 つまり、たとえマーカーボックスが別のラインボックス内にある場合でも、マーカーはあくまで疑似要素が取り付けられた要素の第1行あるいは最終行に揃えるのである。 主要ボックスに第1行あるいは最終行が無い場合、マーカーボックスは独自にラインボックスを設定する。
ラインボックス内におけるマーカーボックスの垂直方向の位置は、'vertical-align'プロパティで指定する。
'width'の値が'auto'ならば、マーカーボックスの内容領域の幅は実際の内容量に合わせて決まる。 'width'の値がそれ以外なら、その値がそのまま内容領域の幅になる。 'width'の値が実際の内容量に比べて小さければ、はみ出す内容の扱いは'overflow'プロパティで決まる。 マーカーボックスが主要ボックスと重なることもある。 'width'の値が実際の内容量に比べて大きければ、マーカーボックス内における内容の水平方向の配置は'text-align'プロパティで決まる。
'marker-offset'プロパティは、主要ボックスからマーカーボックスまでの水平距離を指定する。 測る距離は、一番近いボーダー辺同士の距離である。
注。 左から右の整形コンテキストで、マーカーが浮動体の直後に流し込まれる場合、そのマーカーの主要ボックスは浮動体の右側に流し込まれるわけだが、マーカー自体は浮動体の左側へ出現することになる。 何故なら、主要ボックスのボーダー左辺は浮動体の左側に位置し（[9.5 浮動体]の解説を参照）、更にマーカーボックスは主要ボックスのボーダー辺より外側に位置するからである。 右から左の整形コンテキストで、マーカーが浮動体の次に流し込まれる場合にも同様のことが言える。
'display: list-item'である要素の生成内容が'display'プロパティに'marker'という値を取る時、:before疑似要素に生成されるマーカーボックスは、通常のリストマーカーに置き換わる。
次例では、マーカーの内容が固定幅のボックス内でセンタリングされる:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Content alignment in the marker box</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
この文書は次の様に整形すべきである:
(1) This is the
first item.
(2) This is the
second item.
(3) This is the
third item.
次の例では、リスト項目の前後にマーカーを生成する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Markers before and after list items</TITLE>
<STYLE type="text/css">
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
LI:after {
display: marker;
content: url("sad.gif");
}
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
この文書は次の様に整形すべきである（ここではGIF画像の代わりにアスキーアートを用いる）:
:-) first list item
comes first :-(
:-) second list item
comes second :-(
次の例では、マーカーを用いて注釈の段落に番号を振っている。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Markers to create numbered notes4>/TITLE>
<STYLE type="text/css">
P { margin-left: 12 em; }
@media screen, print {
P.Note:before {
display: marker;
content: url("note.gif")
"Note " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
</STYLE>
</HEAD>
<BODY>
<P>This is the first paragraph in this document.</P>
<P CLASS="Note">This is a very short document.</P>
<P>This is the end.</P>
</BODY>
</HTML>
この文書は次の様に整形すべきである:
This is the first paragraph
in this document.
Note 1: This is a very short
document.
This is the end.
| Value: | <length> | auto | inherit |
|---|---|
| Initial: | auto |
| Applies to: | elements with 'display: marker' |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
このプロパティは、マーカーボックスと対応する主要ボックスの、最も近いボーダー辺同士の距離を指定する。 距離はユーザが指定するか（<length>）、UAに任せるか（'auto'）のいずれかになる。 長さは負の値でもよいが、実装上は値に特定の制限範囲が生じることもある。
次の例は、リスト項目の各番号にピリオドを付け加える方法を示している:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Marker example 5</TITLE>
<STYLE type="text/css">
P { margin-left: 8em } /* Make space for counters */
LI:before {
display: marker;
marker-offset: 3em;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<P> This is a long preceding paragraph ...
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
<P> This is a long following paragraph ...
</BODY>
</HTML>
このHTML文書とスタイルシートは次の様に整形すべきである:
This is a long preceding
paragraph ...
i. This is the first item.
ii. This is the second item.
iii. This is the third item.
This is a long following
paragraph ...
リストのプロパティ（list properties）を用いると、リストの基本的な整形を実現できる。 一般的形式のマーカーを用いる場合と同様、'display: list-item'である要素は、内容とマーカーボックスが参照するための主要ボックスを生成する。 その他のリストのプロパティを用いると、マーカーの種類（画像、グリフ、数字など）や主要ボックスに対する位置（主要ボックスの外側か内側か）を指定できる。 しかし、マーカーのより複雑な体裁制御や、主要ボックスに対する厳密な位置調整などは行えない。
更に、'display: marker'によって生成したマーカーを、リストのプロパティで生成したリスト項目に用いると、そのマーカーは通常のリストマーカーに置き換えられる。
リストのプロパティと背景のプロパティを併用すると、その背景は主要ボックスにのみ適用され、マーカーボックスは透明になってしまう。 マーカーボックスの体裁を厳密に制御するには、一般的形式のマーカーを用いればよい。
| Value: | 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 |
|---|---|
| Initial: | disc |
| Applies to: | elements with 'display: list-item' |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティは、リストマーカーの種類を指定する。 ただし、'list-style-image'の値が'none'であるか、指定先URIの画像が表示できない場合にのみ有効である。 'none'という値はマーカーを指定しないが、それ以外の値は3種類に大別できる。 グリフの表示、番号振り、そしてアルファベットである。
注。 番号付きリストでナビゲートを容易にすれば、文書のアクセシビリティを向上させることができる。
グリフには'disc'、'circle'、そして'square'がある。 各グリフの正確なレンダリングは特に定めず、UA依存である。
番号の種類には次のものがある:
指定された数字の種類を認識できない場合、UAは'decimal'を用いるべきである。
注。 この文書では、番号の各種類についての厳密な仕組みは定めない。 将来W3Cのメモで更なる明確化を図る。
アルファベットの種類には次のものがある:
当仕様では、アルファベットの終わりをどう扱うかは定めない。 たとえば、26項目のリストを処理した後、'lower-latin'をどうレンダリングするかは不定である。 したがって、リストが長くなる時は番号を使うことを推奨する。
次のHTML文書を見てみよう:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Lowercase latin numbering</TITLE>
<STYLE type="text/css">
OL { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
これは以下の様に整形すべきである:
i This is the first item. ii This is the second item. iii This is the third item.
リストマーカーがUA依存で（ここでは）右揃えになっていることに注意せよ。
注。 将来のCSSでは世界のより多くの数字体系に対応するだろう。
| Value: | <uri> | none | inherit |
|---|---|
| Initial: | none |
| Applies to: | elements with 'display: list-item' |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティは、リストマーカーとして用いる画像を設定する。 指定先の画像が使える状態ならば、'list-style-type'で指定したマーカーと置き換える。
次の例では、各リスト項目の先頭にマーカーとして「ellipse.png」という画像を設定している。
UL { list-style-image: url("http://png.com/ellipse.png") }
| Value: | inside | outside | inherit |
|---|---|
| Initial: | outside |
| Applies to: | elements with 'display: list-item' |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
このプロパティは、主要ブロックボックスに対するマーカーボックスの位置を指定する。 各値は以下の様な意味を持つ:
注。 CSS1ではマーカーボックスの正確な位置を指定できないので、下位互換性を考慮して、CSS2でも曖昧なままにしておく。 マーカーボックスの位置を厳密に制御したい場合は、一般的形式のマーカーを用いよ。
例を挙げよう:
<HTML>
<HEAD>
<TITLE>Comparison of inside/outside position</TITLE>
<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class="compact">
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
この文書は次の様に整形するとよい:
書字方向が右から左なら、マーカーはボックスの右側にくるだろう。
| Value: | [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit |
|---|---|
| Initial: | not defined for shorthand properties |
| Applies to: | elements with 'display: list-item' |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
'list-style'は簡略化プロパティで、'list-style-type'、'list-style-image'、'list-style-position'という3つのプロパティを1箇所で設定できる。
UL { list-style: upper-roman inside } /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */
'list-style'をリスト項目の要素（HTMLにおけるLI）に直接設定することもできるが、念のために配慮するならばそうしない方が無難である。 次の2例は似通っているが、最初の規則は子孫セレクタを、2番目の規則は（より限定的な）子供セレクタを使っている。
OL.alpha LI { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */
子孫セレクタのみを使うと意図した結果を得られないことがある。 次の文書で考えてみよう:
<HTML>
<HEAD>
<TITLE>WARNING: Unexpected results due to cascade</TITLE>
<STYLE type="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
</HTML>
この例では、「level1」のリスト項目に'lower-alpha'のマーカーを、「level2」のリスト項目に'disc'のマーカーを意図している。 しかし、最初の規則はクラスセレクタを含んでいるので、カスケード処理の順序に従うと2つ目の規則が上書きされてしまう。 それに対して、次に示す規則のように子供セレクタを使えば問題は解決する:
OL.alpha > LI { list-style: lower-alpha }
UL LI { list-style: disc }
もう1つの解決法は、'list-style'をリスト種類の要素にのみ設定する方法である:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
'list-style'の値はOL要素からLI要素へと継承されることになる。 リスト形式を指定するのにはこの方法を用いるよう推奨する。
URIの値は他の値と組み合わせることができる:
UL { list-style: url("http://png.com/ellipse.png") disc }
この例では、指定先の画像が手に入らない場合に'disc'を用いる。
'list-style'を'none'に設定すると、'list-style-type'と'list-style-image'が両方とも'none'に設定される:
UL { list-style: none }
この結果マーカーは表示されない。