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.htmlprofile.htmlも、同じフォルダ(homepage)の階層(2)にあるということです。

このように考えると、
piano.htmlsoccer.htmlのリンクを張る場合は
    <a href="soccer.html">サッカー</a>
と書けば良いことがわかると思います。
piano.htmlsoccer.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.htmltitle-logo.gifは、たしかに階層の数は同じ(3)ですが、違うフォルダにあるので、
 ・一度階層をのぼり( ../ )、
 ・リンク先(image)の階層をおりる

というようにパスを指定しなくてはいけません。つまり、こうなります↓
    <img src="../image/title-logo.gif">
余談ですが、
階層を2つのぼるときは <a href="../../リンク先"・・・
3つのぼるときは<a href="../../../リンク先"・・・
このように ../ を増やすほど上の階層にのぼります。

相対パスは慣れるまで大変だと思いますが、使いこなせるように頑張って勉強しましょう!



Copyright (C) 7tag project dv