アンカーリンクの応用

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

スタイルシートの応用

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

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

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

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要素内のアンカーにマウスを当てると、青の背景色で白の文字色となります。

<結果>

SiteMap  異なる要素内のアンカー

スクリプトによるアンカー

次に、JavaScriptで表現するアンカーについて解説します。JavaScriptの薀蓄(うんちく)に関しては、JavaScript講座をお読みください。

JavaScriptは、Webページにユーザの操作に反応して変化するインタラクティブな環境を構築できます。実際にWebサイトの圧倒的多数のページで採用されており、まさにデファクト・スタンダードな流れになっています。

このアンカーは JavaScriptで記述しており、画像を変化させて表現しています。
(なお、クリックしてもどこにも移動しませんが、ブラウザによってはページの一番上に移動する可能性があります。)

JavaScriptによるアンカー

このスクリプトで表現したリンクを、スタイルシートでもまったく同じように表示することができます。先ほどの要素の相関関係でアンカーの擬似クラスを設定すると可能です。

CSSによるアンカー

Home

Index

Back

Next

Mail

スクリプトについての詳しい説明は、メールマガジン第23号 をお読みください。



This Page is HTML4.01 Valid! 初版公開日 2002年10月15日   最新更新日 2004年3月18日
Copyright(C) 2002〜2004 banban@scollabo.com