Webサイトの印象を大きく左右する「ちょっとした動き」。その中でも、マウスを乗せたときに色が変わる「ホバーエフェクト」は、初心者でもすぐに実装できる基本テクニックです。
この記事では、CSSの:hoverを使って、ボタンやリンクなどの要素に動きを加える方法を詳しく解説します。
hover効果ってなに？
「hover（ホバー）」とは、マウスカーソルを要素の上に重ねたときの状態のことです。
CSSでは :hover という擬似クラスを使うことで、ホバー時だけ異なるスタイルを指定することができます。
例）マウスを乗せたら背景色が変わるボタン
.button {
background-color: #3498db;
color: white;
padding: 12px 24px;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2c80b4;
}
<button class="button">ホバーしてみて！</button>
このコードで、ボタンにマウスを乗せると色がスムーズに変化するようになります。
リンクの文字色を変えてアクセントに
リンクにもホバー効果をつけることで、クリック可能な要素だと一目でわかるようになります。
a.hover-link {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
a.hover-link:hover {
color: #e74c3c;
}
<a href="#" class="hover-link">ここにマウスを乗せてみてください</a>
ポイントは transition の活用です。滑らかに変化させることで、ユーザーにストレスを与えずに視認性を高められます。
カード型デザインに影と背景色の変化を加える
ホバーエフェクトはUIをリッチに見せるための演出にも使えます。
.card {
padding: 20px;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
transition: background-color 0.3s, box-shadow 0.3s;
}
.card:hover {
background-color: #f8f8f8;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
<div class="card">マウスを重ねるとふんわり浮き上がるような演出</div>
UI全体に一貫性と高級感を持たせたいときにおすすめです。
実装のコツと注意点
transitionを併用して変化をなめらかにする- 背景色・文字色・影（box-shadow）・拡大（transform: scale）など複数のプロパティと組み合わせると表現の幅が広がる
- スマホではホバーが機能しないため、タップ操作向けの対応も意識する
まとめ
CSSのホバー効果は、Webデザインにおける“ちょっとした気配り”のようなもの。
クリックできることを伝えたり、操作の意図を補足したりと、ユーザー体験を豊かにする重要な要素です。
まずは色の変化から試して、徐々にアニメーションや影の効果を取り入れていきましょう。