疑似クラス(:hover)でインタラクションを追加

このレッスンでは、:hoverなどの疑似クラスを使ったインタラクションの追加方法を学び、JavaScriptなしでボタンの動きを作れるようになることを目標にします。「CSS hover 使い方」で調べている方向けです。

疑似クラスは、「マウスが乗っているとき」のような特定の状態にだけスタイルを適用できる仕組みです。:hoverはマウスが要素に乗っているとき、:focusは入力欄が選択されているときに使われます。

サンプルコードでは、.btnに通常の背景色を、.btn:hoverにマウスが乗ったときの背景色を指定し、transitionで色の変化をなめらかにしています。実際にマウスを要素の上に乗せてみると、色がふわっと切り替わる様子を確認できます。

初心者がよくつまずくのが、:hoverと組み合わせるtransitionを、通常の状態(.btn)側に指定する必要がある点です。:hoverの側にtransitionを書いてしまうと、マウスを離すときのアニメーションだけがなめらかにならないという不自然な動きになります。

ボタンにマウスを乗せると色が変わる、といった動きはJavaScriptを使わなくてもCSSだけで実現できます。ユーザーに「ここはクリックできますよ」と伝える視覚的なフィードバックとして、Webサイトのボタンで広く使われているテクニックです。