Topics
*相対パス*
7タグ2日目・4日目で「相対パス」について説明していますが、質問が絶えないので、ここで詳しく解説させてもらうことにしました。
よって、このページは、7タグ2日目・4日目をすでに読んだ方を対象としていることをご了承ください。
たとえば次のような構成になっているとして、それぞれの位置関係をご説明します。
階層(1) |
|
階層(2) |
|
階層(3) |
homepage |
┳ |
top.html |
|
|
|
┣ |
profile.html |
|
|
|
┣ |
photo.jpg |
|
|
|
┣ |
image |
┳ |
title-logo.gif |
|
┃ |
|
┗ |
icon.gif |
|
┗ |
hobby |
┳ |
piano.html |
|
|
|
┣ |
soccer.html |
|
|
|
┗ |
photo.jpg |
|
7タグ2日目で、
top.htmlから
profile.htmlにリンクを張るときは、
<a href="
profile.html">プロフィール</a>
と書けば良いとお話ししました。
上の図でいうと、
top.htmlも
profile.htmlも、
同じフォルダ(homepage)
の階層(2)にあるということです。
このように考えると、
piano.htmlに
soccer.htmlのリンクを張る場合は
<a href="
soccer.html">サッカー</a>
と書けば良いことがわかると思います。
piano.htmlと
soccer.htmlは、
同じフォルダ(hobby)
の階層(3)にあるからです。
では、階層(2)の
top.htmlに、階層(3)の
title-logo.gifを貼り付けたい場合はどうでしょうか?
これは4日目で解説したとおり、
<img src="image/
title-logo.gif">
となります。
上の図でいうと、階層(2)の
top.htmlから、同じ階層(2)のimageフォルダを最初に呼び出しているわけです。
このように相対パスは、
パスの先頭に同じフォルダ・同じ階層のものが来ることが前提になります。
ですから、
top.htmlのソース中に
<img src="
title-logo.gif">
と書いても、画像は表示されません。
階層(2)に
title-logo.gifは存在しないからです。
同じように考えて、階層(2)の
top.htmlから、階層(3)の
soccer.htmlにリンクを張る場合は、
<a href="hobby/
soccer.html">サッカー</a>
となることがわかると思います。
では、次の場合はどうでしょうか?
- I.階層(3)のpiano.htmlから、階層(2)のtop.htmlにリンクを張る場合
- これは今までと逆のパターンで、階層をひとつ上にのぼることが必要です。
階層をのぼるには、../という記号を、パスの先頭につけます。
<a href="../top.html">トップにもどる</a>
たとえば、piano.htmlに「photo.jpg」を貼り付ける場合にも、次のような違いが生じます。
<img src="photo.jpg">・・・階層(3)のphoto.jpg(hobbyフォルダに入っているほう)
<img src="../photo.jpg">・・・階層(2)のphoto.jpg
- II.階層(3)のpiano.htmlに、階層(3)のtitle-logo.gifを貼り付ける場合
- どちらも階層(3)なので <img src="title-logo.gif"> と書けばよさそうに思うかもしれませんが、これだと画像は表示されません。
piano.htmlとtitle-logo.gifは、たしかに階層の数は同じ(3)ですが、違うフォルダにあるので、
・一度階層をのぼり( ../ )、
・リンク先(image)の階層をおりる
というようにパスを指定しなくてはいけません。つまり、こうなります↓
<img src="../image/title-logo.gif">
余談ですが、
階層を2つのぼるときは <a href="../../リンク先"・・・
3つのぼるときは<a href="../../../リンク先"・・・
このように ../ を増やすほど上の階層にのぼります。
相対パスは慣れるまで大変だと思いますが、使いこなせるように頑張って勉強しましょう!
Copyright (C) 7tag project dv