HPBUILD

Webサイトでよく見かける、「マウスを乗せたときに色が変わる」「画像がふんわり拡大する」といった演出。これらは、CSSの:hover（ホバー）という仕組みを使えば簡単に実装できます。 JavaScriptを使わずに、HTMLとCSSだけで視覚的な変化を加えることで、ユーザーの操作感を高めたり、クリック誘導率（CTR）をアップさせたりすることが可能です。 今回は、初心者でもわかりやすいように、:hoverの基本から応用まで、ステップごとに解説します。 :hoverとは？ :hoverは、CSSで使える疑似クラスの1つで、「ユーザーが要素にマウスカーソルを重ねた時」にスタイルを変更できる機能です。 主に以下のような場面で利用されます： ボタンの色を変える 画像を拡大・回転させる リンクテキストに下線やアニメーションを加える これにより、Webページ全体にインタラクティブな印象を与えることができます。 基本的な使い方（背景色の変化） まずは最も基本的な例として、リンクボタンの背景色をマウスホバー時に変更する方法を紹介します。 コピー <a href="#" class="btn">マウスを乗せてね</a> コピー .btn { display: inline-block; background: #3498db; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px; transition: background 0.3s; } .btn:hover { background: #2980b9; /* ホバー時の色 */ } transitionプロパティを使うことで、色の変化がスムーズに見えるようになり、ユーザー体験も向上します。 画像を拡大させるアニメーション 次に紹介するのは、画像をhoverで少しだけ拡大するアニメーションです。ギャラリーや商品画像の演出にも活用できます。 コピー <img src="sample.jpg" class="zoom" alt="画像拡大例"> コピー .zoom { transition: transform 0.3s ease; } .zoom:hover { transform: scale(1.1); /* 1.1倍に拡大 */ } transformとtransitionを組み合わせることで、視覚的な印象が自然でやわらかくなります。 透明度でフェード効果をつける リンクやボタンをホバーしたときに、少し透明にすることで、「押せそうな雰囲気」を演出できます。 コピー .fade:hover { opacity: 0.6; transition: opacity 0.3s; } このようにすることで、クリック可能な要素であることを直感的にユーザーに伝えることができます。 hoverの注意点とベストプラクティス スマートフォンなどのタッチデバイスでは:hoverが効かないこともある 目立たせたい要素（CTAボタンなど）には必ずhover効果を付けるのが◎ transitionで自然な動きを加えるとユーザーにとってやさしい おわりに :hoverは、CSSの中でも基本かつ強力な機能の一つです。マウスを乗せたときの見た目の変化だけでなく、ユーザーの視線誘導や操作性の向上にもつながります。 今回紹介した基本例（背景色変更・拡大・透明化）をベースに、アニメーションやレスポンシブ対応などの応用もぜひ挑戦してみてください。 次回は「クリック時に動作を変える:activeの使い方」や「CSSアニメーションとの組み合わせ」など、もう一歩進んだ活用法をご紹介予定です！