【6日でできるHTML＆CSS入門】擬似クラス
Webページのデザインや動きを細かくコントロールしたいときに欠かせないのが「擬似クラス（ぎじクラス、pseudo-class）」です。
擬似クラスは、HTMLのタグやクラス名だけでは指定できない「特定の状態やタイミング」に対してスタイルを適用できる、とても便利なCSSの機能です。
たとえば、リンクにマウスを乗せたときだけ色を変えたり、フォームの入力欄がフォーカスされた時に強調したり――こうした効果は擬似クラスによって実現されています。
１．擬似クラスとは
1.1. 擬似クラスの基本と主な用途
擬似クラスとは、要素の状態や条件、位置などに応じてCSSのスタイルを追加するための特別な記法です。
セレクタ名の後ろに「:コロン」と名前（例: :hover）を付けて使います。
| 擬似クラス | 主な用途 | 書き方の例 |
|---|---|---|
| :hover | マウスを乗せたときのスタイル | a:hover |
| :active | 要素がアクティブなとき | button:active |
| :focus | 入力欄がフォーカスされたとき | input:focus |
| :visited | リンクが訪問済みのとき | a:visited |
| :first-child | 最初の子要素だけに適用 | li:first-child |
1.2. 擬似クラスのサンプル
ファイル名： lesson35_1.html（hoverで色が変わる例）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>擬似クラスのサンプル</title>
<style>
.sample-btn {
padding: 10px 24px;
background: #f5f5f5;
border: 2px solid #90caf9;
color: #1565c0;
font-size: 1.08em;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.sample-btn:hover {
background: #bbdefb;
color: #0d47a1;
}
</style>
</head>
<body>
<button class="sample-btn">マウスを乗せてみてください</button>
</body>
</html>表示結果
ボタンにマウスを乗せると背景色が淡い青に変化します。
２．主な擬似クラスとその特徴
2.1. よく使われる擬似クラス一覧
| 擬似クラス | 概要（説明） |
|---|---|
| :hover | マウスを要素上に乗せたときに適用 |
| :active | クリックやアクティブ状態の時に適用 |
| :focus | 入力欄が選択・フォーカスされた時に適用 |
| :visited | リンクがすでに訪問済みの場合に適用 |
| :first-child | 親要素の最初の子要素に適用 |
| :last-child | 親要素の最後の子要素に適用 |
| :nth-child() | 親要素内のn番目の子要素に適用 |
| :not() | 特定の条件を除外してスタイルを当てる。 |
コード例：liタグの最初と最後だけ色分け
li:first-child { color: #388e3c; }
li:last-child { color: #e53935; }2.2. after/beforeによる「疑似要素」
::afterや::beforeは、要素の前後に仮想的なコンテンツを挿入できる「擬似要素」です。
厳密には「擬似クラス」とは異なりますが、使い方や記法はよく似ています。
| 擬似要素 | 概要 |
|---|---|
| ::before | 要素の先頭に内容を追加 |
| ::after | 要素の末尾に内容を追加 |
ファイル名： lesson35_2.html（afterでアイコン追加）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>擬似要素 after のサンプル</title>
<style>
.info-text::after {
content: " 🔔";
color: #ff9800;
font-size: 1.1em;
}
</style>
</head>
<body>
<span class="info-text">通知があります</span>
</body>
</html>表示結果
「通知があります🔔」のように、要素の末尾にアイコンが付きます。
３．擬似クラス・擬似要素で使う主なCSSプロパティ
3.1. contentプロパティ
- 擬似要素（::before, ::after）で挿入する内容を指定します。
- テキストや画像（url）、空文字列（""）などを設定。
3.2. displayプロパティ
- 擬似要素の表示方法を指定。
blockやinlineを使い分けてレイアウト調整。
3.3. ブロック要素とインライン要素
| 要素分類 | 主なタグ例 | 特徴 |
|---|---|---|
| ブロック要素 | <div>, <p>, <ul>, <h1>など | 改行されて1つの塊として表示 |
| インライン要素 | <span>, <a>, <strong>, <img>など | 文章の一部として表示、改行されない |
４．よく使うタグ・CSSプロパティまとめ
| タグ・プロパティ | 説明 |
|---|---|
<a>, <li>, <button>, <span> | 擬似クラスや擬似要素によく利用されるHTML要素 |
:hover, :active, :focus, :visited | ユーザー操作・状態を指定する擬似クラス |
:first-child, :last-child, :nth-child() | 配置・位置で指定する擬似クラス |
::before, ::after | 前後に仮想的な内容を追加する擬似要素 |
content | 挿入する内容の指定（擬似要素で使用） |
display | ブロック/インライン要素の切り替え |
まとめ
擬似クラスや擬似要素を使いこなすことで、タグやクラス名だけでは表現できない「状態」や「タイミング」で柔軟なデザインが可能になります。
ボタンやリンクの動的な演出、リストの装飾、通知やマーカーなど多彩な表現に欠かせないテクニックです。
CSS設計の基礎知識として、ぜひ積極的に活用していきましょう。