CSS :hover擬似クラス

CSSの「:hover」擬似クラスを初心者向けに解説!動きのあるリンクを作ろう!

通常CSSはWebサイトを制作する際、HTMLで構築されたWebサイトの各要素をどの様に装飾していくかを指定していくのに使用します。例えばWebサイトがディスプレイに表示された時の各要素の大きさやレイアウトなどどのようなスタイルで表示・出力するかを指定できます。
CSSについての基本はこちら

CSSの疑似クラスとは何?

CSSの疑似クラスはセレクタに付加して使用します。セレクタとはCSSのスタイルを指定するための目印です。セレクタに使用するのは通常IDやclassを使用します。下記例のように<a>タグにclass="btn-link"ID="btn-link"のように指定します。

ここで気をつけてほしいのは、同名classはページ内で複数回使用できますが、同名IDを重複させない方が良いです。複数リンクを設置する場合はclassを使用した方が良いでしょう。

CSSの「:hover」疑似クラスとは?

「:hover」疑似クラスは<a>タグに使用する代表的な擬似クラスです。この「:hover」擬似クラスを指定された要素は、カーソルを重ねると実行されるクラスになります。よく見かけるのがWebサイトを閲覧している時にリンクが貼られ、他と違う色に装飾されたテキスト(青系の色が多い)にマウスポインターを合わせると、アンダーラインが表示されたり、テキストの色が変化したりするタイプのものです。

CSSで:hoverイメージ

その他<a>タグに使用できる擬似クラス

「:hover」擬似クラスが代表的な擬似クラスですが、他にも<a>タグに使用できる擬似クラスはあります。

  • :link(リンクされた要素のデフォルト状態)
  • :visited(過去にクリックされたリンク要素の状態)
  • :hover(マウスポインターがリンク要素に重なった状態)
  • :active(リンク要素をクリックして放すまでの状態)

これらの要素を使用する場合はCSSに記載する順番にもご注意ください。
上から①:link→②:visited→③:hover→④:activeの順番で記載しないと自分が思ったような動作ができない場合があります。
疑似クラスの詳細につきましてはスタイルシートリファレンスを御覧ください

CSS「:hover」で動きのあるテキストリンクを装飾する

ここまで「:hover」などの疑似クラスを説明してきましたので、実際にテキストリンクに「:hover」を指定しテキストリンクに動きを付けてみましょう。

リンクタグは下記のものを使用します。<a>タグにクラスセレクタ”btn-link”が指定されています。このクラスセレクタ”btn-link”にCSSプロパティを指定していきます。

CSSで”btn-link”の装飾をする場合、CSSファイルに.btn-link { }と記入し{ }の中にプロパティを記入していきます。

上記の指定でクラスセレクタ”btn-link”が指定されているテキストリンクは青色になります。また、HTMLのみでリンクを指定した時に表示される下線を表示させないようにします。

CSS「:hover」擬似クラスで動きをつける

上記のCSSではまだ、リンク時の装飾をしたのみで、マウスポインターが合わさっても変化は起こりません。なので簡単な「:hover」を追加してみましょう。先ほど指定した.btn-linkの後にハイライト部分のように.btn-link:hoverを追加します。

Link text

これでカーソルが合わさった時にテキストカラーがオレンジ色になり、下線が表示されるかと思います。「:hover」時にテキストカラーをオレンジにしたのは変化をわかりやすくする為であり、実際に実装する場合はもっとさりげない変化がおしゃれかと思います。

上記はテキストリンクを装飾しましたが、CSSの装飾にしかたによってはボタンのようなリンクも作成できます。

リンクタグは下記のものを使用します。<a>タグにクラスセレクタ”btn-link-box”が指定されています。このクラスセレクタ”btn-link-box”にCSSプロパティを指定していきます。

HTMLの記述例

CSSと「:hover」擬似クラスの記述例

ボタンタイプの「:hover」動作例は以下のものになります。

Link Box

CSS「:hover」疑似クラスのまとめ

今回の例は余計な部分をできるだけ省いて「:hover」の例を作成しました。CSSを理解し思いのままにデザインできるようになれば、さらにおもしろい表現が可能になります。「:hover」はWebサイトを作成した時に必ずといっていいほど使用する疑似クラスなので、ここでちょっと手の混んだ表現をしておくと、ユーザーに少し「おっ!」と思わせるWebサイトになりますね。

スマートフォンサイトも「:hover」を適用させる場合は「ontouchstartでスマホサイトにhoverアクションを適応した場合スクロールがカクカクしてたので対策する」をご覧ください