CSSの擬似クラスを徹底解説！hoverやfocusで動くホームページ作成

1. 擬似クラスとは何かの基本を知ろう

1. 擬似クラスとは何かの基本を知ろう

擬似クラス（ぎじくらす）とは、ＨＴＭＬの要素が「特定の状態」になった時だけ、ＣＳＳのデザインを適用させるための仕組みです。例えば、ただのボタンではなく「マウスがのっている状態のボタン」や、入力欄をクリックして「文字を打てる状態の入力欄」といった、タイミングに合わせたデザイン変更ができます。

通常、ＣＳＳは「この文字を赤くする」という固定のデザインを指示しますが、擬似クラスを使うと「もしマウスがのったら青くする」という条件付きの指示が可能になります。これにより、ホームページを閲覧しているユーザーの操作に反応する、インタラクティブ（対話型）で使いやすいサイトを作ることができるようになります。パソコンを触り始めたばかりの方でも、仕組みさえ分かればすぐに使いこなせるようになりますよ。

2. マウスをのせた時に反応するｈｏｖｅｒの使い方

2. マウスをのせた時に反応するｈｏｖｅｒの使い方

擬似クラスの中で最も有名で、頻繁に使われるのが「ｈｏｖｅｒ（ホバー）」です。これは、パソコンのマウスカーソル（画面上で動く矢印）を、ボタンやリンクなどの要素の上に重ねた瞬間にデザインを切り替える命令です。

書き方はとても簡単で、デザインしたい対象の名前のすぐ後ろに、コロン（：）をつけて「ｈｏｖｅｒ」と書くだけです。これだけで、ユーザーがどこを操作しようとしているのかが視覚的に伝わるようになります。スマホの場合は指で触れた瞬間に反応することが多いです。まずはボタンの色を変えるサンプルで試してみましょう。

<style>
	.sample-button {
	    background-color: #0d6efd;
	    color: white;
	    padding: 10px 20px;
	    border: none;
	    border-radius: 5px;
	    transition: 0.3s; /* 変化をなめらかにする */
	}

	/* マウスをのせた時のデザイン */
	.sample-button:hover {
	    background-color: #003366;
	    cursor: pointer;
	}
</style>

<button class="sample-button">
	マウスをのせてみて！
</button>

3. 入力欄に注目した時に役立つｆｏｃｕｓの使い方

3. 入力欄に注目した時に役立つｆｏｃｕｓの使い方

次に覚えたいのが「ｆｏｃｕｓ（フォーカス）」です。これは、入力フォームなどで文字を打ち込むためにクリックされた状態や、キーボード操作で選択された状態を指します。お問い合わせフォームなどで「今、どの項目を入力しているか」を分かりやすくするために欠かせない設定です。

プログラミング未経験の方にとって、フォームの入力は少し面倒に感じる作業かもしれませんが、ｆｏｃｕｓを使って入力中の枠の色を変えたり、太くしたりすることで、ユーザーの入力ミスを減らすことができます。これを「アクセシビリティ（使いやすさ）」の向上と言います。細かい気配りが、良いホームページには欠かせません。

<style>
	.input-field {
	    width: 250px;
	    padding: 8px;
	    border: 2px solid #ccc;
	    outline: none; /* 標準の青い枠線を消す */
	}

	/* クリックして入力状態になった時 */
	.input-field:focus {
	    border-color: #198754;
	    background-color: #e2f3eb;
	}
</style>

<div class="p-3">
	<label>お名前：</label>
	<input type="text" class="input-field" placeholder="ここをクリックしてね">
</div>

4. クリックした瞬間だけ反応するａｃｔｉｖｅの使い方

4. クリックした瞬間だけ反応するａｃｔｉｖｅの使い方

「ａｃｔｉｖｅ（アクティブ）」は、マウスでクリックして指を離すまでの、ほんの一瞬の状態を指します。ボタンを押し込んだような感覚を出すために使われます。実物のスイッチを押した時のような「カチッ」とした手応えを画面上で表現できるので、ユーザーにとって心地よい操作感を生み出します。

先ほど紹介したｈｏｖｅｒと組み合わせて使うことが多いです。「マウスをのせて色が変わる（ｈｏｖｅｒ）」「クリックすると少し沈む（ａｃｔｉｖｅ）」という二段階の変化をつけることで、非常にリアルなボタンが出来上がります。初心者のうちは、この複数の状態を組み合わせる練習をしてみると、ＣＳＳの理解がぐんと深まります。

5. リンクの訪問済みを確認するｖｉｓｉｔｅｄの使い方

5. リンクの訪問済みを確認するｖｉｓｉｔｅｄの使い方

「ｖｉｓｉｔｅｄ（ビジテッド）」は、インターネットで検索をしている時によく見かける機能です。一度クリックして読んだことがあるサイトのリンクだけ、文字の色が変わっていることがありますよね？あれがｖｉｓｉｔｅｄの力です。

ユーザーがどのページを読んだのかを一目で判断できるようにすることは、サイト内を回遊してもらうために重要です。ただし、プライバシーの観点から、ｖｉｓｉｔｅｄで変更できるのは「色」など一部のスタイルに限定されています。何気なく使っている機能ですが、実はこのような擬似クラスが裏側で働いているのです。

6. 画像をマウスオーバーでズームさせる演出

6. 画像をマウスオーバーでズームさせる演出

擬似クラスは文字やボタンだけでなく、画像にも使えます。例えば、写真の上にマウスをのせた時に、画像が少しだけ大きくなるような演出です。これはネットショップの商品一覧などでよく使われるテクニックで、商品に興味を持ってもらうための工夫の一つです。

この時、画像の枠からはみ出さないように設定を工夫すると、非常に綺麗に見えます。ここでは「ｔｒａｎｓｆｏｒｍ」という命令と「ｈｏｖｅｒ」を組み合わせます。画像の一部が強調されることで、より動的な印象を与えることができます。

<style>
	.image-container {
	    width: 200px;
	    height: 150px;
	    overflow: hidden; /* はみ出しを隠す */
	    border-radius: 10px;
	}

	.zoom-img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    transition: 0.5s;
	}

	/* マウスをのせた時に拡大 */
	.zoom-img:hover {
	    transform: scale(1.2);
	}
</style>

<div class="image-container shadow">
	<img src="/img/sample150-100.jpg" class="zoom-img">
</div>
<p>画像の上にマウスを移動してみて！</p>

7. リストの特定番目だけを指定するｎｔｈ－ｃｈｉｌｄ

7. リストの特定番目だけを指定するｎｔｈ－ｃｈｉｌｄ

擬似クラスには、状態だけでなく「場所」を指定できるものもあります。その代表が「ｎｔｈ－ｃｈｉｌｄ（バース・チャイルド）」です。例えば、表形式のリストで「２番目の項目だけ色をつけたい」とか「奇数番目だけ背景をグレーにしたい」といった場合に活躍します。

これを使えば、一つ一つのＨＴＭＬタグに名前をつけなくても、自動的に順番を数えてデザインを当ててくれます。特に、たくさんのデータが並ぶ一覧画面では、一行おきに色を変えることで、目が疲れにくく読みやすいデザインを簡単に作ることができます。これを「シマシマ（ゼブラ）デザイン」などと呼んだりします。

<style>
	.list-group {
	    list-style: none;
	    padding: 0;
	}

	.list-item {
	    padding: 10px;
	    border-bottom: 1px solid #ddd;
	}

	/* 奇数（odd）番目の項目だけ背景色をつける */
	.list-item:nth-child(odd) {
	    background-color: #f9f9f9;
	}

	/* マウスをのせた行を強調する */
	.list-item:hover {
	    background-color: #fff3cd;
	}
</style>

<ul class="list-group border rounded">
	<li class="list-item">1番目のデータ</li>
	<li class="list-item">2番目のデータ</li>
	<li class="list-item">3番目のデータ</li>
	<li class="list-item">4番目のデータ</li>
</ul>

8. 擬似クラスを使う時の注意点とコツ

8. 擬似クラスを使う時の注意点とコツ

擬似クラスを使いこなすために大切なのは、記述の「順番」です。例えば、同じ要素に複数の擬似クラスを設定する場合、基本的には「リンクの状態（ｌｉｎｋ、ｖｉｓｉｔｅｄ）」→「操作の状態（ｈｏｖｅｒ、ａｃｔｉｖｅ）」の順で書くのがルールとなっています。これを守らないと、後から書いたデザインに上書きされて、思った通りに動かないことがあります。

また、擬似クラスは「：」一つで書きますが、似たような言葉に「：：」と二つ重ねる擬似要素というものもあります。初心者のうちは間違えやすいですが、擬似クラスはあくまで「要素の状態」を指すものだと覚えておきましょう。まずは最も便利なｈｏｖｅｒから使い始めて、少しずつバリエーションを増やしていくのが、挫折せずにプログラミングを続けるコツです。色々なサイトの動きを見て、どんな擬似クラスが使われているか想像してみるのも楽しいですよ！