ホームページ基礎知識講座「第3章 リンクについて」

ホームページ(Webサイト)の特徴でもある、ハイパーテキストのリンクの作成の方法(アンカータグ)を紹介

■ リンクの作成

第2章まででHTMLの基本的な書き方を学びました。しかし第2章まででは見出しと本文だけからなるあまり魅力的とは言えないものしか作ることが出来ません。今回はWebドキュメントつまりホームページの本当の最大の特徴でもある、ハイパーテキストのリンクの作成の方法を紹介します。

HTMLドキュメントでリンクを作成するために使用するタグは<A>タグです。このタグは"Anchor"日本語で言えば"錨"という意味になります。つまり錨を打って他のドキュメントにリンクをすると言うことです。

この<A>タグは前回までの単純なタグとは違って、リンクに関する情報(属性)を指定するためにやや複雑な書き方をします。具体例を示してそれを説明します。

<A HREF="http://yakibuta.blog29.net/">焼豚ワンダーランド</A>

まず初めの部分<A HREF="http://yakibuta.blog29.net/">でアンカーであることを示した後にHREFという属性でこのリンクが示すファイル名またはURLを示します。AとHREF(Hypertext REFerenceの意味)の間に一つスペースを置きリンク先のファイル名かURLをダブルクォート"で囲みます。

URLとはUniform Resource Locatorの略語で、インターネットのサービス・ファイルの所在地の表記法のことで、画像と情報/資源がインターネット上でどこに存在するか、つまり宛先(住所)を表すものです。

URLはリンク先の資源が、どのようなプロトコル(規格)であるかをまず示します。 最もよく使われるURLの形式は"http"です。これはWWWサーバがネットワーク上に ドキュメントを送り出すときに使われるプロトコルで、多くのホームページではこの "http"でURLが始まっています。

2番目の「焼豚ワンダーランド」の部分はブラウザで表示させたときにリンクであることを示すリンクテキストになります。そしてそれが分かるようにように下線が引かれたり赤や青で表示されたりというように強調された文字で表示され、そこをクリックすることによってHREFで指定されたドキュメントへジャンプします。

最後の部分ではこのアンカータグを閉じています。閉じるタグを記述しないとこれ以降の部分が全てリンクテキストとみなされてしまいますので注意が必要です。

実際に上に書いたリンクを実行すると以下のようになります。

焼豚ワンダーランド

 絶対パス・相対パスについて

それでは次にHREF属性においてどのようにしてリンク先を指定するかについて説明します。リンク先のURLを完全に指定するには、プロトコル名、サーバ名およびパス名も含めたファイル名を指定しなくてはなりません。その指定方法には「相対パスによる指定」と「絶対パスによる指定」の2種類あります。

「相対パスによる指定」は、現在の文書の位置を基準としたファイルの相対的な位置を指定する事です。 index.htmlのようにファイル名のみを指定していると、相対パスを使っていることになります。(相対パスは、URLのhttp://などを省略したURLと考えられます)。

この場合ブラウザは、現在の文書が入っているディレクトリの中でファイルを探します。そのディレクトリの中に指定されたファイルがなければ、ファイルを見つけることはできません。以下に相対パスを使った指定の方法とその解釈についての例をあげます。

パス名意味
HREF="test.htm"test.htmが現在のドキュメントと同じディレクトリ内に存在する
HREF="abc/test.htm"現在のドキュメントと同じディレクトリにabcというディレクトリがあり、そのabcというディレクトリにtest.htmが存在する
HREF="../abc/test.htm"現在のドキュメントの一つ上のディレクトリにabcというディレクトリがあり、そのabcというディレクトリにtest.htmが存在する
HREF="../../test.htm"現在のドキュメントの二つ上のディレクトリにtest.htmが存在する

「絶対パス」は、最上位レベルのディレクトリから、ファイルの位置を指定するものです。完全なURLを指定するには、絶対パスを使います。すなわち、プロトコル名(Webページであればhttp:)から始まり、//www.を書き、その後ろにサーバ名、そしてスラッシュ(/)ではじまる絶対パス指定のファイル名が続きます(例えば、http://www.yahoo.co.jp/index.htmlのようになります)。

それぞれのディレクトリは、/で区切ります。URLを間違えると、ファイルを見つけることはできません。ディレクトリの名前に変更があれば、文書のなかに書かれているパスも変更する必要があります。


相対パスと絶対パスのどちらを用いるか

自分で作成したHTMLドキュメント同士をリンクさせるときには「相対パス」を利用して指定して下さい。というのは、絶対パスで指定してしまうと、あるディレクトリの名前を変更したりドキュメントを置いているサーバを変えたりした場合に全てのリンクのHREF属性を書き直さなくてはならないからです。

絶対パスで指定した方が簡単ではあるのですが、自分で作成したドキュメント同士でリンクを作成する際には相対パスを用いた方がのちのち自分のサイトを管理する上で楽になります。

また自分のサーバ以外のマシンなどにリンクを貼りたい場合、つまり有名なサイトや友人のサイトなどにリンクを貼りたいという場合にはは絶対パスでそのURLを全て指定しないと、リンクすることが出来ません。なおWebのURLでは大文字と小文字が区別されますので、注意してください。

■ リンクを作成する上での注意

以上はリンクの作成の仕方について述べましたが、次にリンクを作成する上での注意事項をあげておきます。

  • リンクテキストをあまり長くしないこと
  • 曖昧なリンクを作らない
  • リンク先があることを確認する

初めの「リンクテキストをあまり長くしないこと」というのは、Webにおいてリンクテキストの長さには制限がないことから来ています。制限がないためにリンクテキストはいくらでも長くすることが出来ます。しかしリンクテキストはすでに説明しましたが、そこがリンクであることを示すために何らかの形で強調されます。ですからあまりに長い部分をリンクテキストにしてしまうとドキュメント全体が見づらくなってしまうのです。

「曖昧なリンクを作らない」とは、そのリンクによってどこを参照するのか読み手が分からないようなリンクテキストでリンクを作るべきではないと言うことです。リンクテキストを読んでそれがなんであるか分かるように書くようにします。ですから「ここ」等という文字をリンクテキストに使うことは避けるべきなのです。

「リンク先があることを確認する」というのは、リンクした先にそのドキュメントがあることを確認した上でリンクを作成するようにすると言うことです。そのリンク先が自分で作成する予定のもので、まだ完成していないのであればそこにはまだリンクを作らずに、そのドキュメントができてから初めてリンクを作るようにします。

Copyright © 2009 無料ホームページ作成講座 All rights reserved.
DesignTemplate by 無料ホームページHTMLテンプレート