contentプロパティ。

CSSに於けるスタイルシート生成内容・contentプロパティに関する解説です。

contentプロパティとは。

contentプロパティは、スタイルシートで生成する内容です。

CSSの仕様では、マークアップ文書に記述されていない文字列などを、スタイルシートによるコンテンツとして出力する機能があります。

この場合、セレクタとして:before擬似要素または:after擬似要素を指定します。

これにより、当該要素の前か後ろに適切なコンテンツを付け足す事が可能になります。

contentプロパティの扱い。

読み飛ばす

contentプロパティの書式。

contentプロパティの書式は、以下のようになります。

content: 値

値としては、以下のものが取れます。

読み飛ばす

inherit: 一番近い上位要素で指定された値を継承します。
出力内容: 出力内容は多岐に亘るので、後述します。

contentプロパティでとれる出力内容。

contentプロパティの値としてinherit以外を取る場合は、以下の出力内容を空白文字で区切って出力したい順に記述します。

読み飛ばす

文字列

出力させたい文字列です。

改行を出力させる場合は、改行文字として「\A」と書きます。

url(URI)

画像などURIで指定されるリソースを出力したい場合は、URIを指定します。

URIは引用符で囲んで下さい。

尚、対応出来ないリソースを指定されている場合は、これを無視するものとします。

また、当該リソースを利用出来ない場合の代替コンテンツを指定する方法(HTMLで言えば、<img>要素のalt属性など)は用意されておりません。

counter()函数

カウンタの値を出力する場合に利用します。

具体的には以下のいずれかの書式を取ります。

counter(カウンタ名)

カウンタ名で示されるカウンタの値を数字で出力します。

counter(カウンタ名, タイプ)

カウンタ名で示されるカウンタの値を指定のタイプで出力します。

タイプとしては、list-style-typeプロパティの値をそのまま利用します。

例えば、大文字ローマ数字で出力したい場合はupper-romanとします。

プロパティ定義にcounter-incrementプロパティが含まれる場合は、counter-incrementプロパティで指定された加算処理を行った結果が出力されます。

counterrs()函数

カウンタの値を出力する場合に利用します。

counte()函数と違う点は、カウンタを用いている要素が入れ子になっている場合に、同じカウンタ名のカウンタの値を外側から順番に並べていく事です。

詳しくはカウンタについての入れ子される要素でのカウンタについてをご覧下さい。

具体的には以下のいずれかの書式を取ります。

counters(カウンタ名, 文字列)

カウンタ名で示されるカウンタの値を数字で、文字列で区切って出力します。

タイプとしては、list-style-typeプロパティの値をそのまま利用します。

例えば、大文字ローマ数字で出力したい場合はupper-romanとします。

counters(カウンタ名, 文字列, タイプ)

カウンタ名で示されるカウンタの値を指定のタイプで、文字列で区切って出力します。

タイプとしては、list-style-typeプロパティの値をそのまま利用します。

例えば、大文字ローマ数字で出力したい場合はupper-romanとします。

プロパティ定義にcounter-incrementプロパティが含まれる場合は、現在のカウンタはcounter-incrementプロパティで指定された加算処理を行った結果が出力されます。

open-quote

開き引用符を出力します。引用符はquoteプロパティで指定されたものとなります。

close-quote

閉じ引用符を出力します。引用符はquoteプロパティで指定されたものとなります。

no-open-quote

開き引用符を出力しないものの、引用の入れ子が一段増えます。

no-close-quote

閉じ引用符を出力しないものの、引用の入れ子が一段減ります。

attr(属性名)函数

指定の属性の値を出力します。

尚、contentプロパティのデフォルト値は空文字列となります。

contentプロパティの記述例。

読み飛ばす

いろいろな使い方があるので、四例出します。

<ol>要素での記述例。

例えば、HTMLの <ol>要素直下の<li>要素において、マーカとして「その○： 」(○は和数字)と出力させたい場合は、

ol {
    counter-reset: olcount 0;
    }

ol>li {
    list-style-type: none;
    }

ol>li:before {
    content: "その" counter(olcount, cjk-ideographic) "： ";
    counter-increment: olcount 1;
    }

と記述します。

<blockquote>要素での記述例。

例えば、HTMLの <blockquote>要素開始直後に「以下引用」、終了直前に「引用ここまで」と出力したい場合は、

blockquote:before {
    display: block;
    content: "以下引用";
    }

blockquote:after {
    display: block;
    text-align: right;
    content: "引用ここまで";
    }

と記述します。

<q>要素での記述例。

例えば、HTMLの <q>要素において、引用符を"「」"、"『』"の順に使いたい場合は、

q {
    quotes: '「' '」' '『' '』';
    }

q:before {
    content: open-quote;
    }

q:after {
    content: close-quote;
    }

と記述します。

<a>要素での記述例。

例えば、HTMLの <a>要素において、accesskey属性の値が数字である場合に限ってキーを表示したい場合は、

a[accesskey="0"]:before,
a[accesskey="1"]:before,
a[accesskey="2"]:before,
a[accesskey="3"]:before,
a[accesskey="4"]:before,
a[accesskey="5"]:before,
a[accesskey="6"]:before,
a[accesskey="7"]:before,
a[accesskey="8"]:before,
a[accesskey="9"]:before {
    content: "[" attr(accesskey) "]";
    }

と記述します。

contentプロパティに関する注意事項。

contentプロパティの仕様上の注意。

をご覧下さい。

contentプロパティの実装上の注意。

ネットスケープ 4.xでの注意事項。

インターネットエクスプローラ 7.0まででの注意事項。

ネットスケープ 4.x
インターネットエクスプローラ 7.0まで

にはcontentプロパティは実装されておりません。

その他のユーザエージェントでの注意事項。

contentプロパティ対応ブラウザの一部旧ヴァージョンで、

counter()函数
counters()函数

が使えない場合があります。

また、日本語文字などの非アスキィ文字を記述した場合、一部のcontentプロパティ対応ブラウザで文字化けが起こる事があります。

もちろん、そのようなブラウザは年々減っておりますが、安全のために対応しておくべきであると判断した場合は、非アスキィ文字についてはユニコードの十六進コード(英字は大文字にする)の前に\を付けたもので表現すると良いでしょう。

例えば、

content: "以下引用。";

と言う記述は、

content: "\4EE5\4E0B\5F15\7528\3002";

とする事で文字化けを回避出来ます。

WAP 2.0での注意事項。

WAP 2.0では、contentプロパティは定義されておりません。

関連項目。

しらぎくのウェブサイト作成入門サイトマップ