WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： マークアップ >CSS

Webサイト上にリンクテキストやボタンを設置する場合、リンククリックが可能であることが分かるようにマウスhover時に色を変えたりなどのエフェクトを付与します。
PCでは問題ありませんが、スマホの際にこのエフェクトが残っていると該当のボタンをタップした後、どこか別の要素がタップされるまでエフェクトが残り続けてしまいます。また、リンクだけでなくhoverで開閉するメニューなどでは意図しない動きが実行されてしまうこともあります。

そのため基本的にhoverエフェクトはPCのみで、スマホの場合はエフェクトを外すのが一般的となっており、実装方法としてよく見かけるのはmax-widthによるメディアクエリです。ただし、年々リリースされるスマホのサイズが大きくなっており、場合によっては対応不可能な状況が発生します。

そこで今回はデバイスの横幅ではなくany-hoverによるメディア特性での指定方法をご紹介します。

any-hoverとは？

any-hoverとは、ホバーが利用できるデバイスか判定を行うメディア特性です。書き方としては以下の2種となります。

@media (any-hover: hover)
デスクトップPCなど、ホバーに対応しているデバイス

@media (any-hover: none)
スマホやタブレットなど、ホバーに対応していないデバイス

See the Pen
any-hover by k-k-0707 (@k-k-0707)
on CodePen.

CSS

@media (any-hover: hover) {
  .btn{
    background: #fff;
    color: #EF8200;
    transition: 0.3s;
  }
  .btn:hover{
    background: #EF8200;
    color: #fff;
  }
}
@media (any-hover: none) {
  .btn{
    background: #EF8200;
    color: #fff;
  }
}

【@media (any-hover: hover) 】で指定している箇所がデスクトップPCなど、ホバーに対応しているデバイスに反映されるため、通常時は背景色が白＋文字色がオレンジ、ホバー時は色が反転するCSSを指定しています。
一方【@media (any-hover: none)】で指定している箇所がスマホやタブレットなど、ホバーに対応していないデバイスに反映されるため、ホバーを考慮せず背景色がオレンジ＋文字色が白を指定しています。
閲覧するデバイスによって見た目が変更するため、ぜひ実機でご確認ください。

まとめ

今回はCSSのany-hoverを使用して、ホバーエフェクトを実装する方法をご紹介しました。使い方によって便利な方法が様々あるため、使い分けをしっかり行っていきましょう。