contentプロパティ

contentプロパティは、文書にコンテントを生成するために、:beforまたは:after偽要素と共に使われる。

書式

content : normal | none | [ string | uri | counter | open-quote | close-quote ]+ | inherit

contentプロパティの値には、次のうちいずれかを指定する。

none
偽要素は生成しない
normal
none(初期値)
string
文字列
uri
外部リソースのURIを url( uri ) の形式で指定する。
counter
カウンタ
open-quote
引用符(開き)
close-quote
引用符(閉じ)

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0 ×
Internet Explorer 8
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

<style>#samp1:before { content: "inserted content " }</style>
<p id="samp1">sample</p>

sample

<style>#samp2:after { content: " inserted content" }</style>
<p id="samp2">sample</p>

sample

<style>#samp3:before { content: open-quote }</style>
<style>#samp3:after { content: close-quote }</style>
<p id="samp3">sample</p>

sample

<style>#samp4:before { content: url(../img/marker.gif) }</style>
<p id="samp4">sample</p>

sample

<style>
body {
    counter-reset: chapter
}
h4:before {
    content: "Chapter " counter(chapter) " ";
    counter-increment: chapter;
}
h4 {
    counter-reset: section;
}
h5:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
</style>
<h4>Quotation marks</h4>
<h5>Specifying quotes with the 'quotes' property</h5>
<h5>Inserting quotes with the 'content' property</h5>
<h4>Automatic counters and numbering</h4>
<h5>Nested counters and scope </h5>

Quotation marks

Specifying quotes with the 'quotes' property
Inserting quotes with the 'content' property

Automatic counters and numbering

Nested counters and scope

quotes

スタイルシート属性 quotes は、引用符の引用記号(クオート記号)を指定する。

適用対象 すべての要素

構文

quotes : [open-quote close-quote]+ | none | inherit

quotesプロパティの値には、次のうちいずれかを指定する。

[ open-quote close-quote ]+
引用符に使用する文字列の組(引用開始と引用終了)を1組以上指定する。
none
引用符なし
inherit
継承する

たとえば、引用符を [ と ] にする場合は、次のように属性値を指定する。

quotes: '[' ']'

引用符のペアを複数指定することで、入れ子になった引用符(引用の中の引用)を指定することもできる。

quotes: '[' ']' '{' '}'

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0 ×
Internet Explorer 8
FireFox 3.0
Google Chrome 6.0 ×
Opera 9.62
Safari 5 ×

使用例と表示サンプル

日本語の場合、引用符は 「 と 」、入れ子の引用符は 『 と 』である。この設定例を次に示す。

<p style="quotes: '「' '」' '『' '』'">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

引用符を表示させない例を次に示す。

<p style="quotes: none">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

引用符の属性を継承する場合の例を次に示す。

<p style="inherit">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

counter-reset

counter-reset: [identifier integer ?]+|none|inherit
[ identifier integer ?]+
リセットするカウンターの識別子とリセット値を指定する。リセット値は省略可能で、省略したときは0になる。識別子とリセット値の組はひとつ以上であればいくつでも指定できる。
inherit
継承

counter-increment

 counter-increment: [identifier integer ?]+|none|inherit
[ identifier integer ?]+
値を増やすカウンターの識別子と増分値を指定する。増分値は省略可能で、省略したときは1になる。識別子と増分値の組はひとつ以上であればいくつでも指定できる。
inherit
継承