(Sample)
今回は、新人エンジニアの方に向けて、HTMLとCSSの基本である「label:hover」という記述について、丁寧にわかりやすく解説していきます。
「hover（ホバー）」という言葉、どこかで見たことがありますか？
もし「マウスを上に置いたときの効果」と聞いてピンときたら、もう半分理解できていますよ！
「label:hover」ってなに？
基本の意味
label:hover は CSS（Cascading Style Sheets） における疑似クラス（pseudo-class）の一つです。
これは、「マウスポインタが <label> タグの上にあるときに適用されるスタイル」を定義します。
疑似クラスとは？
疑似クラスというのは、「ある特定の状態のときだけ、特定の見た目を適用したい」というときに使うCSSの機能です。
たとえば：
:hover→ マウスが乗ったとき:focus→ キーボードで選択されたとき:active→ クリックしている間
まるで「もしも〇〇だったら〜する」という条件付きの見た目設定、と考えてみてください。
実際のコードを見てみよう
まずは、以下のようなHTMLとCSSのコードを見てみましょう。
<style>
label:hover {
background-color: lightcyan;
}
</style>
このコードは何をしているでしょうか？
ポイントはここ！
label:hover：マウスが<label>の上にあるときbackground-color: lightcyan;：背景色を水色（ライトシアン）に変える
つまり、マウスをラベルの上に持っていくと、そのラベルの背景色が変わる、という視覚的な効果がつきます。
なぜ便利なの？
視覚的なフィードバックを与える
ユーザーがどこをクリックしようとしているのか、どこに注目しているのかを色の変化で知らせることができます。
たとえば、以下のようにマウスが当たったときにラベルが色づくと、クリックできる要素であることが直感的に伝わります。
例えで言うと…
「ドアノブに手を近づけたらドアが光る」と思ってみてください。
それだけで「あ、ここ触っていいんだな」とわかりますよね。
実際のサンプルHTML
こちらがあなたが示してくれたコードの全体像です：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label.html</title>
<style>
label:hover {
background-color: lightcyan;
}
</style>
</head>
<body>
<form>
<input type="radio" value="1" name="r" id="1"><label for="1">ラジオボタン1のラベル</label><br>
<input type="radio" value="2" name="r" id="2"><label for="2">ラジオボタン2のラベル</label><br>
<input type="radio" value="3" name="r" id="3"><label for="3">ラジオボタン3のラベル</label><br>
</form>
</body>
</html>
実行結果はこうなる！
- 各ラジオボタンに対応するラベルがあります。
- マウスをラベルの上に持っていくと、背景が水色に変わります。
これにより、ユーザーは「ここに注目すればいいんだな」と自然にわかるようになります。
よくある疑問
Q. labelって何のためにあるの？
<label> タグは、フォームの入力要素（inputなど）に説明をつけるためのタグです。
たとえば、ラジオボタンが3つあったとしても、ラベルがないと何を意味しているのかユーザーに伝わりません。
また、<label for="1"> と id="1" のように関連づけることで、ラベルをクリックするだけでボタンも選択されるという便利な機能もあります！
メリットとデメリット
| メリット | デメリット |
|---|---|
| ユーザーに優しい操作性が提供できる | スタイルが多くなると管理が大変になる |
| 視覚的フィードバックで直感的に操作できる | タッチデバイスではhoverが使えないことも |
| CSSだけで実装できるので軽量 | labelの構造が複雑だと適用範囲に注意が必要 |
まとめと次のステップ
label:hover は、フォームの操作性と見た目の両方を改善するために使える、非常にシンプルかつ効果的なCSS技術です。
初めてCSSに触れる方も、このような疑似クラスを使って「ユーザーにやさしいUI」をつくっていけます。
今後の学習の指針
次はこんな疑似クラスにも挑戦してみましょう！
input:checked：チェックされた状態のスタイル変更button:hover：ボタンのホバー効果label:focus-within：ラベルの中にフォーカスがあるときのスタイル
また、transition を組み合わせてアニメーション風の効果をつけると、さらにリッチな体験になりますよ！