リンクのCSS -「a:hover」と「a:visited」

リンクにカーソルを合わせた際のCSSは「a:hover」で指定します。
また、訪問済みリンクの色彩などの指定は「a:visited」で指定します。

カーソルを合わせた際に下線を表示させると、クリックできるリンクであることが分かり易くなり、ユーザビリティーの向上につながります。

例えば、通常のリンクは下線なしの状態で表示させるようにし、カーソルを合わせた際にだけ下線を表示させる場合は、「a:hover」にtext-decorationを指定し、以下のように記述するとよいでしょう。

text-decoration:none; → 下線なし
text-decoration:underline; → 下線あり

■通常のリンク → 下線なし

a { 
text-decoration:none;
}

■カーソルを合わせた際のリンク「a:hover」 → 下線あり

a:hover {
text-decoration:underline;
}

また、訪問済みリンクの色彩についても設定したい場合は「a:visited」を設定します。デフォルトの状態では紫色が表示されますが、他の色に設定する場合は以下のように記述するとよいでしょう。

■訪問済みのリンク「a:visited」

a:visited {
color:#0000ff;
}

ちなみに、何も設定しないデフォルトの状態では以下のようになっています。

■デフォルトの状態(例:Firefoxの場合)

・下線あり
・「#0000EE」の青色
・カーソルを合わせても下線ありのままで変化なし
・訪問済みのリンクは「#551A8B」の紫色

これをスタイルシートで書けば、このようになります。

a {
color:#0000EE;
text-decoration:underline;
}

a:hover {
color:#0000EE;
text-decoration:underline;
}

a:visited {
color:#551A8B;
text-decoration:underline;
}

一番クリックされやすいリンクの色は青ですが、同じような青色でも「#0000ff」や「#0000ee」などがあり、濃い青と明るい青の違いでクリック率が変わってきます。

サイト全体の色調によっても違ってきますが、このデフォルトの状態が一番ユーザビリティーが高いものと思われますので、リンクの色を赤とか黒とかに設定するのは避け、青色で指定するようにしましょう。

関連:リンクのhtmlタグ
リンクのhtmlタグ <a href=""></a>