CSSの:hoverと:activeの違いを完全ガイド！初心者でもわかる使い分け

:activeと:hoverの違いと使いどころ

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

生徒

「ホームページのボタンにマウスをのせたときに色を変えたいのですが、どうすればいいですか？」

先生

「それはCSSのホバーという機能を使います。:hoverという書き方をするんですよ。」

生徒

「クリックした瞬間にへこんだように見せる方法もあるって聞いたのですが…。」

先生

「それはアクティブ、つまり:activeという機能ですね。この2つの違いをマスターすると、使い心地の良いサイトが作れますよ。詳しく見ていきましょう！」

1. CSSの疑似クラスとは何かを知ろう

プログラミングの世界には、疑似クラス（ぎじくらす）という便利な道具があります。これは、HTMLの要素（ボタンや文字など）が「今どんな状態か」によって、見た目を自動的に切り替えてくれる魔法のような仕組みです。

例えば、普段は青いボタンでも「マウスが上にのっている状態」のときだけ赤くしたい、といった指定ができます。パソコンに触れたことがない方でも、テレビのリモコンをイメージしてみてください。ボタンを押す前と、押している間では、指に伝わる感覚や見た目の反応が違いますよね。それをウェブサイト上で再現するのが、今回学習する:hover（ほばー）と:active（あくてぃぶ）です。

2. マウスをのせた時の反応を作るhover

まずは:hoverについて解説します。これは、マウスの矢印（カーソル）がボタンなどの要素の上に重なったときに発動する命令です。読み方は「ホバー」です。ヘリコプターが空中で停止することをホバリングと言いますが、それと同じで「上に浮いている状態」を指します。

ウェブサイトで、リンクの文字にマウスをのせると下線が出たり、ボタンの色が少し明るくなったりするのは、すべてこの機能のおかげです。これがあることで、利用者は「あ、ここはクリックできるんだな」と直感的に理解できるようになります。これをユーザー体験（UX）の向上と言い、親切なサイト作りには欠かせない要素です。


<style>
.my-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
/* マウスをのせた時の設定 */
.my-button:hover {
    background-color: #0056b3;
}
</style>
<button class="my-button">マウスをのせてみてね</button>

ブラウザ表示

3. クリックした瞬間を表現するactive

次に、:activeについて説明します。読み方は「アクティブ」です。これは、マウスの左ボタンを「押し込んでいる最中」の状態を指します。スマホであれば、指で画面を「ぐっと触れている間」のことです。

ボタンをクリックしたときに、一瞬だけボタンが小さくなったり、色が暗くなったりする演出を見たことはありませんか？あれがアクティブの設定です。これを使うことで、利用者は「今、確かにボタンを押したぞ」という手応えを感じることができます。この「手応え」のことを専門用語でフィードバックと言います。フィードバックがないと、人間は不安になって何度もボタンを連打してしまうことがあるため、非常に重要な設定です。


<style>
.click-box {
    width: 150px;
    height: 100px;
    background-color: #28a745;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* クリックした瞬間の設定 */
.click-box:active {
    background-color: #1e7e34;
    transform: scale(0.95);
}
</style>
<div class="click-box">クリックしてね</div>

ブラウザ表示

クリックしてね

4. hoverとactiveの決定的な違い

この2つの違いを整理しましょう。ポイントは時間の流れです。

まず、マウスを近づけてボタンの上に矢印がのったときがホバーです。この時点ではまだクリックはしていません。次に、そのままマウスのボタンを押し下げた瞬間がアクティブになります。そして、ボタンから指を離すとアクティブ状態は終了します。

つまり、「触れる前（hover）」と「触れた瞬間（active）」という段階の違いがあるのです。この順番を理解しておかないと、デザインがごちゃごちゃになってしまいます。お店のドアで例えるなら、ドアの前に立っただけで自動で明かりがつくのがホバー、ドアノブを回して力を加えているときがアクティブ、というイメージです。

5. スマホでの挙動に注意が必要な理由

最近はパソコンよりもスマートフォンでサイトを見る人が増えています。ここで一つ注意点があります。実は、スマホには「マウスをのせる」という操作がありません。指が画面に触れるか、触れないかのどちらかだからです。

そのため、スマホではホバーの設定がうまく動かないことがあります。指で一度タップ（軽く叩く）したときに、ホバーの状態がずっと残ってしまい、色が変わったままになる現象がよく起きます。一方で、アクティブはスマホでもしっかり反応します。指で押している間だけ色を変えることができるからです。初心者の方は、まずパソコンでの見え方を練習するのが良いですが、将来的にスマホ対応（レスポンシブ対応）を考えるときは、この違いが重要になってきます。

6. 書く順番が大切！CSSのルール

CSSには、複数の設定を書くときに「書く順番」を守らなければならないという決まりがあります。もし順番を間違えると、せっかく書いた設定が無視されてしまうことがあります。

基本的には「hoverを先に書き、activeを後に書く」のが正解です。なぜなら、クリックするときは必ず「マウスがのっている状態（hover）」も含んでいるからです。もし逆の順番で書いてしまうと、クリックしたときのアクティブの色が、ホバーの色にかき消されてしまうことがあります。これを覚えるための呪文として「LOVE HATE（ラブ・ヘイト）」の順番と覚えるプログラマーもいますが、初心者の皆さんはシンプルに「のせるのが先、押すのが後」と覚えておきましょう。


<style>
.link-text {
    color: black;
    text-decoration: none;
    font-weight: bold;
}
/* 1. hoverを先に書く */
.link-text:hover {
    color: orange;
}
/* 2. activeを後に書く */
.link-text:active {
    color: red;
}
</style>
<a href="#" class="link-text">順番が大事なリンク</a>

ブラウザ表示

順番が大事なリンク

7. 画像にhoverとactiveを組み合わせてみる

文字やボタンだけでなく、画像に対してもこれらの機能を使うことができます。例えば、マウスをのせると画像が少し浮き上がり、クリックすると沈み込むような演出が可能です。これにより、ただの静止画が「動く仕掛け」に変わり、サイトが一気にプロっぽくなります。

画像を使う場合は、透明度を変える「opacity」や、大きさを変える「transform」といった命令と相性が良いです。ここでは、画像に影をつけたり、少し透明にしたりするテクニックを紹介します。視覚的な変化をつけることで、クリックしたくなるような魅力的なページを作ることができます。


<style>
.sample-img {
    width: 150px;
    transition: 0.2s;
}
/* マウスをのせると少し薄くなる */
.sample-img:hover {
    opacity: 0.7;
}
/* クリックすると少し小さくなる */
.sample-img:active {
    transform: scale(0.9);
}
</style>
<img src="/img/sample150-100.jpg" class="sample-img" alt="サンプル画像">

ブラウザ表示

8. アニメーションを加えてもっと滑らかに

これまで紹介した色や形の変化は、一瞬で切り替わります。これをもっと「ふわっ」とした滑らかな動きにしたいときは、transition（とらんじしょん）という命令を一緒に使います。日本語で「移り変わり」という意味です。

これを使うと、0.3秒かけてゆっくり色を変える、といった指定ができます。ホバーしたときに色がじわっと変わる様子は、とても上品で高級感のあるデザインになります。アクティブのときも、少しだけ時間をかけて沈み込ませることで、よりリアルなボタンの感触を表現できます。初心者の方は、まず基本を覚えたら、ぜひこのアニメーション効果にも挑戦してみてください。

9. 実際の使いどころとデザインのコツ

最後に、実際のサイトでどう使い分けるべきかのヒントをお話しします。基本的には「ホバーは案内、アクティブは実行の確認」という役割分担がベストです。

ホバーで「ここは押せますよ」と優しく教えてあげて、アクティブで「はい、今確かに押しましたね！」とはっきり伝えてあげる。この2段構えが、迷わないサイトを作るコツです。ただし、あまりに激しく色を変えすぎると、チカチカして目が疲れてしまうので、色の変化は「少し明るくする」「少し影をつける」程度の控えめな変更にするのが、おしゃれなサイトを作る秘訣です。

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