リンクされた文字の設定をしよう サイトを作ってどうしても気になるリンク文字の色。CSSを使ってちょちょいと変えてしまおう。 ★可愛いレンタルサーバLOLIPOP!

リンク文字の色は、そのリンクの状態によって4種類にわけられる。初期状態だと訪れたことがあるかないかで2種類にわかれるね。
さらに2種類は何かと言うと、マウスが文字の上にある時の色、訪問中の時の色である。
では、この4種類の設定方法を解説しよう。

まずここで注意して欲しいのは、この4種類には書く順番があることだ。CSSは後から定義された物を上書きするため、順番が大事となる。
先に、「訪れたことがあるかないか」と書いたが、厳密には「通常のリンク色と、訪れた事がある色」となる。

では、この４つの順番を説明しよう。

１．通常のリンク
２．訪問済みリンク
３．マウスが上にある状態のリンク
４．訪問中リンク

では、設定例と解説をしよう。 設定の順番は上記と同じである。

a:link {
	text-decoration: none;
	color: #0000CC;
}
a:visited {
	color: #000033;
	text-decoration: none;
}
a:hover {
	color: #CC6600;
	text-decoration: underline;
}
a:active {
	color: #FF0000;
	text-decoration: underline;
}

プロパティーは、もちろんこれ以外のあらゆるスタイルを設定できる。
ちなみに、ここででてきたtext-decorationとは、テキストに線を引く設定であり、noneは無し、underlineは下線である。

さあこれで、サイト色にあった色を指定しよう。