このページでは、CSSを学び続けていく中で、徐々に耳にするようになる疑似クラスについて解説します。
疑似クラスは、CSSのセレクタに付与するキーワードで、このキーワードが付与されたセレクタは、ある特定の状態の「要素」を指し示すようになります。
このページでは、疑似クラスとは何か？を解説しつつ、よく使われる疑似セレクタを紹介していきます。
- 【おさらい】CSSのセレクタとは何か？ ―詳細を解説したページへのリンクあり
- 【おさらい】HTMLの要素とは何か？ ―詳細を解説したページへのリンクあり
- 疑似クラスとは何か？
- よく使われる疑似クラス
- 疑似クラスを用いたCSSのサンプルコードと処理内容について
CSSを用いて様々なデザインを実現するために役立つ知識ですので、是非最後までご覧ください。
【CSS】セレクタとは何か？
疑似クラスを理解するために必須となるCSSの前提知識「セレクタ」をおさらいします。
セレクタ（Selecter）とは、デザインを適用する対象を指定するものです。HTMLで構造化された文章の「どの部分のデザインを変えたいのか？」を表すのがセレクタです。
下記の例で言えば、セレクタは「body」―。つまり、以下のCSSではHTMLの「body」タグを装飾する例です。
CSSでは、セレクタで指示したHTMLの構造を「何を」「どのようなデザインに変更するか」を指定することで様々なデザインの変更を実現する仕組みを持っています。
CSSをより詳しく、基本から知りたいという方は、以下のページをご覧ください。
【HTML】要素とは何か？
HTMLの「要素」についてもおさらいしておきます。
HTMLの「要素」は、「HTMLのタグ」と「タグで囲まれた部分」を合わせて呼称したものです。
CSSのセレクタで指示された場合は、要素全体のデザインが変更されます。
疑似クラスを本質的に理解するためには、CSSのセレクタとHTMLの要素の理解が必須となりますので、ここでしっかりと復習しておきましょう。（HTMLの基本についてさらに詳しく知りたいという方は、以下の記事をご覧ください。）
疑似クラスとは何か？
疑似クラスはセレクタの一種です。セレクタと同様にCSSでデザインの対象を指定する役割を担います。ただし普通のセレクタとは異なるのは、この疑似クラスが指し示す要素は「ある特定の状態」を持っている場合に限るということです。
どういうことか、疑似クラス「hover」を例に説明していきたいと思います。
疑似クラス「hover」は、対象の要素が「マウスが合わせられた状態」である場合を指し示す役割を持ちます。
まずは、疑似クラス「hover」を用いない場合にhタグを装飾する例を見てみましょう。
<head>
<style>
h2{
color:red
}
</style>
</head>
<body>
<h2>サンプルテキスト</h2>
</body>ブラウザで表示した結果
ご覧のように、CSSで指定した通り文字が赤色で表示されました。
では、hover「マウスが当てられた時の要素」という疑似クラスを用いた場合を見てみましょう。
<head>
<style>
h2:hover{
color:red
}
</style>
</head>
<body>
<h2>サンプルテキスト</h2>
</body>ブラウザで表示した結果
ご覧のように、赤で表示されていません。ですが、疑似クラス「hover」を指定したため、マウスを当てると赤に変化するようになっています。
実際に、以下の２つのテキストにマウスを当てて動作を確認してみましょう。
マウスホバーしても色は変わりません
マウスホバーをすると色が変わります
このように、疑似クラスを使うことで特定のセレクタの「マウスホバー（マウスが重ねられた状態）」を表すことができるようになります。
「hover」の他にも、様々な疑似クラスがたくさんあります。ここからはより実践的に疑似クラスの構文ルールと、代表的（よく使われる）な疑似クラスの紹介をしていきます。
疑似クラス：構文ルール
疑似クラスは、セレクタに「：（コロン）」を付けて記述するだけです。
よく使われる疑似クラス
ここからは、よく使われる疑似クラスをいくつか紹介していきます。一つひとつサンプルコードを付けますので、疑似クラスの役割について理解を深めていってください。
:hover（マウスがホバーした状態）
先ほど例に挙げた通り、指定した要素がマウスホバーされた状態を表します。
<head>
<style>
p:hover{
color:red
}
</style>
</head>
<body>
<p>サンプルテキスト（マウスホバーの確認）</p>
</body>サンプルテキスト（マウスホバーの確認）
:active（アクティブ化された状態）
「:active」は指定した要素がアクティブ化されている状態を表します。
アクティブ化とは、対象の要素が選択されている状態を表します。試しに対象のテキストを右クリックしてみてください。
<head>
<style>
p:active{
color:red
}
</style>
</head>
<body>
<p>サンプルテキスト（アクティブの確認）</p>
</body>サンプルテキスト（アクティブの確認）
:link（リンク先が未訪問の状態）
指定した要素（リンクーaタグ）が未訪問の状態を表します。
一度でもリンク先に遷移した場合、「:link」の対象ではなくなります。
<head>
<style>
a:link{
color:red
}
</style>
</head>
<body>
<a href="https://it-biz.online/" >ビズドットオンライン</a>
</body>ビズドットオンライン
リンクタグ（aタグ）については、以下の記事をご覧ください。
:visited（リンク先に訪問済の状態）
「:link」と対をなす疑似クラスです。「:visited」で、リンク先に訪問済の状態を表します。
<head>
<style>
a:visited{
color:red
}
</style>
</head>
<body>
<a href="https://it-biz.online/" >ビズドットオンライン</a>
</body>ビズドットオンライン
HTML/CSSを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
