目次 < プロパティ一覧 戻る 使用例

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

contentプロパティ

contentプロパティは、要素の直前/直後に、文字列や画像などの内容を付加して表示します。


(value)
normal擬似要素を生成しませんが、カウンターの計算は行います。
none擬似要素を生成しません。
string付加する文字列を指定します。
url(URI)付加する画像等の外部リソースのURIを指定します。UAがそのリソースを使用できない場合は、無視されます。
counter
 (識別子,style)
付加する内容を自動連番とします。
  • 識別子は、カウンターに名前を付けます。省略不可で、他のカウンターと区別します。
  • styleは、list-style-typeプロパティと同じ値を指定します。カウンターに名前を付けます。省略可で、省略は、decimal (10進数)になります。
  • カウンター値は、counter-increment プロパティで”+1”され、counter-reset プロパティで"0"にリセットされます。
attr(属性名)例えば、属性名をtitleと指定した場合、title属性の値が付加される内容になります。
open-quote引用開始を示す quotes プロパティで指定されている引用符が付加される内容になります。
close-quote引用終了を示す quotes プロパティで指定されている引用符が付加される内容になります。
no-open-quote何も表示しませんが、引用開始とみなして、引用の入れ子レベルがひとつ深くなります。
no-close-quote何も表示しませんが、引用終了とみなして、引用の入れ子レベルがひとつ浅くなります。
inherit親要素からの継承
適用要素 before/after擬似要素で修飾される要素
初期値normal
継承無し

quotesプロパティ

quotes プロパティは、contentプロパティの open-quote/close-quote で使用する引用符の指定をします。


(value)
'p-1' 'p-2'p-1で開始引用符、p-2で終了引用符をペアで指定します。半角空白で区切り、複数ペアを指定することで、複数階層の引用符を指定することもできます。
none引用符を表示しません。
inherit親要素からの継承
適用要素BODY要素とBODY要素の内容の全ての要素
初期値UA依存
継承します。

counter-resetプロパティ

counter-reset プロパティは、カウンター値を "0" にリセットします。


(value)
識別子識別子で示されたカウンター値を”0”にリセットします。半角の空白に続き複数の識別子を指定することもできます。
noneカウンターに対して、何も行いません。
inherit親要素からの継承
適用要素BODY要素とBODY要素の内容の全ての要素
初期値none
継承します。

counter-incrementプロパティ

counter-increment プロパティは、カウンター値を " +1 " します。


(value)
識別子識別子で示されたカウンター値を " +1 " します。半角の空白に続き複数の識別子を指定することもできます。
noneカウンターに対して、何も行いません。
inherit親要素からの継承
適用要素BODY要素とBODY要素の内容の全ての要素
初期値none
継承します。

使用例

XXXX はスタイルシート記述です。

XXXX はHTML記述です。

XXXX 背景色と内枠線は要素の範囲です。

XXXX 背景色と外枠線は親要素です。

string 指定

スタイルシート記述
.bc1:before{content:"おっちゃん";}
.ac1:after{content:"おっちゃん";}
HTML記述
<p class="bc1">ABCD</p>
<p class="ac1">ABCD</p>
表示例

ABCD

ABCD

IE6表示例
IE - 6 での表示例

IE8表示例
IE - 8 での表示例

url 指定

スタイルシート記述
.bu1:before{content:url("smp/bn.png");}
.au1:after{content:url("smp/bn.png");}
HTML記述
<p class="bu1">ABCD</p>
<p class="au1">ABCD</p>
表示例

ABCD

ABCD

IE6表示例
IE - 6 での表示例

IE6での表示例
IE - 8 での表示例

counter 指定

スタイルシート記述
.bcc:before{counter-increment:cc;
content:counter(cc);}
.acc:after{counter-increment:cc;
content:counter(cc);}
.rcc:before{counter-reset:cc;
content:counter(cc);}
HTML記述
<p class="bcc">ABCD</p>
<p class="acc">ABCD</p>
<p class="bcc">ABCD</p>
<p class="acc">ABCD</p>
<p class="rcc">ABCD</p>
<p class="acc">ABCD</p>
表示例

ABCD

ABCD

ABCD

ABCD

ABCD

ABCD

IE8での表示例
IE - 8 での表示

Operaでの表示例
Operaでの表示

attr 指定

スタイルシート記述
.bcb:before{content:attr(title);}
.acb:after{content:attr(title);}
HTML記述
<p class="bcb" title="前">ABCD</p>
<p class="acb" title="後">ABCD</p>
表示例

ABCD

ABCD

IE6表示例
IE - 6 での表示例

IE8での表示例
IE - 8 での表示例

open-quote/close-quote 指定

スタイルシート記述
.qt{quotes:"『" "』" "(" ")";}
.bcq:before{content:open-quote;}
.acq:after{content:close-quote;}
HTML記述
<p>昔の人は<br />
<span class="qt bcq acq"> 温故知新 <span class="qt bcq acq">ふるきを温め新しきを知る</span> </span><br />
と言いました。</p>
表示例

昔の人は
温故知新 ふるきを温め新しきを知る
と言いました。

IE6での表示例
IE - 6 での表示例

IE8での表示例
IE - 8 での表示例

no-open-quote/no-close-quote 指定

このサイトのスタイルシート記述です。

スタイルシート記述
q{background-color:#ffc;}
q:before{content:no-open-quote;}
q:after{content:no-close-quote;}

と指定してQ要素を修飾し、ブラウザによる引用符の表示の違いを回避して、背景色により引用部を明確にしてています。

目次 < プロパティ一覧 戻る Top

Created:Jun 01, 2005 Updated:Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新