中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
はじめに：activeとhoverの基本を知ろう
ウェブページには、ユーザーの操作に合わせて見た目を変える仕組みがたくさんあります。その中でも特に覚えておきたいのが CSS の :hover（ホバー）と :active（アクティブ）です。
この二つは似ているようで、実は指す意味が全く違います。まず :hover は「マウスポインターを要素の上に置いたとき」に反応します。
次に :active は「要素をクリックして押している間」に反応します。これらを正しく使い分けると、ボタンが押される感じや選択が分かりやすくなります。
中学生にもわかりやすく言うと、hoverは“指を乗せた瞬間の反応”、activeは“指を押している間の反応”と覚えるとよいです。
また、スマートフォンやタブレットのようなタッチデバイスでは hover が本来は使えません。代わりにフォーカス（キーボード操作時の選択状態）を設けるか、タッチ専用の工夫をする必要があります。
この違いを理解するだけで、マウス操作だけでなくキーボード操作やアクセシビリティにも強くなれます。
以下の点を押さえておくと良いです。
・hoverは視覚的なヒントとして使うのが基本、
・activeはクリック直後の反応を表すと理解する、
・スマホでは hover が使えないので focus など別の状態を用意する、
・見た目だけでなく、操作性（操作しやすさ）を意識する、という三つをセットで覚えましょう。
この知識を使えば、ボタンやリンク、メニューなどのUIをより分かりやすく作れます。
activeとhoverの違いと使い分けのコツ
ここでは具体的な違いと、どんな場面でどちらを使うべきかを、できるだけ分かりやすく整理します。
違いのポイントを五つ挙げると下のようになります。
1つ目：反応のタイミングが違う。hoverはマウスが上にある瞬間、activeはクリックしている間。
2つ目：視覚の目的が違う。hoverは“準備段階の提示”、activeは“押下した感覚の表現”。
3つ目：使えるデバイスが異なる。hoverはマウス型デバイス中心、activeはタッチデバイスでも反応しやすい。
4つ目：アクセシビリティの配慮が必要。keyboardでの操作時はフォーカス状態を併記すると分かりやすい。
5つ目：アニメーションの扱いも影響する。長すぎるアニメは hover でも active でも混乱を招くことがある。
ここからは使い分けのコツを具体的に見ていきます。
基本はシンプルさを第一に、 hover で色だけを変える程度なら直感的で分かりやすいです。
クリックのフィードバックには active を活用して、クリックした瞬間の視覚的な反応を用意します。
スマホなど hover が使えない場面では、代わりに :focus を使って「現在選択中」であることを示すのが安全です。
また、ボタンやリンクだけでなく、カード全体の動きにも hover や active を適用するケースがありますが、過剰なアニメーションは避けてください。
読みやすさと操作の一貫性を優先すると、ユーザーは自然に使い方を理解できます。
最後に、実装前には必ずデバイス別の挙動を確認しましょう。実際の画面では hover が機能しない場合があるため、フォーカスの併用や別の状態を用意することで、誰にとっても使いやすいUIが完成します。
実際のコード例と使い分けの実践
以下は、ボタンの見た目を hover と active で変える最も基本的な例です。実務でよく使われる組み方なので、まずは手を動かして理解しましょう。
・hover の例：マウスがボタンの上に乗ると色が変わる。
・active の例：ボタンを押している間だけ少し縮む。
・focus の例：キーボード操作で選択中の状態を示す。
この組み合わせなら、マウス・キーボード・タッチのどのデバイスでも分かりやすい表示になります。
具体的なコードのイメージは次のようになります（実際には CSS ファイルに分けて記述しますが、ここでは概略を説明します）
・hover: background-color を変えることで視覚的な変化を作る。
・active: transform で少し小さく見せる。
・focus: outline の表示を確保してキーボード操作を補助する。
これらを組み合わせると、ユーザーは「押す前の状態」「押している間の状態」「現在選択中の状態」をすぐに認識できます。
まとめと注意点
今回のポイントを簡単に振り返ります。
・ hover は視覚的なヒントとして使い、直感的な反応を作る。
・ active はクリックの瞬間の反応を表現する。
・ タッチデバイスでは hover が期待どおり動かないことを意識して設計する。
・ アクセシビリティのために focus を必ず扱い、キーボード操作でも分かる表示を用意する。
・ 過度なアニメーションは避け、シンプルさと一貫性を重視する。
この3つを守れば、誰にとっても使いやすいUIを作ることができます。
今日は hover について友達とカフェで雑談しながら深掘りしてみたよ。まず hover は“指を置く瞬間の反応”だと思えば分かりやすい。ボタンにカーソルを乗せると色が変わる、矢印が少し動く、そんな小さな変化で“ここを押せば次のページへ行く可能性があるよ”と教えてくれる。反対に active は“押している間の反応”だ。指を押している間だけボタンが縮んだり、背景が濃くなったりする。スマホでは hover は使えないけど、focus を使えばキーボード操作でも同じ気持ちを伝えられる。結局は、使い分けのコツは「直感的に分かること」と「誰でも操作できる工夫」を両立させることだと思う。
前の記事： « エマールとボールドの違いを徹底解説！どっちを選ぶべき？
ITの人気記事
