リンクの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>