リンク色の変更

リンクの状態

<a> タグで作成したリンク部分は、そのリンクの状態に対して色や上下線の有無などを指定することができます。リンクの状態は以下の4つに分けられ、色や上下線の有無を変更する場合はその状態のクラスに対してCSSを適用させます。

リンクの状態に対するクラス

a:link
リンク先のファイルを見てない状態。
a:visited
リンク先のファイルを見ている状態。
a:hover
リンクにポインターを合わせた状態。
a:active
リンク部分をクリックしている状態。

指定できるプロパティ

color, background-color
CSSで定義された色の値を指定できます。Webセーフカラー参照。
text-decoration
none:線なし、underline:下線、overline:上線などの値を指定できます。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 a:link{color: #0000ff;}
 a:visited{color: #00ff00;}
 a:hover{color: #ff0000; text-decoration:none;}
 a:active{color: #00ffff;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <p>リンク先のファイルを見ているか否かで色が変わります。</p>
 <p>リンクにポインターをあわせると赤く表示されます。</p>
 <p><a href="./">リンク<a></p>
</body>

</html>