CSS3 Pre-Reference



content

内容の生成

試す

コード

p {
  content: 'abc' 'def' "ghi" "jkl";
}
p::before {
  content: open-quote;
}
p::after {
  content: close-quote;
}

サンプル

最初に"abc"、青文字の間に"ghi"、赤文字の間に"jkl"、最後に"def"が挿入されていれば対応しています。

吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。青文字
青文字その後(けむり)したから火がある。ただその日がよかろう度毎まった。赤文字
赤文字

コメントする


対応ブラウザ

Firefox
1.5~
Chrome/Safari
まだ
Opera
4.0~
InternetExplorer
8.0~

パラメータ

[ <URL> ',' ]* [ normal | none | inhibit | <コンテンツ一覧> ]
初期値 normal
適用 すべての要素、::before、::after、::alternate、::marker、::line-marker疑似要素、マージン領域、脚注領域
継承 しない
レベル 2-
%の解釈 -
適用メディア All
参考文献 CSS3 Generated and Replaced Content Module#11. Inserting and replacing content with the 'content' property

解説

コンテンツを指定します。

CSS3では::before、::afterだけでなく、すべての要素の内容を置換することが出来ます。CSS3になって、大幅に拡張されています。

<URL>

そのURLのリンク先のコンテンツを表示します。ビデオ、画像、テキスト、なんでもよく、対応している形式のものであれば表示します。

h1 { content: url(header/mng), url(header/png), url(header/jpg); }

上記のようにカンマでリストで並べられている場合、1つ目のコンテンツに対応していない場合は2つ目、2つ目も対応していなければその次、となります。最終的な代替コンテンツが無い場合は、内容をそのまま表示します。

h1 { content: url(welcome), "Welcome to: " url(logo); }

もし上記のように、最終的なリストがURLだけでない場合、最終的なコンテンツのURLが利用不可能なコンテンツであっても、URL以外の部分を表示します。上記の場合、welcomeもlogoも利用できない場合でも、h1は"Welcome to:"と表示されます。

もしURLで置換された場合、置換要素と同様、::before::afterは無くなります。

normal

一般要素では'contents'として解釈されます。

'::alternate'疑似要素では、先祖要素がcontentプロパティ内で'footnote'か'endnote'か'section-note'カウンターを使用している場合は'contents'、それ以外の場合は'inhibit'と解釈されます。

'::before'、'::after'、'::line-marker'疑似要素では、'inhibit'と解釈されます。

'::marker'疑似要素では、先祖要素がcontentプロパティ内で'footnote'カウンターを使用している場合は'list-style-image'の算出値を利用します。
それ以外の場合は、'list-style-type'の算出値が'none'でない場合は'counter(footnote, <list-style-type>) "サフィックス"'(「サフィックス」には適切な文字列を入れる、要するにブラウザ依存)、それ以外の場合は'inhibit'と解釈されます。

先祖要素がcontentプロパティ内で 'endnote'カウンターを使用している場合は'list-style-image'の算出値を利用します。
それ以外の場合は、'list-style-type'の算出値が'none'でない場合は'counter(endnote, <list-style-type>) "サフィックス"'(「サフィックス」には適切な文字列を入れる、要するにブラウザ依存)、それ以外の場合は'inhibit'と解釈されます。

先祖要素がcontentプロパティ内で 'section-note'カウンターを使用している場合は'list-style-image'の算出値を利用します。
それ以外の場合は、'list-style-type'の算出値が'none'でない場合は'counter(section-note, <list-style-type>) "サフィックス"'(「サフィックス」には適切な文字列を入れる、要するにブラウザ依存)、それ以外の場合は'inhibit'と解釈されます。

先祖要素がcontentプロパティ内で 'list-item'カウンターを使用している場合は'list-style-image'の算出値を利用します。
それ以外の場合は、'list-style-type'の算出値が'none'でない場合は'counter(list-item, <list-style-type>) "サフィックス"'(「サフィックス」には適切な文字列を入れる、要するにブラウザ依存)、それ以外の場合は'inhibit'と解釈されます。

'@footnote'領域の場合、'pending(footnote)'と解釈されます。

マージン領域の場合、 'none'と解釈されます。

none

一般要素では、その要素が空であるように振る舞います。子孫要素はその要素が無いかのように振る舞います。

疑似要素では、内容が空になります。

inhibit

一般要素では、その要素が空であるように振る舞います。子孫要素はその要素が無いかのように振る舞います。

疑似要素では、要素を生成しません。

<コンテンツ一覧>

[ pending(<識別子>) | <文字列> | contents | footnote | endnote | section-note | list-item | <カウンター> | <strings> | open-quote | close-quote | no-open-quote | no-close-quote | <グリフ> | <URL> | <日付> | document-url | <ターゲット> ]+

上記の値をスペースで区切って列挙します。

pending(<識別子>)

'move-to'プロパティが指定した識別子に合致する要素で、これまでに登場した要素の内容を挿入します。DOMは変更されません。(つまり、その場のスタイルのまま移動後の場所に表示されますし、カウンター等も元位置の時の値を利用します)

まだ移動が完了していない要素のみ移動されることに注意してください。以下に例を示します。:

moved { move-to: insert; }
insert { content: pending(insert); }
<root>
<moved> A </moved> 1 <insert/> 2 <moved> B </moved> 3 <insert/>
</root>

上記は右記のように描画されます:"1 A 2 3 B"

"" (空文字列)

単純に空文字列の匿名要素を生成します。

<文字列>

指定された文字列を含む疑似要素を生成します。

contents

その要素の子孫要素を示します。詳細は以下の通り:

要素に指定:

特に変化はありません。

'::marker'か'::line-marker'疑似要素に指定:

"none"と算出。

他の疑似要素に指定:

以下の順序でこれより前の疑似要素で指定されている要素がないかを確認します:

  1. その要素自身
  2. ::alternate
  3. ::before
  4. ::after

もし既にこの値が使用されている場合は、'none'と算出されます。

たとえば、以下のケースでは:

foo { content: none; } 
foo::before { content: '[' counter(footnote) ']' contents; }
foo::alternate { content: counter(footnote) '. ' contents; }

'::alternate'は'::before'より優先されるので、'::before'は'[1]'になり、脚注は'1. 'とそれに続く要素の内容になります。

しかし、以下のケースでは:

/* foo { content: normal; }   /* this is the initial value */ 
foo::after { content: contents; }

要素自身の 'content'の優先度が高いため、::afterは'none'になります。

footnote

'counter(footnote, normal)'のショートハンド

endnote

'counter(endnote, normal)'のショートハンド

section-note

'counter(section-note, normal)'のショートハンド

list-item

'counter(list-item, normal)'のショートハンド。

<カウンター>

カウンターの項を参照。

string(識別子)

@string命名規則で定義された文字列を引用します。

open-quote and close-quote

'quotes'プロパティで指定した引用符を挿入し、引用レベルを増減します。

no-open-quote, no-close-quote

何も挿入しませんが、引用レベルを増減します。

<グリフ>

指定されたシンボル。指定可能なシンボルは以下の通り:

box
白抜きの四角。(□ U+25A1 WHITE SQUARE, ◻ U+25FB WHITE MEDIUM SQUARE, ◽ U+25FD WHITE MEDIUM SMALL SQUARE)
check
チェックマーク。チェックボックスのチェックのようなもの。(✓ U+2713 CHECK MARK)
circle
白抜きの円。( ◦ U+25E6 WHITE BULLET)
diamond
黒塗りの菱形。(◆ U+25C6 BLACK DIAMOND,  ♦ U+2666 BLACK DIAMOND SUIT)
disc
黒塗りの円。( • U+2022 BULLET)
hyphen
ハイフン。(⁃ U+2043 HYPHEN BULLET, – U+2013 EN DASH)
square
黒塗りの四角。(■ U+25A0 BLACK SQUARE, ◼ U+25FC BLACK MEDIUM SQUARE, ◾ U+25FE BLACK MEDIUM SMALL SQUARE)
<日付>

'date(<フォーマット>)'汎関数記法で指定します。現在時刻を指定したフォーマットで返します。フォーマットについては、現段階では未定義。

document-url

現在のドキュメントのURL。

<ターゲット>

各種ターゲット汎記法を指定します。

トラックバック

投稿されたコメント