[CSS]「:before擬似要素」と「:after擬似要素」の使い方を基本からマスターするためのチュートリアル
Post on:2017年7月19日
sponsors
HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。
擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。
Understanding Pseudo-Element :before and :after
下記は各ポイントを意訳したものです。
- 「:before, :after擬似要素」のサポートブラウザ
- 「:before, :after擬似要素」は何をするのか
- 「:before, :after擬似要素」の使い方
- 「:before, :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つ紹介します。
「:before, :after擬似要素」を使いリアルなシャドウを追加し、紙の少し浮き上がってるようなエフェクトを作ります。
a要素だけのシンプルなHTMLで、リアルな3Dのボタンを作成します。
左の「1」は「:before擬似要素」です。
HTML
<a id="button" href="#"> Numbah one! </a>
一枚の画像だけで、画像が重なっているようにします。
sponsors
