デザイナー推薦！スマホでボタンやリンクタップ時のhoverを無効にする方法

2025.06.19

この記事は2024/08/01に作成されました。

この記事の目次

:hoverの挙動はパソコンとスマホでは全然違う
メディアクエリでの対策が簡単！「@media (hover:hover) & @media (hover: none)」
hoverの制御もアクセシビリティ向上のための大切取り組み

:hoverの挙動はパソコンとスマホでは全然違う

コーディング作業後のデバック中、スマートフォン（以下、スマホ）の表示を確認していると、ボタンやリンクの要素をタップしたとき、ずっと色が違ったり拡大したままだったりなど、期待通りの挙動をしてくれず困ったことはありませんか？

この現象は見た目を損ねる事も多いので、この現象をどうにかするのは使命といっても差し支えないでしょう。
デザイナーとしても許し難いことこの上なし、です。

この現象は何故起きるのかというと、パソコン（以下、PC）でマウスカーソルをボタンやリンク等の要素に乗せた時のスタイル、つまり疑似クラスである:hoverの意味がPCとスマホでは異なっていることが原因です。

結論を先に言うと:hoverとは、
PCでは、要素にマウスカーソルが乗っているときのスタイルを定義し、
スマホでは、要素をタップした瞬間から違う要素をタップするまでのスタイルを定義します。

ちなみに「要素をクリック（タップ）したときのスタイル」を定義するactiveは、PCでもスマホでも意味は同じ。なので動作も同じです。
ただし、activeが適用される前にほぼ必ずhoverのスタイルが適用されるので、hoverの挙動をどうにかしない限りactiveを美しく再現することは難しくなります。

activeはPCとスマホで同一の動作をしてくれるのなら、メディアクエリにブレイクポイントを設定し、PCサイズの時だけhoverを有効にすれば良いのでは？とも思いますが、そうすると今度はタブレットでの挙動がカバーしきれなくなるので、おすすめしません。

今回はそんなスマホにおける、hoverの挙動に関する最も簡単な対策方法を紹介していきます。

メディアクエリでの対策が簡単！「@media (hover:hover) & @media (hover: none)」

結局メディアクエリ使うんじゃん！と思った人は最後まで私の話を聞いてください。

確かにメディアクエリは使いますが、設定する条件はブレイクポイントではありません。
ユーザーが閲覧に使っている端末やブラウザなどの媒体がhoverに対応しているか、否かを条件として設定します。

    
      @media (hover:hover){
        /*hoverに対応している媒体向け（PC）*/
      }
      @media (hover:none){
        /*hoverに対応していない媒体向け（スマホ、タブレット）*/
      }

上記のコードをCSSに記述し、あとはいつもレスポンシブコーディングをしているときのようにスタイルを記述すればOKです。

    
      @media (hover:hover){
        /*hoverに対応している媒体向け（PC）*/
        a:hover{
          opacity: .7;
        }
        button:hover{
          transform: scale(1.3);
        }
      }
      @media (hover:none){
        /*hoverに対応していない媒体向け（スマホ、タブレット）*/
        a:active{
          opacity: .7;
        }
        button:active{
          transform: scale(1.3);
        }
      }

もちろん、PCとスマホの両方にactiveを効かせたいならメディアクエリを使わず、いつも通りにactiveを書けばOKです。
クリック&タップ時、特に動作はいらないのであればそもそも:activeを使う必要もありません。

ただし、hoverに関しては上記の例のようにメディアクエリを使い、PCなどのhover対応媒体だけに効くよう設定することをおすすめします。
PCではhover、スマホではactiveで挙動を表現したいときも上記のようにメディアクエリを使って書き分けると良いでしょう。

わかりやすいよう、デモも作ってみました。
デモの方ではリンクやボタンの他に、チェックボックスなどの例も作ってみたので是非ご覧ください。

https://com-dev.net/public03os/hoverDemo/

S・O_イラスト

ちなみにこの@media (hover:hover)は約10年前程前から存在はしていたのですが、Webブラウザ界の問題児ことInternet Explorer（以下、IE）だけ全然対応してくれないとのことで、便利なのに現場で導入できなかったという暗黒時代があります。
しかし、2022年にIEのサポートが終了したことで実質全ブラウザ対応となり、積極的に導入されるようになったようです。

ちなみに、暗黒時代の頃のhover制御には、Javascriptを使ったclassの付け外し等の方法で対応していたようです。
そんな過去があったのを知ると、メディアクエリだけで制御できるようになったのは本当に嬉しいし便利ですね！

hoverの制御もアクセシビリティ向上のための大切取り組み

hoverを制御する目的には、もちろん見た目の美しさを保つためであったり、漠然とした不快感を防ぐことであったりします。
しかし、最も説得力のある目的を挙げるとするなら、やはりアクセシビリティの向上を第一に掲げたいと私は思います。

特に今年、2024年4月からウェブアクセシビリティ対応が義務化されたこともあり、これまで以上により多くの人に使いやすく、わかりやすいWebサイト・サービスをつくることが国から求められるようになりました。
ゆえに、わかりにくさや使いにくさに繋がる体験や余計な動作を排除していく義務が、デザイナーである私たちにもあるのです。

これからもこのような細かい積み重ねと私たちは向き合っていく必要がありますが、その積み重ねこそ、よりよいWebサイト・サービスづくりをするための大きな一歩となるはずです。