リンク色の変更

リンクの状態

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

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

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"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <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>