"CSS Tips Factory" : Presented by Nishishi via WordPress.

リンクの状態によって装飾を変化させる [リンク, ]

代表的なブラウザは、リンクの状態に応じて装飾を変化させることができます。
「まだ訪れたことのないリンク」、「既に訪れたことのあるリンク」、「マウスポインタが上に載っているリンク」、「選択状態にあるリンク」
…の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っぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。