《2007/4/26 木曜日 10:54:23 公開》
リンクの状態によって装飾を変化させる [リンク, 色]
代表的なブラウザは、リンクの状態に応じて装飾を変化させることができます。
「まだ訪れたことのないリンク」、「既に訪れたことのあるリンク」、「マウスポインタが上に載っているリンク」、「選択状態にあるリンク」
…の4種類です。
もう、リンクの装飾としては定番中の定番なので、わざわざ説明するまでもないくらいな装飾です。多くのウェブサイトで使われているでしょう。
以下のように疑似クラスを使うことで装飾できます。
a:link {
color: blue;
}
a:visited {
color: #800080;
}
a:hover {
color: red;
background-color: #ffffcc;
}
a:active {
color: white;
background-color: red;
}
4つの疑似クラスの意味は以下の通りです。
- link疑似クラス:未訪問リンク
- visited疑似クラス:既訪問リンク
- hover疑似クラス:マウスが載ったリンク
- active疑似クラス:選択状態のリンク
上記のサンプルでは、文字色(color)と背景色(background-color)だけを変化させていますが、文字サイズや書体・枠線など何でも変化させられます。
link疑似クラス(未訪問リンク)の装飾は、できるだけ標準(青色)に合わせておく方が望ましいです。あまりにも標準装飾から離れすぎると、アクセス者に「リンク」だと認識されなくなってしまいます。(^_^;)
ちなみに、active疑似クラスが適用されるのは、リンクをマウスでクリックしたときや、[TAB]キーなどでリンクを選択した場合です。
このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]
| « テキスト入力フォームの横幅を指定する |
前後のCSS TIPS < 旧 / 新 > | ボックスをセンタリングする現実的な方法 » |
このCSS TIPSへのトラックバックURLは以下の通りです。
※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。
コメントはまだありません。