cssのhoverで出来ることとは?現役webデザイナーが紹介します!

hovercoding

takato@enjoying_freeです!

cssのhoverを使用することでwebサイトの装飾をグレードアップすることが出来ます。

hoverとはどのようなものなのか、どのように使用するのかを皆さんに紹介します。

疑似クラスについて

疑似クラスとは?

実は「hover」と言うコードは疑似クラスに値します。

疑似クラスとは「指定したクラスにアクションが生じた際、cssが反映される」ことを意味します。

アクションとは、「要素とマクスが重なる」ことや「クリックされる」ことなどいくつか種類があります。

上記のようなアクションが起きた際、コーディングしたcssが反映されるようになります。


疑似クラスは、サイト訪問者に対してサイト内操作方法をわかりやすく伝えるために活用されます。

aタグはリンクが貼られているかわかりやすく表示するために、マウスを重ねると要素にアンダーラインを表示するように疑似クラスがあらかじめ作成されております。

疑似クラスはサイト訪問者のUXを考慮して作成されるのです。

疑似クラスの書き方

疑似クラスの書き方は非常に簡単です。既存のクラスの後ろに「:〇〇」を追加します。〇〇の部分には任意の疑似クラスを入力します。

疑似クラス「hover」を使用する場合は、既存のクラスの後ろに「:hover」と入力します。

hoverでできること

hoverは「カーソルを重ねた際にアクションを起こす」疑似クラスです。

指定された場所にカーソルを重ねた際、色が変わったり半透明になったり要素の大きさが変わったりすることが出来ます。

よく使用されるのは、ボタンデザインです。LP制作をしていると、申し込みのクリック数を高める戦略としてボタンの疑似クラスを作成することがあります。

ボタンにマウスが重なると、ボタンが動いたり色が変わったりするように設定するのです。

また、ボタンが実際に押されているようにアニメーションするのも疑似クラスで行うことができます。

下記のようにボタンに影をつけて、hoverで少し下にずらすように設定すると、ボタンが押されたかのように見えるデザインを作ることが出来ます。

See the Pen 2021_0509 by takato (@ttakkatto) on CodePen.

hover以外の疑似クラス

疑似クラスには、hover以外にもいくつら種類があります。

疑似クラス一覧

A:nth-child(n)(親要素内のn番目の要素の指定)
A:nth-of-type(n)(親要素内の同じ種類の要素の中のn番目の要素)
A:not(B)(B以外の要素の指定)

他にもいくつか種類がありますが、あまり実務で使用しないものなので上記の内容を押さえておけば問題ないです。

HTML・CSSの勉強方法について

hoverのような疑似クラスを含め、HTMLやcssを勉強するには、実際に存在しているサイトの模写を行うことをオススメします。

実際にコードを書く事でアウトプットに繋がるからです。

インプットだけの勉強ではなく、アウトプットを前提としたインプットの勉強を行う事で、定着するスピードが速くなります。

勉強方法の詳細については、下記の記事を読んでみてください。

最後に

以上がhoverで出来る事に関する内容でした。

疑似クラスを覚えると、cssだけでもサイトに動きを加える事ができます。

是非勉強してみてください!


webデザインに関するオススメの記事はこちら↓