9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!


みなさんはCSSの学習をしていませんか?

CSSを学習する時に「hover」が使えることは基本となっています。

今回の記事ではhoverの使い方を解説します!

hoverとは

カーソルが乗っている要素にスタイルを適用するためのものです。多くの場合、a要素のリンク部分に使われます。

hoverは、要素やクラス、IDセレクタそのものではなく、そのセレクタの特定の状態(乗っている)を表すものですので、疑似クラスとなります。

書式

要素名:hover {プロパティ名:値;}

疑似クラス

CSS の疑似クラスはセレクタに付加するキーワードであり、選択される要素に特定状態を指定します。

疑似要素とともに、閲覧履歴 (例えば :visited)やコンテンツ状態 (フォーム要素における :checkedなど)マウスカーソルの位置 といった外的要因との関係についてスタイルを適用することを可能にします。

今回の内容である :hover 疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。

a要素での疑似クラス

リンクにカーソルが乗ったり、クリックされた場合のスタイルを変化させるには、hoverを含め以下の擬似クラスを使用します。

これらの擬似クラスに文字色・背景色・下線などを指定することで、 リンクテキストにカーソルが乗った際に色を変えるなどの動的な変化をつけることができます。

:link擬似クラス :未訪問リンクのスタイルを指定
:visited擬似クラス :訪問済リンクのスタイルを指定
:hover擬似クラス :リンクにカーソルなどが乗った際のスタイルを指定。 a:hoverでは“カーソルは乗っているがクリックはされていない状態”です。
:active擬似クラス :リンクがアクティブになった際のスタイルを指定。 a:activeでは“クリックされてから離されるまでの状態”です。

疑似クラスの記述順について

今回ご紹介した疑似クラスは以下の順で記述する必要があります。

a : link
a : visited
a : hover
a : active

この順以外ですと、各設定が正しく機能しなくなります。正確にいうと、同じ要素、セレクタに適用するときに守るべき順番です。

後に記述されたスタイルが優先される

なぜかというと、疑似クラス同士はもちろん異なりますが、<a>タグに作用するという点は同じになります。CSSルールでは、同じグループ(セレクタ)の中では後に記述されたスタイルが優先されるというものがあります。

まず、hover は link と visited の後に記述しなければいけません。逆になると、hoverで設定したcolor プロパティ等がlink等の設定に上書きされます。ユーザーがマウスオーバーしても、テキストの色が変わらない、となります。

同じように、active の順番は hover の後ろです。hover = マウスオーバー の後に active = クリック となります。後に記述されたクラスを優先するので、[ hover = マウスオーバー した後、active = クリック のプロパティが有効になるように記述 ] しなければならないわけです。逆に記述すると、hover=マウスオーバー のプロパティが優先されてactive=クリックの(color)プロパティが無効となってしまいます。(クリック時に色変化なし)

最後にlinkとvisitedですが、こちらは動的ではなくそれぞれ静的な状態を表します(未訪問と訪問済)そのため、順番は関係ないようですが、便宜上linkを先と考えた方が自然かと思います。

サンプル


<html>
<head>
<style type="text/css">
a:link {color:#0000ff;} /*未訪問のリンクの色*/
a:visited {color:#ff0000;} /*訪問済みのリンクの色*/
a:hover {color:#00ff00;} /*カーソルが乗っているリンクの色*/
a:active {color:#ffff00;} /*クリック中のリンクの色*/
</style>
</head>
<body>
<p>
<a href="today.html">今日のお天気</a><br>
<a href="tomorrow.html">明日のお天気</a><br>
<a href="yesterday.html">昨日のお天気</a>
</p>
</body>
</html>

まとめ

初心者の方向けにhoverを紹介していきましたが、いかがでしたか?

hoverを上手に使いこなせることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!

*カウンセリング予約に面倒な電話の必要はございません!


おすすめの記事