どうもこんにちは。
Web/App/UIデザイナーのサトウです。
今回は、CSSの擬似クラス「:hover」をスマホやタブレットで反応させないようにする方法をご紹介します。
リンクやボタンにマウスポインタが乗ったときの状態変化を指定する「:hover」
リンクやボタンにマウスポインタが乗ったときにリンクの色を変えたりボタンのサイズを変えたりと様々な状態変化を指定できるCSSの擬似クラス「:hover」。
非常によく利用する擬似クラスですが、レスポンシブコーディングが当たり前になった昨今、この「:hover」の挙動についてスマホやタブレットでの閲覧時にちょっと困ることがあります。
それは、
タップしたときに:hoverの効果が現れて、指を離してもその効果がそのまま残ってしまう
ということです。
See the Pen
:hover no mediaqueries by foolishlife (@foolishlife)
on CodePen.
しかも、そもそもホバーという概念自体が存在しないスマホやタブレットといったタッチデバイスで:hoverの指定をしていること自体がちょっとスッキリしませんよね。
そこで、ホバーという概念が成立するデバイスでの閲覧時のみ:hoverを適用するCSSの書き方をご紹介します。
:hoverのデバイス別対応はメディアクエリでできる
メディア特性「hover」
どうするかというと、メディアクエリを使用して以下のように:hoverを記述します。
@media (hover: hover) {
.button01:hover {
background-color: #eb9020;
}
}
See the Pen
:hover use mediaqueries by foolishlife (@foolishlife)
on CodePen.
これは、閲覧している環境の入力デバイスが任意の要素上でホバー（停止）することができるかを判定してスタイルを指定できるものです。
「hover」はホバーできる入力デバイスを指します。
つまり、上記のように記述すると、マウスのようにポインタを要素上で停止できるデバイスを使用している場合にのみスタイルを適用できるというわけです。
どうでしょう？
マウス操作のできるデバイスで操作すると:hoverの効果が現れて、スマホやタブレットといったタッチデバイスで操作すると:hoverの効果がキャンセルされますね。
さらに、次のようなメディアクエリもあります。
メディア特性「pointer」
@media (pointer: fine) {
.button01:hover {
background-color: #eb9020;
}
}
See the Pen
Untitled by foolishlife (@foolishlife)
on CodePen.
これは、閲覧している環境の入力デバイスがどの程度正確な操作を実現できるものかを判定してスタイルを指定できるものです。
「fine」はマウスのような正確性の高いデバイスを指します。
つまり、上記のように記述すると、マウスのような正確性の高いデバイスを使用している場合にのみスタイルを適用できるというわけです。
メディア特性を and で組み合わせてより正確に
下記のように (hover: hover) と (pointer: fine) を and で組み合わせれば、ホバーの操作が可能で、かつ正確性の高い入力デバイスを使用している場合にのみスタイルを適用するという使い方もできます。
@media (hover: hover) and (pointer: fine) {
.button01:hover {
background-color: #eb9020;
}
}上記のようにメディアクエリを使うことで、:hoverの効果を適切に適用することができます。
スマホやタブレットでのWebサイト閲覧が主流となっている昨今ですから、モバイルファーストという観念からいえばもはや:hoverの効果はオプションと言ってもいいかもしれませんが、まだまだ活躍の場の多い:hover擬似クラスですので、ちょっと一手間かけて、ストレスの少ないUXを心がけたいですね。
さて、今回は、CSSの擬似クラス「:hover」をスマホやタブレットで反応させないようにする方法をご紹介しました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。
