content

Home>CSS>プロパティリファレンス>content

contentプロパティの役割

contentプロパティは、HTMLソースの中に書き込まれていないコンテンツを書き出します。

contentプロパティを設定できるのは、after疑似要素及びbefore疑似要素のみです。これらの疑似要素は、「.class:after」のように、クラス名やセレクタ名の後にコロン（:）をはさんで使用します。

contentプロパティに設定できる値

文字列	文字列を出力する。
attr()	()に指定した属性の値を出力する。
close-quote	閉じ引用符を出力する。
counter()	自動連番を振る。
counters()	自動連番を振る。
no-close-quote	引用を閉じるが、閉じ引用符は出力しない。
no-open-quote	引用を開始するが、開き引用符は出力しない。
open-quote	開き引用符を出力する。
url('')	('')内に指定したURLを出力する。

文字列出力において、改行をする場合には、「\A」と書きます。

引用符を出力する場合、quotesプロパティで指定したものになります。

counter()とcounters()

<style type="text/css">
<!--
.count{
counter-increment:number;
}
.count:before{
content: "第" counter(number) "章：";
}
-->
</style>
<p class="count">章だてした文章</p>
<p class="count">countクラスが指定された要素は第～章と表示される</p>

counter()は、counter-incrementプロパティで指定した、カウント用の変数を指定します。counter-incrementプロパティを指定すると、そのプロパティを適用した要素が登場するたびに、数を増加させることができます。

counters()を使うと、入れ子構造で配置できるような要素において、連番を階層化できます。ol要素、li要素に適用するといいでしょう。

<style type="text/css">
<!--
ol{
counter-reset:number2;
list-style-type:none;
}
ol>li:before{
counter-increment:number2;
content: "第" counters(number2 , "-") "回：";
}
-->
</style>

<ol>
<li>カウントの動作検証1
<ol>
<li>動作検証1の下位のテキスト</li>
<li>動作検証1の下位のテキスト</li>
</ol>
</li>
<li>カウントの動作検証2
<ol>
<li>動作検証2の下位のテキスト</li>
<li>動作検証2の下位のテキスト</li>
</ol>
</li>
</ol>

contentプロパティの使い方

<style type="text/css">
.text:before{ content:"[テキストを表示] ";}

.url:after{ content:url('../../../data/img/global/sample.jpg')}

.quote1:before{ content: open-quote "引用符で囲う" close-quote; }

.quote2:before{ content: no-open-quote "見えない引用符：" no-close-quote;}

.attr:before{ content:"(" attr(title) ")";}
</style>
<div class="sample">
<p class="text">本文の前にテキストを表示。</p>
<p class="url">本文の後に画像を表示。</p>
<p class="quote1">本文の前に引用符で囲ったテキストを表示。</p>
<p class="quote2">本文の前に見えない引用符で囲ったテキストを表示。</p>
<p class="attr" title="サンプル">本文の前にtitle属性値を表示。</p>

count()とcounters()以外のサンプルを上に示しました。

関連リンク

• プロパティリファレンス：counter-increment
• プロパティリファレンス：counter-repeat
• プロパティリファレンス：quotes

よく読まれている記事

• 右クリックメニューの表示が遅い【Information】
• 画像の一部にリンクを貼る（クリッカブルマップ【Dreamweaver】
• 一定時間でローテーションする広告【JavaScript】
• Dreamweaver【Dreamweaver】
• クリックした画像を拡大・縮小する【JavaScript】

UpDate:2010-7-27

ニュース

更新情報