CSSの「:hover」で、Webサイトに命を吹き込もう！
こんにちは！フロントエンドの世界へようこそ。
CSSを学び始めると、最初は「文字の色を変える」とか「枠線を引く」といった静かな変化にワクワクしますよね。でも、Webサイトがもっと「生きている」ように感じられる瞬間があります。
そう、マウスを乗せた時にフワッと反応する、あの「仕掛け」です。
今回は、その魔法のスイッチ「:hover（ホバー）」について、一緒に紐解いていきましょう。難しいことは考えなくて大丈夫。身近な例えを交えて、優しく解説しますね。
—
1. `:hover` は「相手の目配せ」に気づくこと
想像してみてください。あなたは今、大きなおもちゃ屋さんでお買い物をしています。
たくさんの商品が並んでいますが、どれが「手に取れるもの」で、どれが「ただの飾り」なのか、迷うことはありませんか？
もし、あなたが手をかざした瞬間に、商品が「私を触っていいよ！」と少しだけ明るくなったり、フワッと浮き上がったりしたら……。それはとっても親切ですよね。
CSSの `:hover` も、これと全く同じ役割をしています。
- 「ポインティングデバイス（マウスなど）がその要素の上に重なった瞬間」
- 「CSSさん、ここをこう変えて！」
と、ブラウザに命令を出すための「合図」なんです。
—
2. さっそく書いてみよう！基本の書き方
CSSの記述には「ルール」がありますが、`:hover` はとてもシンプルです。
「対象の要素」の後ろに、半角のコロン（`:`）を置いて `hover` と書くだけ。
/ 普通の状態のボタン /
.my-button {
background-color: #3498db; / 青い背景 /
color: white; / 白い文字 /
transition: 0.3s; / これが「フワッ」とさせる秘密のコツ！ /
}
/ マウスが乗った時の状態 /
.my-button:hover {
background-color: #2980b9; / 少し濃い青に変える /
cursor: pointer; / マウスカーソルを「指の形」に変える /
}
ここがポイント！
コードの中に `transition`（トランジション）というプロパティを入れました。これがないと、色が一瞬で「パッ」と切り替わってしまい、少し機械的に見えてしまいます。
これを入れるだけで、変化が「フワッ」となめらかになり、プロっぽい仕上がりになります。ぜひ試してみてくださいね。
—
3. 初学者がつまずきやすい「落とし穴」
僕も駆け出しの頃によくやったのですが、`:hover` を使うときにはいくつか「お作法」があります。
「場所」は正しいかな？
`:hover` は、その要素に対して「マウスが乗っているとき」という条件を追加するものです。
例えば、ボタン全体ではなく「文字だけ」を変えたいなら、文字を囲んでいるタグに `:hover` を指定する必要があります。まずは「どの塊（要素）を動かしたいか」を意識してみてください。
スマホではどうなるの？
ここが一番の注意点です。スマホやタブレットには「マウス」がありませんよね。指でタップするデバイスでは、そもそも「ホバーしている状態」そのものが存在しない、ということを覚えておいてください。
「PCではホバーで可愛く動かして、スマホではタップした時に反応させる」という風に、デバイスによって体験を分けるのが、この世界のプロのたしなみです。
—
4. 最後に：CSSは「おもてなし」の心
CSSの `:hover` を使うことは、単なる装飾ではありません。
サイトを訪れてくれた人が「あ、ここをクリックできるんだ！」「今の反応、気持ちいいな」と感じてくれるような、デジタル空間における「おもてなし」なんです。
最初はうまくいかなくても大丈夫。コードを書いて、ブラウザで表示して、マウスを乗せてみる。その小さな繰り返しが、あなたを素晴らしいエンジニアに育ててくれます。
まずは、お気に入りのボタンやリンクに `:hover` を仕込んで、自分だけの小さな「魔法」を楽しんでみてくださいね。応援しています！
コメント