このページでは、【ホームページ制作入門講座】としてCSSの擬似要素と擬似クラスについて解説しています。
CSSにはセレクタに設定する擬似要素と擬似クラスというものがあります。
サイト制作にあたり、重要な知っておくべきテクニックになりますので、しっかりと習得していきましょう。
-
CSSとは？詳しい意味や記述方法と、classとidの使い方やルールなども解説。【ホームページ制作入門講座】
続きを見る
この記事は、動画バージョンでも解説しておりますので、動画で学習されたい方は以下のリンクより閲覧下さい。
擬似要素とは？
擬似要素とは、擬似的にCSSで設定する要素という事になりますが、擬似的という表現がとても捉えずらくしているような気がしますので、簡単に、「さらなる追加事項」くらいで覚えておきましょう。
擬似要素の使い方
擬似要素で使えるものは決まっております。使用時は、セレクタの後ろに「::(2重コロン）」または「：（コロン）」をつけます。
ポイント
以前までは、「：（コロン）」がスタンダードな書き方だったのですが、最新バージョンのCSSに対応する為には「::(2重コロン）」を使う必要があります。ただ、現状「：（コロン）」だけでも問題なく使える事がほとんどです。
また、「::(2重コロン）」を使う事で、この後紹介する擬似クラスと区別もされています。
主要な擬似要素
それでは、CSSで主要な擬似要素を紹介します。
before
beforeは、要素の直前にコンテンツ（文字・画像など）を挿入します。
<p>今日は晴れです。</p>
p:before{content: "やっぱり";}
ポイント
beforeを使用する場合、contentプロパティが必要になります。値を指定する場合は、"（ダブルコーテーション）で囲います。また、文字を入れたくない場合は、{content: "";}と文字を挟まずに記述します。
また、指定されたCSSは擬似要素にのみかかります。この場合は「やっぱり」の文字です。
after
afterは、要素直後にコンテンツ（文字・画像など）を挿入します。
<p>今日は晴れです。</p>
p:after{content: "（嘘）";}
ポイント
afterを使用する場合、contentプロパティが必要になります。値を指定する場合は、「"（クォーテーションマーク）」で囲います。また、文字を入れたくない場合は、{content: "";}と文字を挟まずに記述します。
また、指定されたCSSは擬似要素にのみかかります。この場合は「（嘘）」の文字です。
afterのよくある使用例
私が一番よく使うafter擬似要素の利用方法は、floatプロパティを使用した時の回り込み解錠の際に使います。
p:after{
content: "";
clear: both;
display: block;
}
このコードをfloat使用後に入れておくと、回り込みを解除できますので、おまじないのようにこの形で覚えておきましょう。
他の擬似要素
他にも、:first-letter、:first-lineなどの擬似要素が検索すると出てきますが、はっきり言って私は使った事がなく（使う場面がほとんどない）、初心者の方はまず、before、afterのみをしっかり理解する方が大事だと思いますので、ここでは割愛します。
擬似要素はどのような時に使う？
皆さんの中で、このような疑問をもたれた方はいないでしょうか？
これじゃダメなんですか？
<p><span>やっぱり</span>今日は晴れです。</p>
beforeの例を題材にしましたが、はっきり言ってこれでも全く問題ありません。
じゃあ、なぜ擬似要素がいるの？となりそうですが、あくまで「こういう使い方もできる」くらいの感覚で良いと思います。擬似要素を使う事で、作業の効率化が測れる事もあるでしょう。
擬似要素のメリット
例えば、同じフレーズを同じように連続して入れたい時などは、擬似要素を利用すると便利だし、修正もとっても楽だと思います。
メリットかデメリットかの判断はできませんが、ブラウザ表示した際に文章のコピーができなくなります。テキストの文章をコピーされたくない時（どんな状況かは分かりませんが）には有効に働きますね。
擬似要素のデメリット
擬似要素は、目で見える情報であるにも関わらず、HTMLファイルには記述されていないので、時間が空いたり、第三者の作成したものを触る時などは、修正する際、調べる時間がかかってしまいます。
正直、修正に関して直感的ではなくなるので、個人的には擬似要素はあまり好きではありません。
擬似クラスとは？
擬似クラスとは、要素が指定した状態の時に適用させるCSSです。
こちらも、擬似的という表現がとても捉えずらくしているような気がしますので、簡単に、「特定状態限定のCSS」くらいで覚えておきましょう。
擬似クラスの使い方
擬似クラスで使えるものは決まっております。使用時は、セレクタの後ろに「：（コロン）」をつけます。
主要な擬似クラス
それでは、CSSで主要な擬似クラスを紹介します。
hover（ホバー）
hoverは、要素の上にマウスカーソルが乗っている状態の場合に指定のCSSを適用させる事ができます。hoverは、擬似クラスの中でも非常によく使います。
<p>今日は晴れです。</p>
p:hover{color: red}
何番目の（nth-child(数字)など）
状態というべきかは微妙なところではありますが、何番目の要素に対して指定のCSSを適用させる事ができます。
<div>
<p>今日は晴れです。</p>
<p>明日は雨です。</p>
<p>明後日は晴れて欲しいです。</p>
</div>
p:nth-child(3){ color:red; }
nth-child(数字)などのように、「何番目の」と指定できる擬似クラスも非常によく使います。詳しくは、以下の記事にまとめてありますので、そちらを参考にしてください。
-
「CSS」で、「最初の」「最後の」「何番目の」「奇数の」「偶数の」「指定した倍数の」等の記述方法
続きを見る
visited
visitedは、リンクタグをクリックした形跡があるものに対して指定のCSSを適用させる事ができます。
よく、訪問済みのリンク先の色が変わっているものを見たことはありませんか？それにあたります。
使用頻度としては、あまり高くはないと思いますが、第三者のページを触る際にその仕様にされていると厄介ですので、知識として知っておきましょう。
<p>今日晴れです。</p>
p:visited{color: red}
他の擬似クラス
この他にもたくさんの擬似クラスがあり、特に:activeなどはたまに使い、アコーディオンタブの切り替えなどに利用したりしますが、やや仕様が複雑になってくるので、今回は初心者向けのページとして、割愛させていただきます。
最後に
いかがでしたでしょうか？
CSSのセレクタに設定する擬似要素と擬似クラスを使いこなせるようになると、ワンランク制作スキルが上がったと思っていただいて良いと思います。
初心者の方は、:afterの回り込み解除、:hover、:nth-child(数字n)系なんかを、まずはしっかり使いこなせるようにしましょう！
