HTMLとCSSで作るウェブサイト作成入門

リンクや画像ファイルの相対パス指定

 <a>タグでリンクを張ったり、<img>タグで画像を表示したりする場合、リンク先や表示させる画像ファイルを指定する方法として「絶対パス指定」と「相対パス指定」があります。
 絶対パス指定は、いわば「愛知県名古屋市○○99−99」のような住所による指定で、インターネット上であれば、「http://xxx.xxx.ac.jp/aaaa/bbb/test.html」のようなURLが相当します。
 相対パス指定は、「現在地から100メートル進んだところにあるビルの3階のエレベーター降りて右側のフロア」というように、現在のHTMLファイルから見た相対的な場所を指定する方法です。外部のサイトへのリンクの場合は、絶対パスで指定する必要がありますが、自らのウェブサイト内では、相対パスで、HTMLファイルや画像ファイルを指定することができます。
 例えば、次のようなフォルダ構造がある場合を考えます。

相対パス説明フォルダ構造

★リンク指定の場合
 上図のようなフォルダ構成のとき、index.html内でlink.htmlとmenu.htmlに相対パスでリンクを張るには、次のように指定します。

index.html内でのリンク指定
 <a href="link.html">LINK.HTMLへのリンク</a>
 <a href="photo/menu.html">MENU.HTMLへのリンク</a>

 index.htmlから見て、同じフォルダwebkisoに格納されているlink.htmlへのリンクは、そのままファイルを指定すれば実現できます。一方、index.htmlから見て、同じフォルダwebkisoに設定されている下位フォルダphotoに格納されているmenu.htmlへのリンクは、「フォルダ名/ファイル名」と指定します。もし、フォルダが何階層もある場合は、「フォルダ名/フォルダ名/フォルダ名/ファイル名」という形になります。
 一方、逆に下位フォルダにあるalbum.htmlから、menu.htmlやlink.htmlにリンクを張るにはどうしたら良いでしょうか。同じフォルダphotoに格納されているmenu.htmlへのリンクは、そのままファイル名を指定すればOKです。ただ、上位フォルダ(webkiso)に格納されているlink.htmlへのリンクは、次のように指定します。

album.html内からlink.htmlへのリンク指定
 <a href="../link.html">LINK.HTMLへのリンク</a>

 上位フォルダにさかのぼる指定は、ピリオド(ドット)を2つ「..」(←見えにくいですが2つ半角ピリオドが並んでいます)で指定します。つまり、「../link.html」という指定は、現在のHTMLファイルの一つ上位のフォルダにあるlink.htmlというファイル、という意味になります。この方法では、上位フォルダにあるファイルだけでなく、上位フォルダにある「フォルダ」も指定することができ、これを使って、例えば、上位フォルダwebkisoの中にあるimageフォルダの中のlist.htmlという指定を「../image/list.html」とすることが可能です(つまり、ディレクトリ階層を一つ上がって一つ下がるという指定)。さらには、より上位のフォルダにあるファイルも指定でき、例えば、「../../../xxx.html」と指定すると、現在のHTMLファイルの3つ上位のフォルダにあるxxx.htmlというファイル、という意味になります。
 これらの事をまとめると、以下の表のようになります。

リンク設定での相対パス例

★画像指定の場合
 画像ファイルを<img>タグのsrc属性で画像ファイルを指定する場合も同様です。上図のようなフォルダ構成のとき、imageフォルダに画像ファイルlogo.jpgをalbum.htmlで表示するために、相対パスはどのように指定できるでしょうか。album.htmlの上位フォルダwebkisoに格納されているフォルダimageの中にあるlogo.jpgということになりますので、次のように設定できます。

album.htmlにimageフォルダに格納されたlogo.jpgを表示する
 <img src="../image/logo.jpg">

 相対パスの指定方法は、先のリンクと同じです。上位フォルダwebkisoに設定されているimageフォルダに格納された画像ファイルlogo.jpgを指定しています。
 これらの事をまとめると、以下の表のようになります。

画像表示での相対パス例
   
 
 
 
SPONSORED LINK


 

SPONSORED LINK