リンクの状態に応じてリンクの装飾(配色など)を変化させる方法

スタイルシートを使えば、リンクの状態に応じてリンクの装飾(配色など)を変化させられます。例えば、

• 「まだ訪れたことのないリンク」は文字色を青色に、
• 「既に訪れたことのあるリンク」は文字色を紫色に、
• 「リンクの上にマウスポインタが載った場合」は文字色を黄色・背景色を青色・下線をナシに、
• 「選択状態にあるリンク」は文字色を緑色・背景色を黄色に、
• 「ページ内リンクのターゲットになったリンク」は背景色を赤色に

……のような感じです。

リンクの装飾は定番中の定番なスタイルシートですね。簡単に装飾できる上に、(特にリンクの上にマウスポインタが載った際に配色を変化させる装飾は)視覚的に分かりやすくなって便利なので、多くのウェブサイトで使われています。

上記のような「リンクの状態に応じた装飾」は、以下のようにCSSの疑似クラスを使うことで指定できます。

/* ▼まだ訪れたことのないリンク */
a:link {
   color: blue;
}
/* ▼既に訪れたことのあるリンク */
a:visited {
   color: purple;
}
/* ▼リンクの上にマウスポインタが載った場合 */
a:hover {
   color: yellow;
   background-color: blue;
   text-decoration: none; /* 下線を消す */
}
/* ▼選択状態にあるリンク */
a:active {
   color: green;
   background-color: yellow;
}
 /* ▼ページ内リンクのターゲットになったリンク */
a:target {
   color: white;
   background-color: red;
}

特に最初の3つ「:link」・「:visited」・「:hover」は、リンクの装飾としては頻出でしょうね。後の2つ「:active」と「:target」は指定されないことも多いでしょうけども。
上記に掲載した5つの疑似クラスの意味は以下の通りです。

• link疑似クラス：未訪問リンク
• visited疑似クラス：既訪問リンク
• hover疑似クラス：マウスが載った際(※リンクに限らず使えます)
• active疑似クラス：選択状態(※リンクに限らず使えます)
• target疑似クラス：ターゲットになった際(※リンクに限らず使えます)

上記のサンプルでは、主に文字色(color)と背景色(background-color)を変化させていますが、他にも文字サイズや書体・枠線など何でも変化させられます。

link疑似クラス

link疑似クラス(未訪問リンク)の装飾は、できるだけ(代表的なブラウザの標準色である)青色に合わせておく方が望ましいと思います。あまりにも標準装飾から離れすぎると、閲覧者に「リンク」だと認識されなくなってしまうかも知れませんし。(^_^;)
また、代表的なブラウザでは標準でリンクに下線を引きます。これも上記と同じ理由で、できれば消さない方が良いと思います。

hover疑似クラスはリンク以外にも使える

マウスポインタが載った際の装飾を指定できるhover疑似クラスは、リンク(＝a要素)以外に対しても使用可能です。
例えば、p要素の上にマウスポインタが載った際に、枠線の色を変化させたい場合は、以下のような感じで記述できます。

p {
   border: 1px solid gray;
}
p:hover {
   border-color: red;
}

上記の場合は、普段は「灰色」で1ピクセルの実線が引かれていますが、マウスポインタが載ったときにだけ線色が「赤色」に変わります。

active疑似クラス

active疑似クラスが適用されるのは、リンクをマウスでクリックした瞬間や、[TAB]キーなどを押してリンクにフォーカスを移した(選択した)場合です。リンク(a要素)やボタン(button要素など)で使われるケースが多いでしょう。

target疑似クラス

target疑似クラスが適用されるのは、ページ内の特定箇所へ直接リンクされた場合の「リンク先」になったときです。これも、リンク(a要素)以外でも使えます。……というか、むしろリンク以外で使われるケースの方が多そうな気もしますが。

以下のようなHTMLソースでリンクが作られているときに、

<a href="xxx" id="sampleTarget">リンクですよ</a>

URLの末尾に「#sampleTarget」を加えて、 http://example.com/page.html#sampleTarget のような感じでアクセスされた場合、リンクの装飾としてtarget疑似クラスで指定した装飾が適用されます。

というわけで、リンクの装飾を状況に応じて変化させる書き方のまとめでした。

(更新日：2016年01月12日)