マウス操作とタッチ操作を見極める！CSSのhoverメディアクエリ活用術

hover対応の有無によるスタイル切替（pointer・hover）

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

生徒

「パソコンでマウスを乗せた時に色が変わるボタンを作ったのですが、スマホで見るとタップした後に色が残って変な感じになります。どうすればいいですか？」

先生

「それはスマホには『マウスを乗せる』という概念がないからですね。ＣＳＳのホバー（hover）メディアクエリを使えば解決できますよ。」

生徒

「マウスがあるかどうかを、プログラムが判断してくれるんですか？」

先生

「その通りです！マウスが使える環境と、指でタッチする環境でスタイルを切り替える方法を詳しく見ていきましょう！」

1. マウス操作とタッチ操作の違いを理解しよう

ウェブサイトを閲覧する道具には、大きく分けて二つの種類があります。一つはパソコンのように「マウス」を使って操作する道具、もう一つはスマートフォンのように「指」で画面を直接触る道具です。プログラミングの世界では、マウスの矢印をボタンの上に乗せる動作を「ホバー（hover）」と呼びます。

パソコンでは、マウスを乗せた時にボタンが少し浮き上がったり色が変わったりすると、「ここはクリックできるんだな」と直感的にわかります。しかし、スマホにはマウスがありません。指で触れた瞬間にクリック（タップ）が実行されるため、マウスを乗せるという中間の状態が存在しません。この操作の違いを無視してデザインを作ると、スマホ利用者に使いにくい印象を与えてしまうのです。まずは、この操作感の根本的な違いを意識することから始めましょう。

2. スマホでホバー効果が残ってしまう問題とは

プログラミング未経験の方がよく驚く現象があります。それは、スマホでボタンをタップしたあとに、そのボタンの色がずっと変わったままになってしまうことです。これはスマホのブラウザが、パソコン用の「ホバー」の設定を無理やり解釈しようとして、「一度触ったのだから、まだマウスが乗っているのと同じ状態だ」と勘違いしてしまうために起こります。

これを解消しないと、ユーザーは「あれ？ボタンが押しっぱなしになっているのかな？」と不安になってしまいます。最新のウェブ制作では、こうした「スマホ特有の困りごと」を解決するために、デバイスがマウス操作に対応しているかどうかを自動で判別する仕組みを使います。これが今回学ぶメディアクエリの新しい使い方です。


<style>
/* 普通に書くとスマホでもホバー色が残ってしまいます */
.test-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.test-button:hover {
    background-color: #0056b3; /* スマホで触った後もこの色が残る場合がある */
}
</style>

<button class="test-button">
    <i class="bi bi-hand-index-thumb"></i> 通常のホバーボタン
</button>

ブラウザ表示

3. hoverメディアクエリでマウスの有無を判定する

そこで登場するのが「アットマークメディア・ホバー・ホバー（@media (hover: hover)）」という命令です。これはブラウザに対して、「もしマウスのような、要素の上に乗せることができる道具を使っているなら、このルールを適用してね」と伝える魔法の言葉です。これを使えば、パソコンで見ている時だけホバー効果を出し、スマホの時は何もしない、という完璧な切り替えが可能になります。

この書き方を覚えるだけで、あなたの作るホームページは一気にプロ級の品質になります。パソコンを触ったことがない方でも、この一行を足すだけでスマホでの不快な「色の残り」を防ぐことができるのです。まさに「おもてなし」の心を持ったプログラミングと言えますね。具体的な書き方は以下のようになります。


<style>
.smart-button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

/* マウス操作ができる環境（パソコンなど）だけに適用 */
@media (hover: hover) {
    .smart-button:hover {
        background-color: #218838;
        transform: scale(1.05); /* 少し大きくする演出 */
    }
}
</style>

<button class="smart-button">
    <i class="bi bi-pc-display"></i> PCなら動くボタン
</button>

ブラウザ表示

4. pointerメディアクエリで操作の正確さを判断する

ホバー以外にも、「ポインター（pointer）」という便利な判定方法があります。これは「操作に使う道具がどれくらい正確か」を判断するものです。パソコンのマウスは非常に細かく正確な操作ができるので「ファイン（fine）」、スマホの指はマウスに比べると少し大雑把なので「コース（coarse）」という分類になります。

例えば、「指で操作するスマホの時は、ボタンを押しやすいように少し大きくする」「マウスの時は、細かくクリックできるので小さく配置する」といった調整が、このポインター機能で実現できます。ユーザーがどんな道具であなたのサイトを見ているかに合わせて、最適なサイズ感を提供することができるようになるのです。これもレスポンシブデザインの重要な一歩です。


<style>
.check-pointer {
    padding: 20px;
    background-color: #f8f9fa;
    border: 2px dashed #ccc;
    text-align: center;
}

/* 指での操作（スマホなど）がメインの場合 */
@media (pointer: coarse) {
    .check-pointer {
        font-size: 24px; /* 指で読みやすいように大きく */
        border-color: #ffc107;
    }
    .check-pointer::after {
        content: "指で操作しやすい大きなサイズです";
    }
}

/* マウスでの操作がメインの場合 */
@media (pointer: fine) {
    .check-pointer {
        font-size: 16px;
        border-color: #17a2b8;
    }
    .check-pointer::after {
        content: "マウスで操作しやすい標準サイズです";
    }
}
</style>

<div class="check-pointer">
    <i class="bi bi-info-circle"></i> 
</div>

ブラウザ表示

5. リンクのアンダーライン表示を賢く切り替える

ブログ記事などの文章中にあるリンクも、この技術が役立ちます。パソコンでは、リンクの上にマウスを乗せた時にだけアンダーライン（下線）が出るように設定するのが一般的です。しかし、スマホでは最初からリンクであることがわからないと不便ですよね。そこで、操作環境に合わせて下線の出し方を変えてみましょう。

パソコン向けには「マウスが乗った時だけ線を出す」という洗練されたデザインにし、スマホ向けには「最初から青文字で下線を出しておく」といった親切な対応が可能です。こうした細かい気配りが、読みやすいブログや信頼されるホームページへと繋がっていきます。プログラミングはただコードを書くだけでなく、使う人の気持ちを想像することが大切です。


<style>
.smart-link {
    color: #007bff;
    text-decoration: none; /* 基本は線を消す */
}

/* 指操作環境では最初から線を出す */
@media (pointer: coarse) {
    .smart-link {
        text-decoration: underline;
    }
}

/* マウス環境ではホバー時のみ線を出す */
@media (hover: hover) {
    .smart-link:hover {
        text-decoration: underline;
        color: #0056b3;
    }
}
</style>

<p>詳しくは<a href="#" class="smart-link">こちらのリンク</a>をご覧ください。</p>

ブラウザ表示

6. 画像のキャプション表示を最適化するコツ

写真にマウスを乗せた時にだけ説明文（キャプション）がフワッと現れる、おしゃれなギャラリーサイトを見たことがありませんか？これもパソコンならではの演出です。もしこれをそのままスマホでやろうとすると、写真をタップした瞬間に説明が出てきてしまい、肝心の写真が見えなくなったり、リンク先に飛ぶのを邪魔してしまったりします。

スマホ（指操作）の場合は、説明文を最初から写真の下に表示させておき、パソコン（マウス操作）の場合だけホバー演出に切り替える、というのが正解です。メディアクエリを使えば、同じ一つのＨＴＭＬファイルで、環境に合わせた最適な見せ方を自動選択できます。自分の意図した通りに画面が切り替わるようになると、プログラミングがどんどん楽しくなってくるはずです。

7. タブレットやハイブリッドPCでの挙動に注意

世の中には、ノートパソコンだけれど画面をタッチできる「ハイブリッドＰＣ」や、マウスを接続できる「タブレット」も存在します。こうしたデバイスは「マウスも指も両方使える」という非常に贅沢な環境です。今のＣＳＳはこうした複雑な状況にも対応できるよう進化しています。

基本的には、一番便利な道具（多くはマウス）に合わせてデザインが表示されますが、制作者としては「どちらで操作しても壊れないデザイン」を心がけることが大切です。あまり凝りすぎたホバー演出に頼りすぎず、どんな環境でも最低限の情報がしっかり伝わる「ユニバーサルデザイン」の視点も忘れないようにしましょう。初心者のうちは、今回学んだ基本の切り替えを一つずつ丁寧に実装していけば十分です。

8. 実際にサイトを公開する前に自分のスマホで試そう

プログラムが完成したら、最後に必ず自分のスマートフォンで確認しましょう。パソコンのブラウザにある「開発者ツール」を使えばスマホの画面をシミュレーションできますが、実際の指の感触や、色の残り具合までは完全には再現できないことがあります。自分の手で触って、違和感がないか確かめるのが一番のテストです。

もしタップした後にボタンの色が残ってしまったら、どこかのホバー設定がメディアクエリの外に漏れていないかチェックしてみてください。一歩ずつ問題を解決していくことで、あなたは確実にスキルアップしていきます。どんな有名なウェブエンジニアも、最初はこうした小さな修正の繰り返しからスタートしました。自信を持って、新しい技術を自分のサイトに取り入れてみてくださいね！

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