ナビゲーションリンク

ハイパー・テキスト (Hyper Text) のハイライトはまさにリンクにあるといえるでしょう。同一サイト内のページの移動だけでなく、Web全体につながるリンクとして、インターネットを形成している非常に大きな役目を持つ要素です。

その意味では、リンクのないページほど味気ないものです。HTMLがハイパーテキストとして、他の文書や情報にアクセスできるということは、お互いに有益な情報を共有することに他なりません。

リンクの記述
リンクを貼る要素として次のように記述します。
<p>
<a href="index.html">Home</a>
</p>
a要素は、href属性で示された URI へとリンクするものです。通常、Webブラウザではこの要素に囲まれたテキストなどに、色と下線をつけます。つまりそこがリンクであることを区別してユーザにその違いを示します。
スタイルシートを利用することによって、この表示を独自のスタイルに変更することが可能なので、自分流のアンカーを設定することができます。ただし、そこがリンクであることと、未訪問と訪問済みの区別がつくように設定してください。
また、リンクをアンカーで埋め込む場合、「ここ」とか「ここをクリック」などとしないようにしましょう。リンク先の内容が理解できるように配慮してください。
アンカースタイルの詳細は CSSリファレンスの 擬似クラス を参照してください。
a要素の持つ属性のもう1つに、name属性があります。同一ページ内の移動に便利な属性で、使い方次第で、ユーザにダイナミックなナビゲーションを示すものになります。記述方法として、
<a name="top">ここが上です</a>
       :
       :
<a href="#top">Top</a>
と、なります。name属性によって示された URI は、href属性にハッシュマーク 「 # 」 を付記してリンクとします。ページのはじめに目次をつけて、その内容を同じページで表示するときには役に立つ属性になっています。当サイト内の 用語解説のページでは、name属性が山ほどあります。
なお、アンカーを示す a要素は、インラインレベル要素として定義されていますので、記述の際には、ブロックレベル要素内で配置する必要があります。
相対パス
href属性で示す URI には、相対パスと絶対パスがあります。サイト内のディレクトリがまったく同じであれば、パスを意識することはですが、画像イメージや CSSファイル、あるいは特定の HTML文書などをディレクトリ別の整理する必要がある場合には、互いの位置関係を示す相対パスの記述が必要になります。下記の図をご覧ください。当サイトのサーバー上のディレクトリです。
ディレクトリ:banban ディレクトリ: banban
HTML文書 HTML文書 index.html
ディレクトリ:lectur ディレクトリ:lectur
ht.html ht2.html ht3.html …
ディレクトリ:tips ディレクトリ:tips
diction.html browser.html …
ディレクトリ:images ディレクトリ:images
title.gif hana.png samole.jpg …
ディレクトリ:css ディレクトリ:css
style.css …
www.scollabo.com/banban/ のディレクトリの1部をツリー構造で表したものです。banban というディレクトリの中身は、index.html、lectu、tips、images、css という文書やディレクトリが存在します。
index.html から見た tips ディレクトリの中の ht.html へのリンクの記述は
 <a href="tips/ht.html">WEBとHTML</a>
となります。つまり1つ下の階層のディレクトリへのリンクは ディレクトリ名/ファイル名 という URI の記述となるわけです。
絶対パス
相対パスに対して、絶対パスは、http://www.scollabo.com/banban/ のように、基準となる絶対 URI を指します。
同一のサイト内で、お互いの文書をリンクする場合には、ほとんど相対パスが使われますが、他の Webサイトへリンクする場合には、絶対パスで記述します。
下記の絶対パスの違いは難でしょうか?
 http://www.scollabo.com/banban/
 http://www.scollabo.com/banban/index.html
両者ともまったく同じサイトにリンクします。ディレクトリ内に、index.html が存在する場合には、/ までの記述でも問題ありません。その場合、HTTPサーバがリクエストされたディレクトリ内の index.html を探し出してくるからです。ただし index.html がないと最悪の場合、そのディレクトリ内のすべてのファイルが、ブラウザ上でさらけ出される危険があります。
そのために、Webサイトの各ディレクトリにはできるだけ、index.html を用意する必要があります。
なお、 index.html までを記述しない場合には、必ず URI の語尾にスラッシュをつけるようにしましょう。


This Page is HTML4.01 Valid! 初版公開日 2002年7月4日   最新更新日 2004年2月18日
Copyright(C) 2002-2008 banban