ハイパーリンク！

2. 相対 URL

絶対 URL と対比的な相対 URL と云うものがあり、同一サイト内（同一サーバマシン内）のリンクはこれが利用されます。

サンプル

本節冒頭で作った index.html を編集してみましょう。

1. 本稿の最初に作った first.html と、 index.html を同じディレクトリに移動してください。
2. index.html をテキストエディタで開いてください。
3. address 要素の説明の後ろを、次のように編集してください。文の途中の改行は不要です。

   ...省略...
   <h3>address 要素</h3>
   
   <p>これも body 要素の子要素で、連絡先を記述する要素です。</p>
   
   
   <h3>a 要素</h3>
   
   <p>インターネット上のリソースを結びつける要素です。例えば、単語を選択すれ
   ば、関連する文書が取得／閲覧できると直感的です。これをハイパーリンクと呼
   び、リンクの始点を始点アンカーと呼びます。</p>
   
   <p>例えば、「<a href="./first.html">簡単な HTML 文書</a>」を始点アン
   カーとして、同じディレクトリの first.html に関連付けることができます。こ
   のとき、「簡単な HTML 文書」をクリックすれば、同じディレクトリの
   first.html を取得して閲覧することが可能になります。</p>
   ...省略...
   

次のように表示されれば成功です：

相対 URL

相対 URL は基準 URL と共に働き、相対 URL は、この基準 URL に対する相対位置として絶対 URL に翻訳されて解釈されます。特別に指定しない限り、当該文書の絶対 URL が基準 URL なります。

当該文書の存在するディレクトリをカレント・ディレクトリと呼び、相対 URL はカレント・ディレクトリからの相対位置を指定する仕組みと云えます。

• ディレクトリ間の区切り文字はスラッシュ /
• カレント・ディレクトリはピリオド一つ .
• 一つ上のディレクトリはピリオド二つ ..

相対 URL の具体例

具体例を挙げます。

いま、ディレクトリ "/public/web/HTML" に、 index.html が存在するとします。

index.html から、同じディレクトリ /public/web/HTML に存在するファイル anchor0.html を指し示す相対 URL は、 ./anchor0.html です。

index.html から、ディレクトリ /public/web/HTML/tut に存在するファイル anchor1.html を指し示す相対 URL は、 ./tut/anchor1.html です。

index.html から、一つ上のディレクトリ /public/web に存在するファイル anchor2.html を指し示す相対 URL は、 ../anchor2.html です。

index.html から、二つ上のディレクトリ /public に存在するファイル anchor3.html を指し示す相対 URL は、 ../../anchor3.html です。

index.html から、ディレクトリ /public/web/CSS に存在するファイル anchor4.html を指し示す相対 URL は、 ../CSS/anchor4.html です。

【サンプル】

<p>この文書は、<a href="../../index.html">Web Site 作成支援</a>の一部です。
詳細は<a href="./index.html">目次</a>を参照ください。</p>

【ディレクトリ階層概念図】

/ （ディレクトリ）
|
+--web （ディレクトリ）
   |
   +--index.html    <<-- Target File 1 (../../index.html)
   |
   +--tut （ディレクトリ）
      |
      +--HTMLtut （カレント・ディレクトリ）
         |
         +--index.html    <<-- Target File 2 (./index.html)
         |
         +--URLrel.html    <<-- This File