Generated content - 生成されたコンテンツ
- content〔コンテンツ挿入 ※:after及び:befor擬似要素と併用〕
- counter-increment〔自動カウンタ及び番号付け〕
- counter-reset〔自動カウンタ及び番号付けをリセット〕
- crop
〔要素の表示範囲〕 - move-to 〔要素の移動〕
- page-policy 〔ページポリシー〕
- quotes 〔引用符の挿入〕
content
コンテンツ挿入 ※:after及び:befor擬似要素と併用
unknown
content: <string> | inherit
contentプロパティは、:before擬似要素または:after擬似要素の内容を生成して表示します。
- デフォルト値：normal
- 適用：全要素、:before擬似要素および:after擬似要素
- 継承：しない
値
| 値 | 説明 |
|---|---|
| none | 擬似要素を生成しない。 |
| normal | :after、:before疑似要素にnoneを指定。 |
| <string> | 文字列を生成する。 |
| <uri> | 文書のリソースを示すURLを指定。 |
| <counter> | 自動番号付け |
| open-quote close-quote | quotesプロパティで指定した適切な文字列に置換される。 |
| no-open-quote no-close-quote | 何も生成しない（空文字列）が引用レベルを増分（減分）する。 |
| attr(X) | セレクタの主体が持つ属性Xの値を文字列として返す。主体に指定した属性がない場合は何も挿入されない（空文字列）。 |
サポート
Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○
設置サンプル
p要素の前にテキスト挿入
<style type="text/css">
/* 要素の前に、指定した文字列を挿入 */
p.note {
color:red;
}
p.note:before {
content:"Note: "; /* 文字列 */
font-weight:bold;
}
</style>
<p class="note">注釈文とかエトセトラ。</p>
表示例：Chromea要素の後に画像挿入
<style type="text/css">
/* 要素の後に、指定した画像を挿入 */
a.external_link:after {
padding-left:5px;
content:url(/content/img/icon/external.gif); /* URL */
vertical-align:middle;
}
</style>
<p><a href="http://www.google.co.jp/" class="external_link">Google検索</a></p>
表示例：Chromecounter-increment
自動カウンタ及び番号付け
unknown
counter-increment: <counter-name> <integer>?]+ | none | inherit
counter-reset
自動カウンタ及び番号付けをリセット
unknown
counter-reset: <counter-name> <integer>?]+ | none | inherit
IE未対応
counter-resetプロパティは、contentプロパティで指定したカウンタ（自動番号付け）の値をリセットします。
- デフォルト値：none
- 適用：全要素
- 継承：しない
値
| 値 | 説明 |
|---|---|
| none | カウンタをリセットしない。 |
| <identifier> <integer> | カウンタ名とカウンタのデフォルト値を指定。 ※カウンタの初期値を指定する整数のデフォルト値は0。 |
<style type="text/css">
/* リスト番号を自動採番 */
div.items ol {
counter-reset:item; /* リセット */
list-style:none;
}
div.items li:before {
content:counters(item, "-") ". "; /* 生成内容 */
counter-increment:item; /* カウンタ名 */
color:#63b6ce;
}
</style>
<div class="items">
<ol>
<li>項目
<ol>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ol>
</li>
<li>項目
<ol>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ol>
</li>
<li>項目</li>
</ol>
</div>- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
crop
要素の表示範囲
unknown
crop: <shape> | auto
cropプロパティは、要素の表示範囲を指定します。 全体ではなく、指定した矩形領域に該当する部分だけが表示されます。
- デフォルト値：auto
- 適用：置換要素
- 継承：しない
| 値 | 説明 |
|---|---|
| auto | 要素の実サイズと同じ。 |
| rect(top, right, bottom, left) | 要素の左上からの相対的なオフセットを指定。負の値は0扱い。 |
| inset-rect(top, right, bottom, left) | 要素のそれぞれの端からの相対オフセットであることを除いて、rect()と同じ。 |
設置サンプル
<style type="text/css">
#d_shape_rect {
crop:rect(0px, 30px, 30px, 30px);
}
</style>
<p>
元画像：<img src="/content/img/pic1.png" alt="ドーナツ" />
</p>
<p>
サムネイル表示：<img src="/content/img/pic1.png" id="d_shape_rect" alt="ドーナツのサムネイル" />
</p>
元画像：
サムネイル表示：
move-to
要素の移動
unknown
move-to: normal | here | <identifier>
move-toプロパティは、要素と置換要素をフローから削除し、文書の最後に再挿入します。
- デフォルト値：normal
- 適用：全要素、疑似要素（:before、:after、:alternate）
- 継承：しない
値
| 値 | 説明 |
|---|---|
| normal | |
| here | |
| <identifier> |
page-policy
ページポリシー
unknown
page-policy: start | first | last
page-policyプロパティは、カウンタまたは文字列値に適用される特定の要素のどのページベースの発生を決定します。
- デフォルト値：start
- 適用：@counter and @string blocks
- 継承：しない
値
| 値 | 説明 |
|---|---|
| start | ページの先頭にカウンタまたは文字列の値を取ります。 |
| first | ページの処理中にカウンタまたは文字列の最初の状態の変更後の値をとります。 |
| last | ページの最後の状態変更は、次の値をとります。 |
quotes
引用符の挿入
unknown
quotes: foo | bar
IE未対応
quotesプロパティは、contentプロパティで挿入する内容に引用符を指定します。 開始および終了の引用符のペアを複数指定することで、入れ子階層に応じた引用符を付けることが可能です。
- デフォルト値：text？ UA依存
- 適用：全要素
- 継承：しない
値
| 値 | 説明 |
|---|---|
| <foo> <bar> | 開始引用符と終了引用符のペアを半角スペース区切りで指定。 |
| none | contentプロパティの値がopen-quoteまたはclose-quoteの場合、引用符を生成しない。 |
<style type="text/css">
q{
quotes:"「" "」" "『" "』";
}
q:before {
content:open-quote;
}
q:after {
content:close-quote;
}
</style>
<blockquote>
<p>
夏目漱石は<q><q>吾輩は猫である</q>、<q>こゝろ</q>などの作品で広く知られる、
森鴎外と並ぶ明治・大正時代の大文豪である。</q>とWikipediaに書かれている。
</p>
</blockquote>夏目漱石は
とWikipediaに書かれている。吾輩は猫である、こゝろなどの作品で広く知られる、 森鴎外と並ぶ明治・大正時代の大文豪である。