目次
hoverとは何か
hover（ホバー）とは、ユーザーがマウスカーソルを要素の上に乗せた状態のことです。CSSでは擬似クラスの一つである:hoverを使うことで、カーソルを重ねた時にスタイルを変化させることができます。
hoverは、ボタン、リンク、画像、カードなどほとんどの要素で利用され、ユーザーが操作していることを視覚的に伝えるために重要な役割を果たします。
hoverを使うメリット
hoverを設定することで得られる効果は以下のとおりです。
明確なフィードバックを与えられる
ユーザーがどの要素に触れているのかがわかりやすくなります。
操作性と視認性が向上する
ボタンが動く、色が変わるなどの変化によって、クリック可能な要素だと直感的に理解できます。
デザイン性が上がる
画像のズーム、カードの浮き上がりなどを加えることで、UIの完成度が高まります。
hoverの基本的な書き方
hoverの最もシンプルな記述方法は以下のとおりです。
a:hover {
color: red;
}この例では、リンクにカーソルを乗せた瞬間にテキストの色が赤に変わります。
よく使われるhoverの基本パターン
色を変える
.button:hover {
background-color: #4087bf;
color: #fff;
}文字装飾を変える
a:hover {
text-decoration: underline;
}少し浮き上がるエフェクト
.card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transition: 0.2s ease;
}透明度を変える
img:hover {
opacity: 0.7;
transition: 0.3s;
}hoverとtransitionを組み合わせる
hoverアニメーションの品質を上げるには、transitionの追加が効果的です。
.button {
background: #f6b7c1;
transition: 0.2s ease;
}
.button:hover {
background: #e69aac;
}transitionを使うことで、色の変化が滑らかになり、より自然なアニメーションになります。
hoverの注意点
hoverは便利ですが、次のポイントに注意する必要があります。
スマホではhoverが無効な場合がある
スマホにはカーソルがないため、hoverエフェクトは基本的に動作しません。ただし、タッチ時に一瞬反応するブラウザもあります。
過剰な動きは逆効果
派手なエフェクトは読み込みを遅くしたり、使いづらくなることがあります。
hoverだけに依存しすぎない
クリックやfocusにも適切なフィードバックを設定することが大切です。
応用1 画像をズームする
.zoom img {
transition: transform 0.4s ease;
}
.zoom img:hover {
transform: scale(1.1);
}カードデザインや制作実績一覧などでよく使われる表現です。
応用2 カードに立体感をつける
.card {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}視覚的に浮き上がるため、ユーザーの注目を引くUIになります。
応用3 ボタンのアニメーションを強化する
.button {
padding: 12px 28px;
background: #4087bf;
color: #fff;
border-radius: 6px;
transition: 0.15s ease;
}
.button:hover {
transform: scale(1.03);
background: #3571a3;
}柔らかい弾性アニメーションを加えることで、クリックしたくなるボタンになります。
hoverの代替として使える擬似クラス
hoverと合わせて覚えると便利な擬似クラスは次のとおりです。
focus
キーボード操作でフォーカスされた場合に反応します。
input:focus {
border-color: #4087bf;
}active
クリック中の状態を表します。hoverと組み合わせることで押下エフェクトが作れます。
まとめ
hoverは、ユーザーインターフェイスを改善するうえで欠かせないCSSの基本機能です。
基礎として色変更や影の追加、応用としてズームや立体エフェクトなど、幅広く応用できます。
hoverを上手に使うことで、サイト全体の操作性とデザイン性が向上し、ユーザーにとってより心地よい体験を提供できるようになります。
今後はhoverとtransition、transformを組み合わせたアニメーションなど、さらに高度な演出も追加できますので、必要であれば続編記事も作成できます。