レスポンシブデザインでの注意点！「:hover」はPC表示時のみ指定すべき

CSSにおける「:hover」は基本中の基本。マウスを乗せた時の挙動を指定する疑似クラスだ。

PCでの表示の際には、主にaリンクに対しhoverを指定しておくのが一般的。マウスを乗せた時に「文字色が変化する」「下線が出現する（消える）」など、何らかの変化があったほうがわかりやすい。

だがレスポンシブデザインでサイトを構築するのであれば、スマホやタブレットでの表示時にhoverが指定してあると都合が悪い。aリンクにhoverが指定してあることで、2度タップしないとリンク先に遷移できなかったり、ページ遷移後もhoverで変化させた後の状態が続いたりする場合がある。

筆者の個人的見解だが、「hoverを指定するのはPC表示時に限る」としたほうがよいと思う。スマホ表示時はhoverを無効にしてあげよう。以下その解決方法を紹介する。

まずは「_vars.scss」などの定義指定sassファイルに、以下のように記述する。

$sm-width: 979px;//タブレット
$xs-width: 767px;//スマホ

そして、メインのsassにおいてhoverを指定する際には、以下のようにしよう。

a {
 background: blue;
 &:hover {
  @media screen and (min-width: $sm-width) {//PCのみ
   background: red;
  }
 }
}

こうすることで、PC表示時のみhoverが適応される。