CSSのホバーを工夫するようになった話

スマホは大きければ大きいほどいい派のコーダー、オガワです。
(機種変をするたびに大きくなってます笑)

スマホの普及率が上がったことで、スマホ優先のサイトも増えてきましたよね!
私自身も作る頻度が上がってきたことを感じているのですが…
その時、ちょっと気になるのがホバーの動き。

今回はそのホバーを工夫するようになった話をしたいと思います!

:hoverのみだと実機でちょっと不恰好に感じる

PCのコーディングをする時、リンクやボタンの要素に「:hover」でホバー(マウスオン)の動きを入れることが多くありませんか?
スピカデザインでも、押せる要素を作る時には必ず何かしらのホバーを入れてください、としています。
ホバーの動きをつけることで、PCでは押せる要素がわかりやすく綺麗なサイトに仕上がります!
では、それをスマホの実機で見た時はどうでしょう?

そのままタグに「:hover」で動きをつけると、遷移前に若干不透明度が下がったりボタンの矢印が微妙に動いたり…
変化速度が早い場合はあまり気になりませんが、ゆっくりと動かしている場合は「なんか微妙に動いたな…?」という感じになってしまいます。
最近それが不恰好だなと感じるようになったので、狭い幅ではhoverを切るようにしたのですが、一つ一つ切るのは結構な手間。
もっと楽な良い方法はないか?と調べてみました。

見つかったいい記述方法

色々調べたところ、なんとメディアクエリにホバーのみという書き方がありました!

@media (hover: hover) {
   transition: 0.5s;
   &:hover{
       opacity: 0.5;
   }
}

このように書くと、「ホバーができる場合のみ」という指定をすることができます。

普段メディアクエリを書くのはレスポンシブの幅の指定のみのことが多かったので、今はホバーの判定までできるようになったんだ!とちょっと感動しました!笑
メディアクエリの中にホバーの動きを書くことで、ipadやスマホのタッチデバイスの時には書いた指定が効かないので、変に不透明度が下がったりアニメーションがついてしまうことはありません。

まとめ

ここ数年でCSSのみでできることがどんどん広がってきていて、CSS好きの自分にとっては追いきれないことが嬉しい悩みにもなってます!笑
ブラウザごとに使える / 使えないがあるプロパティがまだまだあるので、来年はもっと色々使えるようになって便利になると良いですね!

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSで文節が切れるようになった話

    コーディング

    制作

おすすめ記事

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

×