Home | 目次 | Prev | アンカーの応用 | Next

ハイパーテキストとしてアンカー（リンク）は欠かせません。アンカーに何もスタイル付けをしない場合は、ブラウザの初期値でそれぞれが表示されます。ここでは、要素の相関関係を使ったアンカーの記述とスクリプトを使ったアンカーの表現を対比させてみます。

■ スタイルシートの応用

アンカーをスタイルシートで、様々に変化できます。スタイルシートにおけるアンカーは「擬似クラス」で分類されており、要素との相関関係で表現を変化させます。

■ スタイルシートによるアンカー

下記のスタイルシートは、このページで使われているアンカーの設定です。ごく普通に使われるスタイルシートです。

a:link { color: #03f; text-decoration: none}
未訪問のリンク。文字色はやや明るい青色で、下線はありません。

a:visited { color: #36c; text-decoration: none}
訪問済みのリンク。薄い青色で下線はありません。

a:hover { color: #000; text-decoration: none; background-color: #ff0}
マウスをアンカーの上に触れたときに、黄色の背景色に黒の文字色になります。

a:active {color:#f00 }
クリックをしたとき文字が赤色になります。

■ 要素との相関関係によるスタイルシート

下記のスタイルシートはすべて、リストの li要素内でのみ表現が可能な設定です。

li a:link { color: #fff; background-color: #090; text-decoration: none }
li要素内の未訪問リンクでは、緑の背景色に白の文字色となり下線は付きません。

li a:visited { color: #000; background-color: #ff0; text-decoration: none }
li要素内の訪問済みリンクでは、黄色の背景色に黒の文字色で下線は付きません。

li a:hover { color: #fff; background-color: #00c; text-decoration: none }
li要素内のアンカーにマウスを当てると、青の背景色で白の文字色となります。

＜結果＞