アンカー/HTML基礎講座

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

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

■ リンクの記述

リンクを貼る要素として次のように記述します。

<p>
<a href="index.html">Home</a>
</p>

a要素は、href属性で示された URI へとリンクするものです。通常、Webブラウザではこの要素に囲まれたテキストなどに、色と下線をつけます。つまりそこがリンクであることを区別してユーザにその違いを示します。

スタイルシートを利用することによって、この表示を独自のスタイルに変更することが可能なので、自分流のアンカーを設定することができます。ただし、そこがリンクであることと、未訪問と訪問済みの区別がつくように設定してください。

また、リンクをアンカーで埋め込む場合、「ここ」とか「ここをクリック」などとしないようにしましょう。リンク先の内容が理解できるように配慮してください。

アンカースタイルの詳細は CSSリファレンスの擬似クラスを参照してください。

a要素の持つ属性のもう１つに、name属性があります。同一ページ内の移動に便利な属性で、使い方次第で、ユーザにダイナミックなナビゲーションを示すものになります。記述方法として、

<a name="top">ここが上です</a>
       ：
       ：
<a href="#top">Top</a>

と、なります。name属性によって示された URI は、href属性にハッシュマーク「 # 」を付記してリンクとします。ページのはじめに目次をつけて、その内容を同じページで表示するときには役に立つ属性になっています。当サイト内の用語解説のページでは、name属性が山ほどあります。

なお、アンカーを示す a要素は、インラインレベル要素として定義されていますので、記述の際には、ブロックレベル要素内で配置する必要があります。

■ 相対パス

href属性で示す URI には、相対パスと絶対パスがあります。サイト内のディレクトリがまったく同じであれば、パスを意識することはですが、画像イメージや CSSファイル、あるいは特定の HTML文書などをディレクトリ別の整理する必要がある場合には、互いの位置関係を示す相対パスの記述が必要になります。下記の図をご覧ください。当サイトのサーバー上のディレクトリです。

	ディレクトリ： banban
		`HTML`文書 index.html
		ディレクトリ：lectur ht.html ht2.html ht3.html …
		ディレクトリ：tips diction.html browser.html …
		ディレクトリ：images title.gif hana.png samole.jpg …
		ディレクトリ：css style.css …

www.scollabo.com/banban/ のディレクトリの１部をツリー構造で表したものです。banban というディレクトリの中身は、index.html、lectu、tips、images、css という文書やディレクトリが存在します。

index.html から見た tips ディレクトリの中の ht.html へのリンクの記述は

 <a href="tips/ht.html">WEBとHTML</a>

となります。つまり１つ下の階層のディレクトリへのリンクは　ディレクトリ名/ファイル名　という 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 の語尾にスラッシュをつけるようにしましょう。

初版公開日 2002年7月4日最新更新日 2004年2月18日

■ ナビゲーションリンク