９マウスを重ねると色が変わるリンク

CSSを使うと、リンクにマウスカーソルを重ねたときに色が変わるように設定できます。
リンクを目立つデザインにすることで、閲覧者の視線をリンクに誘導できる効果が期待できます。

作成例のように表示されるページ rensyu9.html を作成してください。

基礎知識

マウスがリンクの文字列に重なったときに色が変わるようにするには、リンク <a> に対して 擬似クラス と呼ばれる特殊なCSSを設定することによって実現します。

リンクに関する擬似クラス

擬似クラス名	効果
:link	通常時のリンクを対象にする
:visited	閲覧ずみリンクを対象にする
:hover	マウスカーソルがリンクの上に来たときのスタイルを対象にする
:active	リンクの上でクリックされたときのスタイルを対象にする

擬似クラスを使用する際は、セレクタを「要素名：擬似クラス」のように記述します。たとえば、<a> に :link 擬似クラスを指定する場合は、次のようになります。

擬似クラスの使用例

a:link { color: red; }
a:visited { color: red; }
a:hover { color: red; background-color:yellowgreen; }

例えば上の例では、通常時のリンク文字色 color が赤色 red になり、マウスカーソルを重ねると背景色 background-color が黄緑 yellowgreen になります。

これはサンプル

:visited や :hover といった他の擬似クラスも :link と同様に設定できます。

そのほか、実は擬似クラスは <a> 以外に対しても使えます。例えば次の例では、<div> にマウスカーソルが重なった時に背景色 background-color をグレー #dddddd に変えることで、簡易的なメニューを実現しています。

<div>ホーム</div>
<div>サービス</div>
<div>アクセス</div>
<div>お問い合わせ</div>

div { width:300px; }
div:hover { background-color: #dddddd; }

ホーム

サービス

アクセス

お問い合わせ

上の文字にマウスカーソルを重ねると、色が変わります。様々な演出効果を得られるので、擬似クラスを試してみましょう。

作成手順

ここからが本番です。

京都産業大学のトップページ http://www.kyoto-su.ac.jp/ につながるリンクを作成します。リンクは下のようにHTMLで設定できます。

<a href="http://www.kyoto-su.ac.jp/" target="_blank">京都産業大学にアクセス</a>

上の「擬似クラス」の設定方法を参考に、今回の課題に当てはめると、以下のようになります。

<html> <head> <link rel="stylesheet" type="text/css" href="rensyu9.css"> 　　： </head> <body> <a href="http://www.kyoto-su.ac.jp/" target="_blank">京都産業大学にアクセス</a> </body> 　　:

a:link { color: royalblue; } a:visited { color: royalblue; } a:hover { color: white; background-color: royalblue; } a:active { color: red; background-color: #eeffaa; }

色は好きなものに変えても構いません。

京都産業大学にアクセス

リンクにマウスカーソルを重ねた時に色が変化します。
リンクの色がゆっくり変わるようにします。

色が変わる速度をゆっくりにするには、:link 擬似クラスに transition プロパティを設定します。

transition: CSSが変化する時間;
transition: 1s;

例えば値として「1s」を設定すると、1秒（1 second）かけて色が変わります。

a:link { color: royalblue; transition: 1s; } a:visited { color: royalblue; } a:hover { color: white; background-color: royalblue; } a:active { color: red; background-color: #eeffaa; }

京都産業大学にジャンプ

リンクにマウスカーソルを重ねた時、ゆっくり色が変われば完成です。どことなく高級な雰囲気があって良いかと思います。

なお変化の速さをさらに早くしたい場合は、たとえば transition の値を 0.5s と設定すると0.5秒でアニメーションが行われるようになり、高速化します。

transition - MDN

以上で完成です。

解説

CSSでは「擬似クラス」という特別な表現を使うことで、さまざまに見栄えを変更できます。擬似クラスは記述方法がやや特殊ですが、ハイパーリンクの見栄えを調整するために、よく使われます。

またCSSには transition プロパティなど、アニメーションを制御するプロパティもあり、簡単なアニメーションを行うこともできます。

参考：リンクの下線を無くしたい場合

通常リンクには下線がつきますが、もし下線を無くしたい場合は :link 擬似クラスの設定に、text-decoration: none; を追加します。また下線ではなく、リンク文字の周囲に罫線を引きたい場合は、 border プロパティが使えます。

例えば下の場合、リンクは通常時、下線がない ( text-decoration:none ) デザインになりますが、マウスカーソルを重ねた時だけ下線が付きます ( text-decoration: underline )。

a:link { color: red; background-color: yellow; text-decoration:none; }
a:hover { background-color: yellow; text-decoration:underline; }

これはサンプル

参考：特定のリンクにのみCSS設定を適用させるには

上記の例では、ページ内に存在するすべてのリンクがCSSによるデザイン変更の対象となります。よってページ内に<a>でリンクを作ると、自動的に全て同じデザインになります。

しかし、もし一部のリンクのみデザインを変更したい場合は、クラスを併用して設定をします。その場合、セレクタ部分は「タグ名.クラス名：疑似クラス名」のようになります。

具体的には、以下のように設定します。

<a href="http://www.xyz.com/" class="mystyle">ここをクリックしてください</a>

a.mystyle:link { color: green; }
a.mystyle:visited { color: green; }
a.mystyle:hover { color: red; background-color:yellow; }
a.mystyle:active { color: green; }

上記の場合、class="mystyle" が設定されているリンクだけが、デザイン変更の対象になります。

ここをクリックしてください

これは一般的なリンク

「ここをクリックしてください」のリンクだけデザインが変更されている様子が分かります。

９ マウスを重ねると色が変わるリンク

作成例