;

HTML講座(16) 相対パスと絶対パス

2011/11/01 0 コメント

 

つぎのように「yaoya」フォルダの中に「mise.html」と「food」フォルダがあります。

「food」フォルダの中には、「yasai」フォルダと「kudamono」フォルダがあり、それぞれにHTMLファイル「tomato.html」と「banana.html」が入っています。

このように階層の違う場所にあるファイルにリンクする場合は、ハイパーリンクの参照先を記述するときに「通り道(パス)」を書く必要があります。

パスの記述方法として「相対パス」と「絶対パス」の二通りがあります。通常は相対パスを使って記述します。

 

◆mise.html

<html>
 <head>
  <title>相対パス</title>
  </head>
 <body>
  <ul>
   <li>イチゴ</li>
   <li>リンゴ</li>
   <li><a href="food/kudamono/banana.html">バナナ</a></li>
   <li>ミカン</li>
   <li>カボチャ</li>
   <li>ダイコン</li>
   <li>トマト</li>
  </ul>
 </body>
</html>

「相対パス」とは、この場合「mise.html」ファイルの現在位置から見たときに相手がどこにいるかという道筋を記述します。たとえば、「banana.html」の場所は「mise.html」からみたときに、「food」フォルダの中にある「kudamono」フォルダに入らないとなりません。そこで参照場所を「food/kudamono/banana.html」と順繰りに書いていくことになります。階層の区切りは「/」(スラッシュ)を使います。

では階層をあがっていくような場所のときはどうするかというと、つぎのようになります。

◆banana.html

<html>
  <head>
   <title>バナナのページ</title>
  </head>
  <body>
   <p>バナナなんだなぁ、ここは。</p>
   <p>さっきのリストに
    <a href="../../mise.html">もどる</a></p>
  </body>
</html>

「yasai」「kudamono」フォルダのように下の階層にもぐって行くときに分岐するような場合はしっかりと通り道を書いていくわけですが、階層をあがる場合とくに通り道を書かなくても良く、記述を省略できます。

「階層をひとつあがる」が「../」なので、この場合「banana.html」ファイルから「mise.html」にリンクを張るには二つ階層をあがらなければならないので「../../mise.html」という記述になります。

つぎに、トマトページからバナナページにリンクするにはどうするかというと、1階層上に上がり、「kudamono」フォルダの中にある「banana.html」を参照するという記述になります。

◆tomato.html

<html>
  <head>
    <title>トマトのページ</title>
  </head>
  <body>
    <p>トマトですよ、ここは。</p>
    <p>バナナページに
        <a href="../kudamono/banana.html">いく</a></p>
  </body>
</html>

相対パスは重要なのでしっかりと理解しておきましょう

Tagged , ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です