ホバー可能かどうかによってスタイルを変更する

はじめに

CSSでスタイルを定義する際、クリック/タップ可能な領域は、「カーソルをホバーさせることができるか」に応じて変更したい場合があります。これは例えば、マウスカーソルが使えない場合はタップ可能であることを認識させるデザインにしたい、タップ可能領域を大きくしたい、などのケースが考えられます。

ホバー可能か否かでスタイルを変更する

ホバー可能かどうかにおいて異なるCSSを適用したい場合、 max-width などのメディアクエリを使用して「スマホっぽいサイズ」かどうかで識別しようとしても、Viewportのサイズはデバイスによって様々であるため確実ではありません。そこで役に立つのが、 hover メディアクエリです。

hover は、ユーザーの入力方法が要素をホバー可能かどうかを識別するメディアクエリであり、以下のように使用することが可能です。

@media (hover) {
  .something {
    /* ホバー可能な場合に適用するスタイル */        
  } 
}

@media  (hover:none) {
  .something {
    /* ホバーできない場合に適用するスタイル　*/
  } 
}

その他の方法

ここで説明したのは hover を使う方法ですが、その他の方法として pointer メディアクエリを使用する方法も考えられます。これは、ユーザーが持つポインティングデバイスの正確さを識別するメディアクエリであり、マウスなどの正確なポインティングデバイスを使っている場合は pointer: fine、指などのタッチスクリーンを使っている場合は pointer: fine として定義することができます。

参考

• Using Media Queries For Responsive Design In 2018