[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。

擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。

サイトのキャプチャ

Understanding Pseudo-Element :before and :after

下記は各ポイントを意訳したものです。

「:before, :after擬似要素」のサポートブラウザ

サイトのキャプチャ

擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。
CSS1では「:first-letter, :first-line」です。

サイトのキャプチャ

擬似クラス、擬似要素

擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。
コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。

サポートブラウザブラウザ

「:before, :after擬似要素」をサポートするブラウザは下記の通りです。

  • IE8+
  • Firefox3.5+
  • Chrome
  • Safari4+
  • Opera6+

IE8+とすべてのモダンブラウザと言ってよいでしょう。

非サポートブラウザへの対応

IE7にも「:before, :after擬似要素」を利用できるようにするスクリプトです。

「:before, :after擬似要素」は何をするのか

簡単に説明すると、「:before, :after擬似要素」はエレメントの前と後にエレメントを追加します。
コードのイメージ的には、下記のようになります。

HTML

<p>
<span>:before</span>
	メインのエレメント
<span>:after</span>
</p>

「:before, :after擬似要素」で追加したエレメントは、実際にはHTMLのソース上には生成されません。ブラウザ上の見た目では見えますが、ソース上にはなく、フェイク(擬似)のエレメントです。

「:before, :after擬似要素」の使い方

まずは、「:before, :after擬似要素」の簡単な例から見てみましょう。
「blockquote」の前後に、「:before, :after擬似要素」で引用符を追加します。

サイトのキャプチャ

blockquoteに引用符を追加

HTML

<blockquote>引用文</blockquote>

CSS

blockquote:before {
	content: open-quote;
}
blockquote:after {
	content: close-quote;
}

HTMLはblockquote要素だけで、「:before, :after擬似要素」で前後に引用符を追加しました。

続いて、少しデザインを加えた例を見てみましょう。

サイトのキャプチャ

擬似要素をデザイン

「:before, :after擬似要素」はフェイクのエレメントですが、他のエレメントと同様にカラー・背景、サイズなどをスタイルできます。

CSS

blockquote:before {
	content: open-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: left;
	position: relative;
	top: 30px;

}
blockquote:after {
	content: close-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: right;
	position: relative;
	bottom: 40px;
}

「:before, :after擬似要素」で生成されるエレメントはデフォルトでインライン要素です。高さや幅を指定したい場合にはブロック要素として定義します。

サイトのキャプチャ

擬似要素をブロックレベルにして、サイズを指定

CSS

blockquote:before {
	content: open-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: left;
	position: relative;
	top: 30px;
	border-radius: 25px;

	/** define it as a block element **/
	display: block;
	height: 25px;
	width: 25px;
}
blockquote:after {
	content: close-quote;
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	background: #ddd;
	float: right;
	position: relative;
	bottom: 40px;
	border-radius: 25px;

	/** define it as a block element **/
	display: block;
	height: 25px;
	width: 25px;
}

「:before, :after擬似要素」で追加できるエレメントはテキストだけではありません。画像に置き換えることもできます。
画像を背景画像として表示します。

サイトのキャプチャ

擬似要素で画像を配置

CSS

このスタイルシートで注意すべき箇所は、空のcontentプロパティの存在です。これは空でも削除しないでください。
擬似要素を使用する際、contentプロパティは必要条件で、記述が無いと動作しません。

blockquote:before {
	content: " ";
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	float: left;
	position: relative;
	top: 30px;
	border-radius: 25px;

	background: url(images/quotationmark.png) -3px -3px #ddd;

	display: block;
	height: 25px;
	width: 25px;
}
blockquote:after {
	content: " ";
	font-size: 24pt;
	text-align: center;
	line-height: 42px;
	color: #fff;
	float: right;
	position: relative;
	bottom: 40px;
	border-radius: 25px;

	background: url(images/quotationmark.png) -1px -32px #ddd;

	display: block;
	height: 25px;
	width: 25px;
}

「:before, :after擬似要素」は他の擬似クラスと組み合わせて使用することもできます。

サイトのキャプチャ

擬似要素とホバーの組み合わせ

「:hover」との組み合わせも簡単です。
ホバー時に背景の色を変更してみます。

CSS

blockquote:hover:after, blockquote:hover:before {
	background-color: #555;
}

アニメーションと組み合わせることももちろんできます。

デモのキャプチャ

擬似要素とアニメーションを組み合わせたデモページ

CSS

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

ただし擬似要素のアニメーションは現在、Firefoxのみで動作します。

「:before, :after擬似要素」の応用テクニック

「:before, :after擬似要素」を使ったかっこいいテクニックを3つ紹介します。

サイトのキャプチャ

CSS Box Shadow

「:before, :after擬似要素」を使いリアルなシャドウを追加し、紙の少し浮き上がってるようなエフェクトを作ります。

サイトのキャプチャ

3D Button

a要素だけのシンプルなHTMLで、リアルな3Dのボタンを作成します。
左の「1」は「:before擬似要素」です。

HTML

<a id="button" href="#">
Numbah one!
</a> 
サイトのキャプチャ

Image Stack

一枚の画像だけで、画像が重なっているようにします。

top of page

Trackback

Comments

2012-7-16~2012-7-20のお気に入り* « WebPocket

on 2012年7月25日

[...] なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル [...]

blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと

on 2012年12月24日

[...] 角を丸くしたり、もっと格好良いデザインにするならこんなのもありました。 CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス [...]

top of page

©2014 coliss