生成内容

Revised: Jun./26th/2004

内容の生成

レンダリング対象は、通常の場合は文書の内容から生成されます。これに対して、リストの番号など、文書の内容に存在しない対象をレンダリングすることがあります。

リストの場合は、'display: list-item' と指定された要素に関して、番号やマークをレンダリングします。

それ以外の場合は、擬似要素 :before か :after をセレクタとして、プロパティ 'content' によって、挿入する内容を指定できます。

1. content
2. quotes
3. カウンタ
   1. counter-increment
   2. counter-reset

content

プロパティ 'content' は、:before 擬似要素と :after 擬似要素に指定可能です。セレクタにマッチした対象に挿入する内容を指定します。

'content' は子要素に継承されません。デフォルトの値は空の文字列 (empty string) です。inherit は、親要素の値を明示的に継承する指定です。

<string>

• 任意の文字列で、この文字列が挿入されます。
• \A を記述するとそこで強制改行が起こります。XHTML では <br /> に一致します。

<uri>

• url(xxx), url("xxx")
• 音、画像など当該文書以外のリソースを挿入する場合は URI (URL + URN) を記述します。

<counter>

• counter(<name>), counter(<name>, <list-style-type>), counters(<name>, <string>), counters(<name>, <string>, <list-style-type>)

open-quote, close-quote

引用符を挿入します。

no-open-quote, no-close-quote

引用符を挿入しませんが、引用符の階層だけは変化します。

attr(X)

当該要素の属性名を X で指定し、その属性値を挿入します。

'content' の例

HTML 文書：

  <p>paragraph element</p>
  <p class="note">paragraph element with class="note"</p>

CSS の例：

p.note:before { content: "Note: ";
  color: red }

I.E.6.0での表示例	Mozilla 1.7での表示例

CSS の例：

p.note:before {
    content: attr(class) ": " ;
    color: note }

I.E.6.0での表示例	Mozilla 1.7での表示例

表示例

Firefox3, Opera9.5, Safari3.1は、class属性名を取得して挿入しますが、色の指定が当該要素全体に波及します。MS IE8はclass属性の値が取得できずに、nullが挿入されます。.note1:before { color: red } .note1 { color: black }とすれば、beforeに挿入された文字列だけ赤くなり、その他の部分は黒くなります。

quotes

プロパティ 'quotes' は、任意の要素に指定可能です。引用符のレンダリング方法を指定します。引用符を挿入するかどうかは、'content' で指定します。

'quotes' は子要素に継承されます。デフォルトの値はユーザエージェントに依存します。inherit は、親要素の値を明示的に継承する指定です。

[<string> <string>]+ では、階層別の引用符を指定できます。最も左の一組が、最も外側の引用符であり、最も右端の一組が、最も内側の引用符になります。

HTML の例：

<p>paragraph <q>quotation text</q> paragraph</p>

CSS の例：

q { quotes: "【" "】" }
q:before { content: open-quote }
q:after { content: close-quote }

I.E.6.0での表示例	Mozilla 1.7での表示例

表示例

Firefox3, Opera9.5はサポートしています。MS IE8, Safari3.1はサポートしていません。

カウンタ

カウンタは、'content' の値に指定される、 counter() と conters() で制御されます。次の例は、h1 要素に chapter という名前のカウンタを定義し、番号のスタイルは georgian に指定しています。

h1:before { content: counter(chapter, georgian) }

番号付けは、'counter-increment' と 'counter-reset' で制御します。

プロパティ 'counter-increment' と 'counter-reset' は、任意の要素に指定可能です。'content' で生成されたカウンタの番号の、増加、初期化を指定します。

'counter-increment' と 'counter-reset' は子要素に継承されません。デフォルトの値は none です。inherit は、親要素の値を明示的に継承する指定です。

W3C の仕様書（和）には、次の例が載っています。h1 要素と h2 要素に対して、"Chapter 1"，"1.1"，"1.2"，"Chapter 2"，"2.1"，"2.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;
}

I.E.6.0での表示例	Opera 7.23での表示例

名前が同じリストがネストされた、入れ子構造のリストの場合には、counters() によって、一括指定可能です。次の例は、ネストされた ol 要素に対して、1., 1.1., 1.2., 2., 2.2., 2.3., と番号付けするものです。

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }

I.E.6.0での表示例	Opera 7.23での表示例

表示例

Firefox3, Opera9.5, Safari3.1はサポートしています。MS IE8はサポートしていません。MS IE8では、counter-reset: itemが指定されたリストは、カウンタが0になってしまいます。