マウスホバーで動く！CSSアニメーションとfocusの作り方入門ガイド

:hover や :focus に連動したアニメーションの作り方

先生と生徒の会話形式で理解しよう

生徒

「ホームページのボタンにマウスをのせたとき、色が変わったり動いたりするのはどうやって作るんですか？」

先生

「それは、hover（ホバー）という機能を使っています。マウスが重なったときだけデザインを変える魔法のような設定ですよ。」

生徒

「キーボードで操作しているときに枠線が出るのも同じ仕組みですか？」

先生

「鋭いですね！それはfocus（フォーカス）という機能です。どちらも初心者の方でも簡単に設定できるので、一緒にやってみましょう！」

1. マウスをのせたときに変化するホバーの基本

ウェブサイトを閲覧しているときに、リンクやボタンの上にマウスの矢印（カーソル）を動かすと、ふわっと色が変わることがありますよね。この「マウスをのせる」という動作を、専門用語で「ホバー（hover）」と呼びます。

プログラミングの世界では、何もしない時の見た目と、マウスをのせた時の見た目の二種類を準備しておきます。そして、「もしマウスがのったら、こちらのデザインに切り替えてね」という命令をＣＳＳ（シーエスエス）というデザイン専用の言語で指示します。ＣＳＳは、ホームページの「お化粧」を担当する役割だと思ってください。

パソコンに触るのが初めての方でも、「：ｈｏｖｅｒ」という短い言葉を覚えるだけで、サイトに動きを出すことができます。これがあるだけで、利用者は「あ、ここはクリックできるんだな」と直感的に理解できるようになります。これをユーザー体験（ＵＸ）の向上と言い、親切なサイト作りには欠かせない要素です。

2. キーボード操作に反応するフォーカスの役割

マウスを使わずにキーボードの「Ｔａｂキー」を使ってサイトを操作することもあります。このとき、今どこのボタンを選んでいるかを示すために枠線が出たり色が変わったりすることを「フォーカス（focus）」と言います。フォーカスは「注目」や「焦点」という意味があります。

マウスを使えない方や、効率よく操作したい方にとって、このフォーカスの設定は非常に重要です。もしフォーカスの設定がないと、今どこを操作しているのか迷子になってしまいます。これをアクセシビリティ（誰でも使いやすいこと）の向上と呼びます。

書き方はホバーとそっくりで、「：ｆｏｃｕｓ」と付け加えるだけです。ホバーとフォーカスをセットで設定しておくことで、マウスでもキーボードでも心地よく動く、プロフェッショナルなウェブサイトに一歩近づくことができます。まずはこの二つのセットを基本として覚えておきましょう。

3. 動きを滑らかにするトランジションという設定

ホバーやフォーカスを設定しても、そのままだと色が「パッ」と一瞬で切り替わってしまいます。これでは少し味気ないですよね。そこで登場するのが「トランジション（transition）」という設定です。これは「変化に時間をかける」という命令です。

例えば、「色を変えるのに０.５秒かけてね」と指示を出すことで、色がじわーっと変わるようになります。この「じわーっと」した動きこそが、アニメーションの正体です。トランジションは、変化の前後の隙間を滑らかに埋めてくれるアニメーターのような存在です。

難しい数値の計算は必要ありません。「何秒かけるか」を数字で書くだけです。この一言を加えるだけで、機械的な動きが人間味のある優しい動きに変わります。初心者のうちは、色の変化とこのトランジションをセットで練習するのが一番の上達方法です。さっそく、実際のコードを見てみましょう。


<style>
	.simple-button {
	    background-color: #0d6efd;
	    color: white;
	    padding: 10px 20px;
	    border: none;
	    border-radius: 5px;
	    /* 変化を滑らかにする魔法 */
	    transition: background-color 0.5s;
	    cursor: pointer;
	}

	/* マウスをのせたときの設定 */
	.simple-button:hover {
	    background-color: #f80;
	}

	/* キーボードで選択したときの設定 */
	.simple-button:focus {
	    outline: 3px solid #ff0;
	}
</style>

<button class="simple-button">
	マウスをのせてみて！
</button>

ブラウザ表示

4. ボタンを少し大きくする拡大アニメーション

色を変えるだけでなく、ボタンの大きさ自体を変えるアニメーションも人気があります。マウスをのせたときに「ボイン」と少し大きくなる動きは、ボタンが押されるのを待っているような楽しさを演出できます。これには「トランスフォーム（transform）」という命令を使います。

トランスフォームは、形を変えたり位置をずらしたりするための命令です。その中の「スケール（scale）」という項目に、１.１などの数字を入れると、元の大きさの１.１倍に膨らみます。逆に０.９にすれば少し縮みます。

この拡大アニメーションも、先ほどのトランジションと組み合わせることで、生き生きとした動きになります。画像に対して設定すれば、写真が迫ってくるような迫力ある演出も可能です。シンプルですが、非常に使い勝手の良いテクニックです。


<style>
	.zoom-card {
	    width: 150px;
	    text-align: center;
	    transition: transform 0.3s;
	}

	/* マウスをのせたら大きくする */
	.zoom-card:hover {
	    transform: scale(1.2);
	}
</style>

<div class="zoom-card">
	<img src="/img/sample150-100.jpg" class="img-fluid rounded shadow">
	<p>大きく広がるよ！</p>
</div>

ブラウザ表示

5. 透明度を変えてふわっと見せるテクニック

「オパシティ（opacity）」という言葉を聞いたことはありますか。これは「不透明度」という意味で、どれくらい透けて見えるかを決める設定です。１が全く透けない状態で、０が完全に透明で見えない状態です。

ホバーしたときにこのオパシティを少し下げる（例えば０.７にする）と、要素が少し透けて、色が薄くなったように見えます。これは上品なリンクなどでよく使われる手法です。背景が少し透けて見えることで、画面全体の奥行きを感じさせることができます。

色の指定を細かく変えるのが面倒なときでも、オパシティをいじるだけで簡単に「反応している感じ」を出せるので、初心者の強い味方です。画像を並べたギャラリーサイトなどで、マウスをのせた写真だけを明るく見せたり、逆に少し暗くしたりして強調するのにも役立ちます。


<style>
	.opacity-box {
	    width: 120px;
	    height: 120px;
	    cursor: pointer;
	    transition: opacity 0.4s;
	}

	/* マウスをのせたら少し透明にする */
	.opacity-box:hover {
	    opacity: 0.5;
	}
</style>

<div class="text-center">
	<img src="/img/sample120-120.jpg" class="opacity-box rounded-circle">
	<p>透けるアニメーション</p>
</div>

ブラウザ表示

6. 影をつけて浮き上がらせる立体的な動き

平面的なデザイン（フラットデザイン）が流行していますが、あえて「影」を使うことで、ボタンが浮き上がってくるような立体感を出すことができます。「ボックスシャドウ（box-shadow）」という命令を使いましょう。

最初は薄い影をつけておき、ホバーしたときにその影を濃く、そして遠くに飛ばすように設定します。同時に、ほんの少しだけ上に移動させる「トランスレート（translate）」という命令を組み合わせると、まるで磁石の反発でボタンが机から浮き上がったような視覚効果が得られます。

こうした細かいこだわりが、サイトの「手触り感」を良くします。ユーザーが操作したときに、自分のアクションに対してサイトが小気味よく反応してくれると、使っていて楽しいと感じるものです。影の濃さや移動距離を１ピクセル単位で調整して、自分好みの浮かび上がり方を探してみてください。


<style>
	.float-card {
	    width: 200px;
	    padding: 20px;
	    background: white;
	    border: 1px solid #ddd;
	    border-radius: 10px;
	    transition: all 0.3s ease;
	    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	/* ホバーで浮き上がる */
	.float-card:hover {
	    transform: translateY(-10px);
	    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
	}
</style>

<div class="float-card text-center mx-auto">
	<i class="bi bi-hand-index-thumb fs-1 text-primary"></i>
	<p class="mt-2">ここをホバー！</p>
</div>

ブラウザ表示

7. 文字の間隔を広げるオシャレな変化

色や形以外にも、文字そのものに変化を加えることができます。例えば、マウスをのせたときに、文字と文字の間の隙間を少しだけ広げるアニメーションです。これは「レタースペーシング（letter-spacing）」という命令を使います。

見出しなどでこの設定を使うと、ゆったりとした優雅な印象を与えることができます。また、文字を太くしたり、下線を引いたりする変化も定番です。ただし、文字を太くすると全体の幅が変わって周りの要素を押し出してしまうことがあるので注意が必要です。

文字の変化は、読ませるコンテンツにおいて非常に強力な視覚的合図になります。さりげない変化こそが、洗練されたデザインの秘訣です。トランジションをゆっくりめに（１秒くらいに）設定すると、より優雅で落ち着いた雰囲気を演出できますよ。

8. 初心者が注意すべきホバー設定の落とし穴

ホバーアニメーションを作る際に、一つだけ大きな注意点があります。それは「スマートフォン」での見え方です。スマホにはマウスがないので、基本的に「マウスをのせる」という状態が存在しません。指で触れた（タップした）瞬間にホバーの状態になりますが、そのまま指を離してもしばらくホバーの状態が残ってしまうことがあります。

これを解消するために、プロの制作者は「スマホではホバーを無効にする」といった工夫をすることもあります。しかし、初心者のうちはあまり難しく考えすぎず、「スマホだと少し動きが違うかもしれないな」ということを頭の片隅に置いておくだけで大丈夫です。

また、点滅があまりに激しかったり、動きが速すぎたりすると、見ている人の目が疲れてしまいます。アニメーションはあくまで「スパイス」です。料理と同じで、入れすぎると素材の良さを消してしまいます。自分が心地よいと感じる速さや色の変化を、何度もテストしながら見つけることが大切です。まずは基本の形を何度も書いて、指にコードを覚えさせていきましょう。

2026年最新スキルアップ・実践セミナー