Web制作で必ず使用する擬似要素について解説していきます。
擬似要素の使い方を理解することで、CSSでのスタイリング（装飾）する表現の幅が広がるので必ずマスターしましょう。
擬似要素とは
擬似要素を一言で表すと「CSSのみで指定した要素に装飾が行えるモノ」です。
デモを見てみましょう。
擬似要素を使わない場合
See the Pen 擬似要素の導入デモ - 擬似要素を使わない場合 by ZeroPlus (@zeroplus-programming) on CodePen.
HTMLに着目してください。
擬似要素を使わない場合、装飾をするには.title-lv2-decoや.desc-decoのようにして、HTMLを書き加える必要があります。
それを踏まえて、擬似要素を使った場合をみてみましょう。
擬似要素を使った場合
See the Pen 擬似要素の導入デモ - 擬似要素を使った場合 by ZeroPlus (@zeroplus-programming) on CodePen.
擬似要素を使うと、デモのように構造的な意味を持つ、必要最小限のHTMLのみで装飾をつけることができます。
HTMLは本来、コンテンツの構造を作るための言語ですので、装飾用のタグは最小限が望ましいです。そんな時に使えるのが今回扱う「擬似要素」というわけですね。
擬似要素の種類
擬似要素には多くの種類がありますが、今回は中でもよく使う、次の４つを紹介させていただきます。
| 擬似要素 | できること |
|---|---|
| ::before | 指定した要素の最初の子要素として、擬似要素を作れます |
| ::after | 指定した要素の最後の子要素として、擬似要素を作れます |
| ::first-line | 指定した要素の最初の行に、限定的にスタイルを当てることができます |
| ::first-letter | 指定した要素の最初の文字に、限定的にスタイルを当てることができます |
::before, ::after
指定した要素の子要素として擬似要素を作れます。
次のように記述すると、擬似要素を作ることができます。
.selector::before {
content: '';
/* その他、擬似要素に適応させたいスタイルを記述 */
}
.selector::after {
content: '';
/* その他、擬似要素に適応させたいスタイルを記述 */
}content: '';がないと、擬似要素として作られないので注意しましょう。
また、::beforeと ::afterには主に、「そのまま配置する方法」と「positionプロパティを用いる方法」の２種類の使い方があります。
それぞれ見ていきます。
そのまま配置する方法
See the Pen ::before, ::after使い方解説 - そのまま配置する方法 by ZeroPlus (@zeroplus-programming) on CodePen.
指定した要素の子要素として、::beforeが最初、::afterが最後に生成されるので、このデモでは「HTMLにある要素本体」という文字をはさむ形で作られています。
positionプロパティを用いる方法
See the Pen ::before, ::after使い方解説 - positionプロパティを用いる方法 by ZeroPlus (@zeroplus-programming) on CodePen.
作られ方としては【そのまま配置する方法】と同じ位置に作られるのですが、positionを使うことで自由に置くことができます。
装飾として::before, ::afterを使う場合は、こちらの使い方をする方が多いです。
１つの要素に対して、::beforeと::afterそれぞれ１つずつしか指定ができないので、注意が必要です。
::first-line
指定したブロックレベル要素の最初の行に、限定的にスタイルを当てることができます。
See the Pen ::first-lineの使い方解説 by ZeroPlus (@zeroplus-programming) on CodePen.
デモの横幅を変えてみるとわかりますが、「最初の行」を認識してスタイルを当ててくれます。
ブロックレベル要素の最初の行（今回はpタグ）なので、インライン要素（aタグやspanタグなど）に使っても、効果はありません。
See the Pen ::first-lineの使い方解説 - インライン要素 by ZeroPlus (@zeroplus-programming) on CodePen.
::first-letter
指定したブロックレベル要素の最初の文字に、限定的にスタイルを当てることができます。
See the Pen ::first-letterの使い方解説 by ZeroPlus (@zeroplus-programming) on CodePen.
こちらも::first-lineと同様に、インライン要素に対しては効果がありません。
装飾を擬似要素で作らない方がいいケース
冒頭では、「装飾をするときは、装飾用のHTMLタグは最小限が望ましい」という話をしました。
ですが、中にはHTMLタグを使って装飾を作った方がいい場合もあります。
装飾を作るときに、::beforeと::afterで擬似要素を作る場合と、HTMLでタグを作って要素を作る場合の使い分けについて説明します。
結論として「重要なコンテンツはHTMLタグを使う」ようにしましょう。
なぜなら、検索をかけたときに擬似要素によって作られたコンテンツは認識されないからです。
例えば、タイトルの装飾文字だったり、記事についている「新着」のラベルなどは、検索される可能性があるので、擬似要素で作ることが望ましくない場合があります。
なので、::beforeや ::afterを使ってコンテンツを作る際は注意しましょう。
擬似要素の実例
最後に、実例を紹介します。
ボタンの矢印
See the Pen 擬似要素の実例０１ by ZeroPlus (@zeroplus-programming) on CodePen.
こちらは、ボタンの矢印を擬似要素で作っています。
アニメーション用の背景
See the Pen 擬似要素の実例０２ by ZeroPlus (@zeroplus-programming) on CodePen.
ボタンにホバーすると、白い背景がスライドしてきます。その白い背景を擬似要素で作っています。
以上が、擬似要素の説明となります。
慣れるまでは小難しく感じてしまうかもしれませんが、使っていくうちにとても便利な手法となってきます。ぜひ、使ってみてください。
