要するに絶対パスは後々面倒なんですね？
はっきり言って全てを http などから始まる絶対パスでリンクさせれば、リンクも画像表示も問題ありません。例えばここに当サイトのトップページへのリンクする場合は <a href="http://www.hayasoft.com/rara/index.html">トップ</a> で何の問題もありません。事実、他のサイトへリンクする場合はこのように絶対パスを記入します。しかしながらこの 【 www.hayasoft.com/rara/ 】 の部分は絶対に変わらないと言い切れるでしょうか？このアドレスの意味がわかってくると、この部分が不定であることがわかると思います。皆さんも、お気に入りでいつも見ているサイトが「 移転します。 」 などと言ってアドレスが変更された所をご覧になったことがあると思いますが、これはホームページを公開する為のサーバーを移ったりした為です。簡単に言えば引っ越したから住所が変わったって事ですね。ですから【 www.hayasoft.com/rara/ 】 の部分は、サーバー等の、ホームページを公開する環境によって左右されるもので不定なので、こうして絶対パスで記載していると、引っ越したりする度に、何十、何百箇所とあるリンクの記述を変更しなければなりません。それにそもそも、発表する段階 ( サーバーと契約しないと ) にならないと、http などから始まる絶対パスを知ることが出来ません。
要するに絶対パスは後々面倒なんですね？
まあそういう事です。
そこでこうした問題を解決するのに必要なのが相対パスなのです。しつこくマンションの例で説明しますが、どこに引っ越しても苗字や名前までは変えませんよね。住所は変わるかもしれませんが、自分が最初から持っている、もしくは自分で決めた物は変わらないのです。例えば index.html これは自分で名前を付けましたのでどこへ行っても変化する事はありません。他にも profile.html diary.html photo.html… など、自分で決めた名前の物は変わりません。これからの説明では、一軒家とかマンションなどがちょっとした規模のずれを生じさせながら出てきます。あまり考えすぎずにお読みください。
ぼーっ…。
考えなさ過ぎです。
さて、index.html さんが、ある三階建てアパートの最上階に住んでいたとしましょう。同じ階には profile.html さんや diary.htmlさん、 photo.htmlさん等が住んでいます。このある三階建てアパートというのが貴方が最初に創った website というフォルダなのです。イメージが出来ますでしょうか。ですから、繰り返しになりますが、index.html さんから見れば、他の人達は、隣のとか、同じ階のという指定で住みます。住所をいちいち言う必要がありません。これはそのアパートが日本にあろうが、アメリカにあろうが同じ事です。ですからこの不変の部分でリンクなどを指定する事によって、どんな環境でも同じ記載でリンクが出来たり、画像を表示させる事が出来るのです。
そう考えると相対パスって便利ですね。でも日本語で隣の鈴木さんと言ってもアメリカの人には通じないですね。
言葉の問題じゃないんですけど…。
説明が難しいので概念的なことを言います。ディレクトリーとはフォルダの事です。これからは、「同じディレクトリーに」とか「一つ下の階層に」とか「二つ上のディレクトリーに」などという言葉が出てきます。階層という言葉とディレクトリーという言葉は同義 ( 同意 ) に扱ってください。今までの例で書くとすると、一番最初に創った websiteフォルダ の事を第一階層 ( ディレクトリー ) と呼びます。ですから、index.html prfile.html diary.html photo.html 等はすべて同じ階層にあると表現できます。そして問題なのが imageフォルダ です。これは今挙げたHTMLファイルと同階層にあるのは間違いありません。ただし、中に入っている pho01.jpg 等のファイルは、一つ下の階層 ( 第二階層 ) という事になります。つまり、フォルダが増える ( 含まれる ) に連れて、階層が増えていくという事になるのです。
フォルダが増えるごとに階層が増えていくんですか？
ちょっと違います。フォルダの中にフォルダが入ると階層が増えて行くのです。
あるフォルダを開いたときに、同時に見えるファイルやフォルダは同階層にあるということになります。つまり、リンクするときや、画像を利用するときは、最終的なファイル名だけでリンクする事が出来ます。このようなそれぞれの階層を視覚的に捉えるために、系統図 ( 樹形図 ) が用いられる事が多々ありますので、ここで紹介しておきます。
┳
┳ 
こうやって見るとわかり易いですね。えーっと。webサイトフォルダの中に8個のHTMLファイルと一つのimageフォルダがあって、imageフォルダの中に9個の画像ファイルがあるんですね？
正解です。こうやってファイル同士の関係を頭の中で整理できるようになれば相対パスは簡単です。8個のHTMLファイルと一つのimageフォルダは同じ階層、そして同じディレクトリ（websiteフォルダ内）にあり、それより一つ下の階層のimageフォルダ内（ディレクトリ）に9個の画像ファイルがあるのです。
言葉で説明してもわかり難いことというのは多々あるものです。やればやるほど修正したり元に戻したりするのが大変になるので、画像を見ながら理解していくだけで結構ですが、わかる範囲で実験してみる事もお勧めします。
┳
━ ━ 
━ 
━
上のような構成になっていると仮定します。
えーっと、全部のファイルとフォルダがwebsiteフォルダに入っていて…。
大丈夫ですか？
はい。なんとか理解できます。
それではこれからあるHTMLファイルである画像を使う場合や、あるHTMLファイルとあるHTMLファイルをリンクする場合の記述の仕方を一問一答方式で説明して行きます。フォルダ内のファイル構成を図を見たり思い浮かべたりしながら一緒に考えたり確認したりしてください。
※ <img src="../pho02.jpg" alt=""> ではないことに注意して下さい。
同じフォルダ内にある場合はそのままファイル名を記入します（もしくは./ファイル名）。一つ上の階層に上がる為には『 ../ 』を付けます。二つ上がる場合は『 ../../ 』です。三つあがる場合は『 ../../ ../』です。四つ上がる場合は…わかりますよね。逆に階層を降りる場合は入って行くフォルダ名を記入します。上がったり下がったりする場合はそれを組み合わせます。ただそれだけの事なのです。
それでは一つだけ抜けている例で問題です。『 photo.html から index.html へリンクする場合 』は どのような記述をすれば良いでしょうか？
えーっと、階層を一つ上がるんだから『 ../ 』をつけるんですよね。だから <a href="../index.html"> でどうでしょうか？
正解です！この相対パスをしっかり理解して自由自在に扱えるようになりましょう。
この相対パスの理論はとても躓く人が多く、質問掲示板でも頻繁に質問される項目です。何度も復習して使い方に慣れましょう。『 画像が表示されない 』というトラブルの多くがこの相対パスの記述ミスによる物です。わからなくなったら何度でもこのページに戻ってきて、上の図と例を参考にしながら記述を見直してみてください。
全ての場合を挙げていたらきりがないのでこの辺りにして置きます。後は組み合わせや繰り返しの問題です。
ファイルが同じフォルダ内にある場合はそのままファイル名を記入するか『 ./ファイル名 』のように記述しますが、この『 ./ 』は同一(その)階層という意味で用いられます。ですから一つ下の階層に降りる場合には『 ./フォルダ名/ファイル名 』のような記述になります。この『 ./ 』は付けても付けなくても構いません。付けた方が良いという記述をどこかで見かけたような気もしますが当サイトでは現段階では付けていません(既に創ってしまったページの修正が大変なので…その内直します)。この先の記述で記述が混在するかもしれませんが、そのような意味なのだと理解してください。
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]