ナヴィゲーションを読み飛ばす。

生成内容

:before，:after疑似要素と併用して，文書中に内容を生成したり，引用符を指定するプロパティ。

目次

content（内容を生成する）

プロパティの解説
値[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
初期値空文字列
適用:before, :after疑似要素
継承性なし
パーセント値受けつけない
メディアグループall

このプロパティでは:beforeまたは:after疑似要素と併用して，文書中に内容を生成するために用います。

各値は以下のような意味を持ちます； これらは空白類文字で区切って何回でも組合せられます：

<string>

指定されたテキストを内容として生成する。

（補足：外部スタイルシート内で非ASCII文字列を生成する場合，@charset規則を用いるとよいでしょう。）

<uri>

指定されたURIが指し示す外部リソース（画像など）を生成する。もし指定されたリソースを表示できない場合，この値が指定されていないかのように無視されねばなりません。もしくは利用不可であることを仄めかす何かを示さねばなりません。

【註】：CSS2(2.1)仕様では埋込みオブジェクトのサイズを変更したり，HTMLで画像につけるalt属性やlongdesc属性のように代替内容を記述する仕組が提供されていません。将来のヴァージョンではこの状況は改善されるかもしれません。

<counter>

カウンタを挿入する。これを用いると要素内容に対して，自動連番を挿入する事ができます。

詳細は割愛します。規範情報はCSS2勧告邦訳 12もしくはCSS2.1 section 12.4から得てください。

open-quote, close-quote

これらの値は'quotes'プロパティで指定した引用符を適切な位置に挿入する。'open-quote' は開始部の引用符として見做され，引用レヴェルをひとつ深くします。'close-quote' は終了部の引用符として見做され，引用レヴェルをひとつ浅くします。

なおこの引用レヴェルでは，ソース文書上または整形構造上における "入れ子レヴェル" とは独立しています。

no-open-quote, no-close-quote

これらの値は引用符それ自体を挿入するのではなく，'quotes'プロパティで設定された引用符の入れ子レヴェルだけを変更する。'no-open-quote' は入れ子レヴェルを一段階だけ深くし，'no-close-quote' は入れ子レヴェルを一段階だけ浅くします。

attr(X)

この函数は，セレクタの主体となる要素に指定された属性 X の値を文字列として返します。セレクタの主体となる要素にその属性が指定されてなければ，空文字列を返します。なお属性名の大文字と小文字の区別は，文書言語に依存します。

【註】：CSS2(2.1)仕様では，セレクタの主体とならない要素の持つ属性の値については参照できません。

制作者は 'content'プロパティに指定する文字列の一部として "\A" のエスケープ文字を用いると，生成内容に改行を挿入できます。なお，この挿入される改行はやはり'white-space'プロパティの影響を受け，CSS2.1のデフォルト例では 'pre-line' を奨励しています。

HTMLのbr要素で奨励されるデフォルトスタイルの例では br:before { content: "\A" } として示されています。

【註】：CSS2.1では新しい値 'normal' を初期値としています（空文字列だと空のボックスを生成して了うので）。CSS2.1では 'normal' を何も生成しない 'none' として算出するのですが，CSS3では異る意味を持つかもしれません。これらは単独指定で用います。

補足: 生成内容の利用法とその利点について

装飾目的の利用: 生成内容の仕組は，文書の意味構造とは直接関係のない内容（たとえば見出しを目立たせるワンポイント画像や記号など）を挿入したい場合に便利です。こういう装飾のマーク附けは面倒ですし，装飾を変更する度にマーク附けを一々変更していては非効率です。生成内容を用いれば，マーク附けに餘り影響を与えずに，容易に内容を挿入できます。

意味構造の補足: attr()函数を用いると，各要素の属性が持つ値を補足情報として文書内に挿入できます。たとえば引用先を明示する為に引用要素（q，blockquote）のcite属性値を表示させたり出来ます。そのほかにも，要素内容の前後に目印（たとえば階層構造や見出し順に合せて番号を振ったり，「引用の始り」「引用の終り」などのテキスト）を挿入できます。

媒体毎に合せる: たとえば非視覚メディアに向けて補足情報を生成して置くことは，意図を伝えるのに大いに役立つでしょう。また逆に，視覚メディアに特定して置けば，非視覚環境では意味のない装飾を取去る事になります。印刷などの静的メディアでは当然ハイパーリンクが効かないのですが，attr()函数を用いれば，リンク元・引用元のURIを文字列として印刷できます。

〔補足終了〕

記述例
@media all {
  ul.note > li:before {
    content: "註：";
    pitch-range: 60; richness: 70;
    }
  }
@media screen, tv, handheld {
  .navi a[accesskey]:after {
    content: "<" attr(accesskey) ">"
    text-transform: uppercase; font-size: 80%;
    color: gray; background: white;
    }
  }
@media screen, tv, handheld, print {
  h2:before { content: "§"; }
  h3:before { content: "◆"; }
  blockquote[cite]:after {
    text-align: right; font-family: monospace;
    display: block; content: attr(cite);
    }
  }
@media print {
  cite > a[href]:after { content: " [" attr(href) "]"; }
  }
@media aural, speech {
  blockquote:before, blockquote:after {
  speech-rate: slow; pitch: high; richness: 70; }
  blockquote:before        { content: "以下から，" "引用が始ります。";  }
  blockquote:after         { content: "以上で，"   "引用が終りました。"; }
  blockquote[cite]:before  { content: "以下は「" attr(cite)  "」からの引用。"; }
  blockquote[title]:before { content: "以下は「" attr(title) "」からの引用。"; }
  }

quotes（引用符を指定する）

プロパティの解説
値[<string> <string>]+ | none | inherit
初期値UAの実装に依存
適用あらゆる要素
継承性あり
パーセント値受けつけない
メディアグループvisual

これは'content'プロパティで挿入する引用符の設定であり，入れ子の深さに応じた引用符を一組づつ指定します。

補足: HTML 4.01のq要素型とUser Agentによる引用符の整形

HTML 4.01では短い引用を示すq要素型を用意しており，その整形について次のごとく述べています。

視覚系ユーザエージェントは，Q要素の内容を，引用符で囲ってレンダリングするようにしなければならない。著者は，Q要素の開始点と終了点に引用符を置かないようにする必要がある。

ユーザエージェントは，引用符を言語固有の方法(lang属性参照)でレンダリングする必要がある。多くの言語では，外側の引用と内側の(入れ子の)引用に対して，異なる引用の形式を採っており，ユーザエージェントはこれを考慮する必要がある。

したがって，HTML 4.01に適合する視覚系User Agentでは，q要素の内容に自動的に引用符を挿入するのですが，“使用言語や入れ子の深さに応じて引用符を選択する” といった実装が採られる事は餘りありません。'quotes'プロパティと:lang()疑似クラス（または属性セレクタ）を組合せれば，入れ子の深さに応じた適切な引用符を言語ごとに明示的に設定できます。

〔補足終了〕

各値は以下のような意味を持ちます：

[<string> <string>]+

'content'プロパティの値が 'open-quote' や 'close-quote' である場合，生成内容はここに列挙される引用符から選択される。最初の文字列が開始部の引用符，次の文字列が終了部の引用符を意味します。更に続けて引用符のペアを複数記せば，入れ子の深さに応じた引用符も設定できます。入れ子の深さがここで指定したペアの数よりも深くなった場合，最後に指定されたペアが再利用されます。

none

'content'プロパティの値が 'open-quote' や 'close-quote' であっても引用符を生成しない。

以下の表に，国際符号化文字集合：UCS（ISO10646）に存在する引用符のうち，いくつかを列挙します：

符号位置 説明
"U+0022 quotation mark [the ASCII double quotation mark]
'U+0027 apostrophe [the ASCII single quotation mark]
‹U+2039 single left-pointing angle quotation mark
›U+203A single right-pointing angle quotation mark
«U+00AB left-pointing double angle quotation mark
»U+00BB right-pointing double angle quotation mark
‘U+2018 left single quotation mark [single high-6]
’U+2019 right single quotation mark [single high-9]
“U+201C left double quotation mark [double high-6]
”U+201D right double quotation mark [double high-9]
„U+201E double low-9 quotation mark [double low-9]

CSSではバックスラッシュによるエスケープを利用する事により，ISO10646の符号位置を参照できます。

記述例
q:before { content: open-quote;  }
q:after  { content: close-quote; }
/* 日本語の引用 */
q:lang(ja),
*:lang(ja) > q {
  quotes: "「" "」" "『" "』";
}
/* 英語の引用 */
q:lang(en),
*:lang(en) > q {
  quotes: '"' '"' "'" "'";
}
/* フランス語の引用 */
q:lang(fr),
*:lang(fr) > q {
  quotes: "«" "»" "‹" "›";
}