[ CSS ] リンクの状態によって表示を変える

スタイルシートを使うと、テキストリンクのアンダーラインを消したり、色を変えたりできます。

記述の仕方は、以下のような感じです。

a { text-decoration: underline; }
a:link { color: #8FABBE; }
a:visited { color: #8FABBE; }
a:hover { color: #006699; }
a:active { color: #8FABBE; }

カーソルが乗っているとか、訪問済みとかの状態は、下の表を参考に・・・

a:link普通の状態 a:visited訪問済み a:hoverカーソルが乗った時 a:activeクリックした時

後で記述したスタイルの方が優先されるので、a、a:link、a:visited、a:hover、a:active の順番で書くようにします。

a:hover と a:active が逆になると、a:active が表示されません。

あるクラス（例の場合は menu）の中の A 要素だけに適用させたい場合は、

.menu a { text-decoration: underline; }

などと記述します。

やりすぎると、訪問済みリンクを普通のリンクと同じ色にしてしまうと、どこのページを見たかわからない。とか、アンダーラインがないと、リンクだと気付いてくれない。など人によっては使いにくいサイトになってしまいます。ご注意を・・・。

現場からは以上です。それでは、またッ！！！