XHTML/CSS・トップ | CSSプロパティ・目次

●リンク部分に色を指定する

 リンク部分に適用させるスタイルの書式です。

a:link {
 color: #bbffff;
}
a:visited {
 color: #ffffff;
}
a:hover {
 color: #ff00ff;
 background-color: #ffffff;
}
a:active {
 color: #ff0000;
}

【解説】

a:link (まだ見ていないリンク部分の色)
a:visited (すでに見たリンク部分の色)
a:hover (ポインタをリンク部分にポイントしたときに変化する色)
a:active (クリックした瞬間のリンク部分の色)

 セレクタにしては先頭に「a:」が付いて変わっています。これらは擬似クラスと言われるもので、4種類の指定順番は必ず、「link」「visited」「hover」「active」の順にする必要があります。順番を変えたりすると、色が正しく表示されないことがあります。また、同じ色を指定してはどのリンク色なのかわからなくなってしまいますのでそれぞれ、異なるリンク色を指定する決まりがあります。

※background-colorはこの場合、リンク部分だけの背景色のプロパティとなります。好みと必要に応じて付加したり、色を変えてみると良いでしょう。ただし、文法的には colorプロパティを指定した場合は、background-colorプロパティを指定し、background-colorプロパティを指定した場合は、colorプロパティを指定しなければなりません。(エラーではありませんが、警告になります。)

XHTML/CSS・目次 | リンク(擬似クラス)・目次

Copyright (C) 2004-2007 http://www.xml.vc/