絶対パスと相対パス

A要素での相対パスでのリンクのやり方

A要素の説明を終える前に、リンクについて重要なポイントがあります。それが今から説明する「絶対パス」と「相対パス」です。

これはA要素だけでなく、次に説明する、画像を表示させるためのIMG要素など、他のファイルを扱うすべての要素を使う上で必要なお約束なので、絶対に覚えてください。

このページのURLは「http://te-koku.com/hp/html-youso/a.html」なので、「http://te-koku.com/hp/」の「html-youso」というディレクトリ（フォルダ）の中にあるということです。

このページの前の「文字の形を変える」のページも同じく「html-youso」ディレクトリの中にあり、URLは「http://te-koku.com/hp/html-youso/bius.html」です。

もしこのページ（http://te-koku.com/hp/html-youso/a.html）から、「文字の形を変える」のページ（http://te-koku.com/hp/html-youso/bius.html）へリンクしようと思ったら、どのようにA要素とhref属性を使えばいいでしょうか。リンクさせるための言葉は「文字の形を変える」とします。

まず思いつくのが、先ほど説明した方法です。

<a href="http://te-koku.com/hp/html-youso/bius.html">文字の形を変える</a>

しかしもう一つ方法があります。

<a href="bius.html">文字の形を変える</a>

このやり方でも上と全く同じページへリンクすることができます。同じディレクトリのファイルへリンクする場合、「http://te-koku.com/hp/html-youso/」という、ディレクトリの部分を省略することができるのです。

では「http://～」を省略して、違うディレクトリのファイルへリンクするにはどうすればいいのでしょうか。例えば「このサイトの説明」ページのURLは「http://te-koku.com/hp/first.html」で、このページのある「http://te-koku.com/hp/html-youso/」ディレクトリより上にあります。そのページにリンクしたい場合は、

<a href="../first.html">このサイトの説明</a>

と書きます。この「../」(二個のドットとスラッシュ)がポイントで、リンクする元のページから見て、リンク先のファイルが一つ上のディレクトリにあることを指しています。

二個上のディレクトリなら、「../../」と書きます。

ちなみに「.」が一個の「./」は、同じディレクトリを指しています。先ほどの例ですと、

<a href="bius.html">文字の形を変える</a>
と
<a href="./bius.html">文字の形を変える</a>

は同じです。

次は、下の図を見てください。

このように、ディレクトリ「folder1」から「folder2」にあるファイル、例えば「f2.html」にリンクするにはどうすればいいのでしょうか。

単に「<a href="folder2/f2.html">」と書くと、「『folder1』の下の『folder2』というディレクトリにある『f2.html』」を指してしまうので、正しくリンクできません。

この場合は、「<a href="../folder2/f2.html">」と、最初に上へディレクトリを表す「../」をつけてやる必要があります。

では、次の例ではどうでしょう。リンク先のファイルの名前は「f12html」とします。

答えは、「<a href="../../folder2/f12.html">」です。

「folder1-1-1」から「folder1-1」、「folder1-2」へ行くのではなく、一度「folder1」まで上って、それから「folder1-2」へ下りるようなイメージだと分かりやすいかもしれません。

絶対パスの必要性

さて、今まではあくまでも同じサイトにあるディレクトリのファイルをリンクする方法を説明してきましたが、このサイトとまったく関係のないサイト、例えばあの「Google」にリンクする場合はどうでしょうか。 これは「./」を使った方法では絶対にリンクできません。素直に、

<a href="http://www.google.co.jp/">Google</a>

と、「http://」から書くしかありません。つまり、同じサーバーにあるファイルなら、「./」を使ってリンクすることができるということです。

このように、「http://～」を書かずに、「./」を使って、リンク元のファイルから見て、リンク先のファイルがあるまでのディレクトリを表すパスを、「相対パス」といいます。一方、「http://～」からリンク先のファイルまでをすべて書くのは「絶対パス」といいます。

ホームページを作る場合、同じサイトの中にあるファイルへリンクする場合は、相対パスを使うべきです。 なぜなら、第一に一つ一つ「http://」からパスを書くのは面倒くさいこと、次に、もしホームページを移転してURLが変わった場合、絶対パスでリンクしていたら全部修正しなくてはいけないということなどが挙げられます。

違うサイトへリンクする場合は、さっきのGoogleの例のように、絶対パスを使うべき、というより絶対パスを使わなければリンクできません。