ハイパーリンク!

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>
    ...省略...
    

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

図:index.html の表示例

相対 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

現在ユーザが居るディレクトリ(ブラウザが開いているファイルが存在するディレクトリ)のことを、カレント・ディレクトリと呼びます。相対 URL は、基本的にはカレント・ディレクトリからの相対的な位置を指し示す仕組みです。


Copyright © 2002 SUGAI, Manabu. All Rights Reserved.
SEO [PR] ܂Ƃ߃[ Windows7 ₦΍ f ^T[o[ Cu`bg SEO