content

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

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

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>

章だてした文章

countクラスが指定された要素は第~章と表示される

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>

  1. カウントの動作検証1
    1. 動作検証1の下位のテキスト
    2. 動作検証1の下位のテキスト
  2. カウントの動作検証2
    1. 動作検証2の下位のテキスト
    2. 動作検証2の下位のテキスト

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>

本文の前にテキストを表示。

本文の後に画像を表示。

本文の前に引用符で囲ったテキストを表示。

本文の前に見えない引用符で囲ったテキストを表示。

本文の前にtitle属性値を表示。

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

関連リンク

よく読まれている記事

UpDate:2010-7-27