CSSの擬似クラス :hover, :active, :focus を完全ガイド！初心者でもわかる使い方
生徒
「ボタンにマウスを乗せた時とか、クリックした時に色が変わるようにしたいんですが、どうしたらいいですか？」
先生
「そのような動きは、CSSの擬似クラス（ぎじクラス）という機能を使うと簡単にできますよ。」
生徒
「擬似クラスって何ですか？初めて聞きました…」
先生
「では、初心者の方にもわかるように、:hover, :active, :focus の3つの基本を一緒に学んでいきましょう！」
1. CSSの擬似クラスとは何か？
CSSの擬似クラスとは、HTMLのタグに特定の状況でスタイルを適用するための機能です。たとえば、「マウスが乗ったとき」や「クリックしたとき」などです。
"擬似（ぎじ）"というのは「一時的な」や「仮の」という意味で、タグ自体にクラス名が付いていなくても、特定の動きや状態のときだけCSSを適用することができます。
2. :hover（ホバー）の使い方
:hover（ホバー）は、マウスカーソルが要素の上に乗ったときにスタイルを変えることができます。たとえば、ボタンにマウスを当てたときに色が変わるように設定できます。
<style>
button {
background-color: gray;
color: white;
padding: 10px 20px;
border: none;
}
button:hover {
background-color: green;
}
</style>
<button>ホバーボタン</button>
3. :active（アクティブ）の使い方
:active（アクティブ）は、ボタンなどをクリックしている間（押している瞬間）にスタイルを変えることができます。クリック中だけ色が変わるなどの演出が可能です。
<style>
button {
background-color: gray;
color: white;
padding: 10px 20px;
border: none;
}
button:active {
background-color: red;
}
</style>
<button>アクティブボタン</button>
4. :focus（フォーカス）の使い方
:focus（フォーカス）は、フォームの入力欄などで、カーソルが入ったとき（選択された状態）にスタイルを変えることができます。ユーザーが入力しやすいように強調できます。
<style>
input[type="text"] {
border: 2px solid gray;
padding: 5px;
}
input[type="text"]:focus {
border: 2px solid blue;
background-color: #eef;
}
</style>
<input type="text" placeholder="ここに入力してください">
5. 擬似クラスを組み合わせて使う
:hover や :active を一緒に使うことで、より複雑なボタンのデザインもできます。たとえば、通常時とホバー時、アクティブ時でそれぞれ色を変えることで、視覚的に分かりやすい操作が可能になります。
<style>
button {
background-color: gray;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
button:hover {
background-color: blue;
}
button:active {
background-color: navy;
}
</style>
<button>複合ボタン</button>
6. スマホやタブレットでの擬似クラスの動作
スマートフォンやタブレットでは、マウスがないため :hover の動作は一部異なります。タッチされたときに一度だけ :hover 状態になることもありますが、すぐに解除される場合もあります。
:focus は入力欄で動作しやすく、フォームデザインにおいて重要です。:active はタップした瞬間に動くため、スマホ用のボタンにもよく使われます。
7. CSS擬似クラスの注意点と便利な使い方
擬似クラスは便利ですが、書く順番に注意が必要です。たとえば、:hover と :active を両方使うとき、どちらが上に書かれているかで表示が変わることがあります。
また、transition（トランジション）というプロパティを使うと、色の変化をなめらかに表示できます。視覚的な効果を高めたいときに便利です。
まとめ
ここまでで、CSSの擬似クラスである:hover、:active、:focusを使うことで、ボタンやリンク、入力フォームなどの見た目と操作感を細かくコントロールできることを学びました。単に色や背景色を変えるだけではなく、「マウスを乗せたとき」「クリックしている瞬間」「入力欄を選択しているとき」といったユーザーの操作や状態に合わせてスタイルを切り替えることで、わかりやすく直感的なインターフェースを作ることができます。特に、ボタンに:hoverを設定しておくと、「ここは押せる場所ですよ」という視覚的な案内になり、:activeを使えば押し込まれたような感覚を視覚的に表現できるため、ユーザーの操作に対する反応が伝わりやすくなります。また、:focusを入力フォームに設定することで、現在どの項目に入力しようとしているのかを強調でき、フォーム入力のストレスを軽減することにもつながります。
擬似クラスは、HTMLのタグやクラスに直接新しい属性を追加しなくても、「状態」に応じてスタイルを切り替えられる点が大きな魅力です。たとえば、buttonタグ、aタグ、inputタグなどに対して、通常時の見た目を整えたうえで、:hover、:active、:focusを組み合わせることで、ひとつのボタンに「通常」「マウスオーバー」「クリック中」「フォーカス中」といういくつもの表情を与えることができます。特に最近はスマートフォンやタブレットからのアクセスも多いため、タップしたときの反応を:activeでわかりやすく表現しておくことは、ユーザー体験の向上という意味でも重要です。フォーム入力でも、:focusで枠線の色や背景色を少し変えるだけで、ユーザーがどこに入力すればよいかを直感的に理解できるようになり、離脱防止や入力ミスの軽減にも役立ちます。
また、擬似クラスとtransitionプロパティを組み合わせることで、色の変化や背景色の切り替えをなめらかに見せるテクニックも非常に有効です。ボタンに対してbackground-colorやcolorを変更するだけでなく、transitionで変化に時間を持たせることで、ふわっと色が変わるような柔らかい演出が可能になります。こうした小さなアニメーションは、ユーザーに「ちゃんと反応している」という安心感を与えると同時に、サイト全体の印象を洗練されたものにしてくれます。擬似クラスは難しいものではなく、セレクタに「:hover」「:active」「:focus」と付け加えるだけで使えるため、初心者でも一歩ずつ試しながら身につけやすい機能です。最初は簡単な色変更から始めて、慣れてきたら影や枠線、フォントサイズ、アニメーションなども組み合わせていくと、ボタンやリンクのデザインの幅が大きく広がります。
さらに、CSSの擬似クラスはアクセシビリティの観点からも重要です。キーボード操作でフォームを移動するユーザーにとって、:focusによる視覚的な強調は、自分が今どこを操作しているのかを知るための大切な手がかりになります。:hoverだけに頼ってしまうと、マウスを使わないユーザーには変化が伝わらないこともあるため、:focusを併用しておくことが望ましい設計です。このように、擬似クラス:hover、:active、:focusは、ボタン、リンク、フォームなどあらゆるインタラクティブな要素で活躍する基本テクニックであり、どのようなWebサイトを作る場合でも知っておいて損のない基礎知識と言えます。以下のサンプルコードでは、この記事で学んだポイントをまとめて確認できるように、ボタンと入力フォームの両方に擬似クラスを設定した例を載せていますので、自分の環境でも試しながら理解を深めてみてください。
ボタンとフォームに擬似クラスをまとめて適用するサンプルコード
<style>
button.demo-btn {
background-color: #555;
color: #fff;
padding: 10px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
button.demo-btn:hover {
background-color: #007bff;
}
button.demo-btn:active {
background-color: #0056b3;
transform: translateY(1px);
}
input.demo-input {
border: 2px solid #aaa;
padding: 6px 10px;
border-radius: 4px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
input.demo-input:focus {
border-color: #28a745;
background-color: #f5fff7;
box-shadow: 0 0 4px rgba(40, 167, 69, 0.5);
}
</style>
<h3>擬似クラスをまとめて試せるデモ</h3>
<button class="demo-btn">擬似クラス付きボタン</button>
<br><br>
<input class="demo-input" type="text" placeholder="フォーカス時の変化を確認してください">
生徒
「きょうの記事で、:hover、:active、:focusがそれぞれマウスオーバー、クリック中、フォーカス中の状態を表していることがよくわかりました。今まではなんとなくボタンの色が変わる仕組みだと思っていたのですが、ちゃんと意味のある状態ごとのスタイルなんですね。」
先生
「そうですね。擬似クラスは見た目を変えるだけではなく、『どのタイミングでそのスタイルを適用するか』を明確に表現できるのがポイントです。ボタンやリンク、入力フォームに対して、ユーザーの操作に応じて反応させることで、安心感や操作しやすさが生まれます。」
生徒
「サンプルコードで、通常時、ホバー時、アクティブ時、フォーカス時の見た目が全部違っていて、とてもイメージしやすかったです。特に、クリックした瞬間に少しだけボタンが沈むように見えるtransformの指定が、実際の押し込み感に近くて気に入りました。」
先生
「あのような小さな動きは、ユーザーにとって『ちゃんと反応している』という感覚を与えてくれます。transitionを一緒に設定しておくと、:hoverで色がふわっと変わったり、:activeで素早く反応したりして、見た目の印象もぐっとよくなります。」
生徒
「フォーム入力での:focusも大事だと感じました。今までは、どこにカーソルがあるのか分かりにくいフォームもよく見かけたのですが、枠線の色や背景色を変えるだけで『いまここに入力しています』というのがすぐに分かりますね。」
先生
「その通りです。キーボードで操作するユーザーや、画面をじっくり見て入力するユーザーにとって、:focusは非常に重要な手がかりになります。:hoverに頼りすぎず、:focusもしっかり設定しておくことで、誰にとっても使いやすいフォームになります。」
生徒
「これからは、ボタンを作るときに背景色だけを決めるのではなく、:hoverや:activeもセットで考えてデザインしようと思います。フォームも:focusを入れて、どの項目が選択されているのか分かりやすくしたいです。」
先生
「とても良い考え方ですね。擬似クラスはCSSの基礎の中でも、ユーザー体験を大きく変えられる重要な要素です。今回学んだ:hover、:active、:focusをしっかり身につけておけば、さまざまなWebサイトでボタンやリンク、フォームのデザインを工夫できるようになりますよ。」
生徒
「はい、さっそく自分の練習用ページに今日のサンプルコードを貼り付けて、色やサイズ、transitionの値などを変えながら試してみます。擬似クラスを使いこなして、見た目も使い勝手も良いボタンやフォームを作れるようになりたいです。」
先生
「ぜひたくさん手を動かして試してみてください。実際にホバーさせたりクリックしたりしながら調整していくうちに、ユーザーにとって心地よい反応がどのあたりなのか、自分なりの感覚が少しずつ身についていきますよ。」
この記事を読んだ人からの質問
