マウスカーソルを乗せると特定のイベントを発生させるhover

マウスカーソルを乗せると特定のイベントを発生させるhover


文字にカーソルを乗せると下線が引かれる

ホームページ内にある特定の文字にマウスカーソルを乗せると、説明文がポップアップされたり、下線が引かれるといったデザインを見たこともある人は多いでしょう。こうしたデザインはどのように作っているのでしょうか。実は作り方はそれほど難しくなく、具体的にはスタイルシートの「hover」という疑似クラスを使うことで実現可能です。

ただ、hoverを使う場合は注意しなければならないことがあります。それは、スマートフォンやタブレットのブラウザだとうまく動作しないことがあるという点です。あまり知られていませんが、スマホやタブレットにもマウスを接続することは可能で、この場合はhoverが有効になるものの、指で操作する場合はマウスカーソルが出てこないのでhoverが有効にならないのです。したがって、hoverを使う場合はPC向けのブラウザ用と割り切る必要があります。

hoverを使うことでSEO的に不利になることはある?

では、hoverを利用することでSEO的になにか問題が発生するということはあるのでしょうか。近年、一部の検索エンジンはPC向けではなく、モバイル向けのデザインを元にサイトの評価を行うと公表しており、「PC向けのブラウザで表示していることを、モバイル向けのブラウザで表示しないと不利になるのでは」といわれています。

実際のところ、どうなのかというと、PC向けにはあったコンテンツがモバイル向けには存在しないということだと評価は下がる可能性がありますが、hoverが機能しないから検索結果の順位が下がることはまずないでしょう。

レスポンシブwebデザインはIT化が進む中、通販サイトや顧客向けの会社案内のサイトなどで採用されるケースが増えています。

Back To Top