CSSで、スタイルシートで生成する内容を指定するcontentプロパティに関する解説です。
contentプロパティは、スタイルシートで生成する内容を指定するプロパティです。
CSSの仕様では、マークアップ文書に記述されていない文字列などを、スタイルシートによるコンテンツとして出力する機能があります。
この場合、セレクタとして:before擬似要素または:after擬似要素を指定します。
これにより、当該要素の前か後ろに適切なコンテンツを付け足す事が可能になります。
contentプロパティの書式は、以下のようになります。
content: 値値としては、以下のものが取れます。
inheritcontentプロパティの値としてinherit以外を取る場合は、以下の出力内容を空白文字で区切って出力したい順に記述します。
出力させたい文字列です。
改行を出力させる場合は、改行文字として「\A」と書きます。
url(URI)画像などURIで指定されるリソースを出力したい場合は、URIを指定します。
尚、対応出来ないリソースを指定されている場合は、これを無視するものとします。
また、当該リソースを利用出来ない場合の代替コンテンツを指定する方法(HTMLで言えば、<img>要素のalt属性など)は用意されておりません。
counter()函数カウンタの値を出力する場合に利用します。
具体的には以下のいずれかの書式を取ります。
counter(カウンタ名)カウンタ名で示されるカウンタの値を数字で出力します。
counter(カウンタ名, タイプ)カウンタ名
で示されるカウンタの値を指定のタイプ
で出力します。
タイプ
としては、list-style-typeプロパティの値をそのまま利用します。
例えば、大文字ローマ数字で出力したい場合はupper-romanとします。
counterrs()函数カウンタの値を出力する場合に利用します。
counte()函数と違う点は、カウンタを用いている要素が入れ子になっている場合に、同じカウンタ名のカウンタの値を外側から順番に並べていく事です。
具体的には以下のいずれかの書式を取ります。
counters(カウンタ名, 文字列)カウンタ名
で示されるカウンタの値を数字で、文字列
で区切って出力します。
タイプ
としては、list-style-typeプロパティの値をそのまま利用します。
例えば、大文字ローマ数字で出力したい場合はupper-romanとします。
counters(カウンタ名, 文字列, タイプ)カウンタ名
で示されるカウンタの値を指定のタイプ
で、文字列
で区切って出力します。
タイプ
としては、list-style-typeプロパティの値をそのまま利用します。
例えば、大文字ローマ数字で出力したい場合はupper-romanとします。
open-quoteclose-quoteno-open-quoteno-close-quoteattr(属性名)函数尚、contentプロパティのデフォルト値は空文字列となります。
いろいろな使い方があるので、四例出します。
例えば、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;}
と記述します。
例えば、HTMLの<blockquote>要素開始直後に「以下引用」、終了直前に「引用ここまで」と出力したい場合は、
blockquote:before {display: block;content: "以下引用";}blockquote:after {display: block;text-align: right;content: "引用ここまで";}
と記述します。
例えば、HTMLの<q>要素において、引用符を"「」"、"『』"の順に使いたい場合は、
q {quotes: '「' '」' '『' '』';}q:before {content: open-quote;}q:after {content: close-quote;}
と記述します。
例えば、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プロパティ対応ブラウザで文字化けが起こる事があります。
もちろん、そのようなブラウザは年々減っておりますが、安全のために対応しておくべきであると判断した場合は、非アスキィ文字についてはユニコードの十六進コード(英字は大文字にする)の前に\を付けたもので表現すると良いでしょう。
例えば、
content: "以下引用。";と言う記述は、
content: "\4EE5\4E0B\5F15\7528\3002";とする事で文字化けを回避出来ます。
WAP 2.0では、contentプロパティは定義されておりません。
