hifi-dev

contentプロパティを調べてみる

2015年2月25日 css , html

::before疑似要素や::after疑似要素で使用するcontentプロパティ。
あまり深く調べたことが無いので調べてみました。

※疑似要素はIE8から対応していますが疑似要素の書き方は【:before】【:after】となります。

contentプロパティ関連の一覧です。
引用符に必要なquotesプロパティも含めています。

プロパティ名	指定値	説明
content	“文字列”	指定した文字列を追加する
	url(URI)	指定したURIの画像等を追加する
	counter(カウンタ名)	counter-incrementで指定したカウンタ名を入れる
	counters(カウンタ名, "文字列", list-style-type)	入れ子になった時に、カウンタを指定された文字列で区切った値で返す。list-style-typeは省略可
	attr(属性名)	指定した属性の値を表示する
	open-quote	quotesプロパティで設定されている開始引用符を挿入する
	close-quote	quotesプロパティで設定されている終了引用符を挿入する
	no-open-quote	引用符の入れ子の深さが一階深くなる
	no-close-quote	引用符の入れ子の深さが一階層浅くなる
counter-increment	カウンタ名 整数値	contentプロパティで追加された連番の値を進める。また整数値は半角スペースで区切って整数値を指定すると、カウンタの値がその数だけ前後し省略が可能
counter-reset	カウンタ名	contentプロパティで追加された連番の値を初期化する
quotes	“文字列” “文字列”	開始引用符と終了引用符の文字列をペアで指定

まずは基本となるcontentの”文字列”から。
比較的多い米マークをリストの前に配置するサンプルです。

<ul class="type1">
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ul>

ul.type1 {
	list-style-type: none;
}
ul.type1 li::before {
	content: "※";
}

サンプル

続いてURLのサンプル。サイズなど調整するのが面倒なので使用頻度は少なそう。
同じ画像を出すならcontentを空にしてdisplayとbackground-imageで出すほうが融通がきいていいような気がします。

<p class="type2">テキストテキストテキストテキスト</p>

p.type2::before {
	content: url(http://placehold.jp/14x14.png);
}

サンプル

次はcounter(カウンタ名)です。
米マークの後に連番を表示させるサンプルです。
因みに入れ子にしているのには次のサンプルに理由があります。

<ol class="type3">
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト
	<ol class="type3">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	</ol>
</li>
<li>テキストテキストテキストテキスト</li>
</ol>

ol.type3 {
	list-style-type: none;
}
ol.type3 li {
	counter-increment: type3;
}
ol.type3 li::before {
	content: "※" counter(type3);
}

サンプル

上記では入れ子にしても数字が進みますが、counter-resetを使う数字をリセットすることが可能です。

<ol class="type4">
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト
	<ol class="type4">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト</li>
	</ol>
</li>
<li>テキストテキストテキストテキスト</li>
</ol>

ol.type4 {
	counter-reset: type4;
	list-style-type: none;
}
ol.type4 li {
	counter-increment: type4;
}
ol.type4 li::before {
	content: "※" counter(type4);
}

サンプル

counter-incrementに整数値【2】を入れると【2】【4】【6】・・と2ずつ増えます。
因みに整数値なので負の値も可能です。

<ol class="type5">
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ol>

ol.type5 {
	list-style-type: none;
}
ol.type5 li {
	counter-increment: type5 2;
}
ol.type5 li:before {
	content: "※" counter(type5);
}

サンプル

続いてcounters(カウンタ名, “文字列”, list-style-type)。
約款などで使用できそうなサンプルです。

<ol class="type6">
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト
	<ol class="type6">
	<li>テキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキスト
		<ol class="type6">
		<li>テキストテキストテキストテキスト</li>
		</ol>
	</li>
	<li>テキストテキストテキストテキスト</li>
	</ol>
</li>
<li>テキストテキストテキストテキスト</li>
</ol>

ol.type6 {
	counter-reset: type6;
	list-style-type: none;
}
ol.type6 li {
	counter-increment: type6;
}
ol.type6 li::before {
	content: counters(type6, " - ", lower-alpha);
}

サンプル

attr(属性名)です。サンプルはhrefですがtitleやaltなども可能です。
下記のサンプルは印刷用cssでURLを表示させると印刷時のユーザビリティ的によいのかもしれません。

<ul>
<li><a href="https://www.google.co.jp/" class="type7">グーグル</a></li>
<li><a href="http://www.yahoo.co.jp/" class="type7">ヤフー</a></li>
</ul>

a.type7::after {
	content: attr(href);
}

サンプル

ここからは中々想定する使い方は思いつかないのですが、open-quoteとclose-quoteです。
quotesは開始と終了をセットで指定します。サンプルのように複数も可能です。

<p>テキスト<q class="type8">テキスト<q class="type8">テキスト</q>テキスト</q>テキスト</p>

q.type8 {
	quotes: '「' '」' '『' '』';
}
q.type8::before {
	content: open-quote;
}
q.type8::after {
	content: close-quote;
}

サンプル

no-open-quoteとno-close-quoteです。
サンプルはno-open-quoteになります。

<p>テキスト<q class="type9">テキスト<q class="type9">テキスト</q>テキスト</q>テキスト</p>

q.type9 {
	quotes: '「' '」' '『' '』';
}
q.type9::before {
	content: no-open-quote;
}
q.type9::after {
	content: close-quote;
}

サンプル

css , html kenboh

ads