(Sample)
今回は、CSSで実装されたホバー（hover）エフェクトについて、新人エンジニアの方に向けてわかりやすく解説していきます。「hover」とは、マウスカーソルをボタンに重ねたときに発生するイベントのことです。つまり「ふれたときに動く」仕掛けですね！
それでは、どんな仕掛けがこのコードにあるのか、見ていきましょう。
ホバーエフェクトとは？
Webページ上のボタンやリンクにマウスを乗せたときに起こる視覚的な変化のことを「ホバーエフェクト」といいます。
- ボタンの色が変わったり
- 少し大きくなったり
- 影がついたり
- 回転したり…
これらはすべてCSSだけで実現可能です。
各ホバーエフェクトの動作とCSS解説
ここでは主なエフェクトをいくつかピックアップして、わかりやすく説明します。
色の変更（.btn-color-change）
.btn-color-change:hover {
background-color: #007bff;
color: white;
}
解説：
- ボタンの背景が青色（#007bff）に
- 文字色が白に変化
サイズの変更（.btn-size-change）
.btn-size-change:hover {
transform: scale(1.1);
}
解説：
scale() は拡大・縮小をするプロパティ。
1.1→ 元のサイズの110%に拡大
シャドウの追加（.btn-shadow）
.btn-shadow:hover {
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}
解説：
- ボタンの周囲に影をつけて立体感を演出します。
box-shadowの形式は：x方向の距離 y方向の距離 ぼかしの強さ 色
回転（.btn-rotate）
.btn-rotate:hover {
transform: rotate(360deg);
}
解説：
- マウスを当てるとぐるっと一回転！
注意：
このままだと「一瞬で回る」だけ。アニメーションを加えたい場合は transition の調整が必要です。
グラデーション背景（.btn-gradient）
.btn-gradient:hover {
background: linear-gradient(45deg, #007bff, #00d4ff);
color: white;
}
解説：
linear-gradientはグラデーション背景- 45度の角度で青から水色に変化
テキストアニメーション（.btn-text-animation）
.btn-text-animation::before {
content: "ホバーしました!";
opacity: 0;
}
.btn-text-animation:hover::before {
opacity: 1;
}
解説：
::beforeで疑似要素を使い、ボタンの上に別の文字を出現させます- ホバーすると「ホバーしました!」が出る
波紋（.btn-ripple）
.btn-ripple::before {
background: rgba(0, 123, 255, 0.5);
border-radius: 50%;
width: 0;
height: 0;
}
.btn-ripple:hover::before {
width: 200%;
height: 200%;
opacity: 1;
}
解説：
- マウスを当てると水に石を落としたような波紋が広がる演出
border-radius: 50%で波紋を円にしています
バウンド（.btn-bounce）
@keyframes bounce {
50% {
transform: translateY(-10px);
}
}
解説：
- 一瞬だけ「ぴょんっ」とジャンプするような動き
@keyframesはアニメーションの動きを定義するブロックです
回転＋拡大（.btn-rotate-scale）
.btn-rotate-scale:hover {
transform: rotate(360deg) scale(1.1);
}
解説：
- 回転（rotate） と 拡大（scale） を組み合わせたエフェクト
transformは複数のアクションを同時に指定可能！
共通設定のポイント
.btn-hover
すべてのボタンに共通で以下のプロパティがついています。
.btn-hover {
transition: all 0.3s ease;
}
解説：
- すべての変化を0.3秒かけてゆっくり行うようにして、急な変化をやわらげています。
応用ポイントと学習のヒント
| テーマ | 学べること |
|---|---|
transform | 拡大・回転・移動などを1つで操作できる便利なプロパティ |
transition | スムーズな変化を実現する基本テクニック |
擬似要素（::before, ::after） | ボタンの上に重ねる演出などができる |
今後の学習の指針
このようなホバーエフェクトは、CSS設計力とUX（ユーザー体験）向上の練習にもってこいです。次のステップとして以下のようなテーマを深掘りしてみましょう。
- アニメーションを細かく制御する（
@keyframes） - JavaScriptと組み合わせて状態管理（on/offの切り替え）
- ボタンの状態に応じてスタイルを切り替える（active, focus）
- SASSなどのCSSプリプロセッサの導入
他にも気になるエフェクトや、「こういう見た目にしたいけどできない！」という場合は、ぜひ聞いてください！必要に応じて図解や動作のイメージもお伝えしますよ。