Search
  1. content〔コンテンツ挿入 ※:after及び:befor擬似要素と併用〕
  2. counter-increment〔自動カウンタ及び番号付け〕
  3. counter-reset〔自動カウンタ及び番号付けをリセット〕
  4. crop CSS3~〔要素の表示範囲〕
  5. move-to CSS3~〔要素の移動〕
  6. page-policy CSS3~〔ページポリシー〕
  7. quotes CSS3~〔引用符の挿入〕

content
コンテンツ挿入 ※:after及び:befor擬似要素と併用

unknown

content: <string> | inherit

contentプロパティは、:before擬似要素または:after擬似要素の内容を生成して表示します。

contentプロパティの値
説明
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>
表示例:Chrome表示例:Chrome

a要素の後に画像挿入

<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>
表示例:Chrome表示例:Chrome

counter-increment
自動カウンタ及び番号付け

unknown

counter-increment: <counter-name> <integer>?]+ | none | inherit

counter-reset
自動カウンタ及び番号付けをリセット

unknown

counter-reset: <counter-name> <integer>?]+ | none | inherit
IE未対応

counter-resetプロパティは、contentプロパティで指定したカウンタ(自動番号付け)の値をリセットします。

  • デフォルト値:none
  • 適用:全要素
  • 継承:しない

counter-resetプロパティの値
説明
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>
  1. 項目
    1. 項目
    2. 項目
    3. 項目
  2. 項目
    1. 項目
    2. 項目
    3. 項目
  3. 項目

crop CSS3~
要素の表示範囲

unknown

crop: <shape> | auto

cropプロパティは、要素の表示範囲を指定します。 全体ではなく、指定した矩形領域に該当する部分だけが表示されます。

  • デフォルト値:auto
  • 適用:置換要素
  • 継承:しない
cropプロパティの値
説明
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 CSS3~
要素の移動

unknown

move-to: normal | here | <identifier>

move-toプロパティは、要素と置換要素をフローから削除し、文書の最後に再挿入します。

  • デフォルト値:normal
  • 適用:全要素、疑似要素(:before、:after、:alternate)
  • 継承:しない

move-toプロパティの値
説明
normal 
here 
<identifier> 

page-policy CSS3~
ページポリシー

unknown

page-policy: start | first | last

page-policyプロパティは、カウンタまたは文字列値に適用される特定の要素のどのページベースの発生を決定します。

  • デフォルト値:start
  • 適用:@counter and @string blocks
  • 継承:しない

page-policyプロパティの値
説明
startページの先頭にカウンタまたは文字列の値を取ります。
firstページの処理中にカウンタまたは文字列の最初の状態の変更後の値をとります。
lastページの最後の状態変更は、次の値をとります。

quotes CSS3~
引用符の挿入

unknown

quotes: foo | bar
IE未対応

quotesプロパティは、contentプロパティで挿入する内容に引用符を指定します。 開始および終了の引用符のペアを複数指定することで、入れ子階層に応じた引用符を付けることが可能です。

  • デフォルト値:text? UA依存
  • 適用:全要素
  • 継承:しない

quotesプロパティの値
説明
<foo> <bar>開始引用符と終了引用符のペアを半角スペース区切りで指定。
nonecontentプロパティの値が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に書かれている。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women