絶対パスと相対パス


せんせい、画像や他のページへリンクしたいんですけど、うまく表示されないんですよ。画像の変わりに「×」って出たり、ページを開くと「not found」って表示されてしまいます。

せんせい

「×」や「not found」となってしまう場合は、ページ・画像が指定した場所にないか、指定のパスが間違ってるのだよ。

パスですか？　<img src ="./***/***.gif">のことですよね？

せんせい

そのとおり。ついでだから絶対パスと相対パスについて勉強しとこうか。パスの知識はホームページを作る時に必ず必要になる。画像やページの指定だけじゃなくて、CGI やJavascriptなんかを使う時にも必要。

絶対パス？？相対パス？？
せんせい

どちらも画像やファイルの場所を指定するパスの書き方だ。最初は分かりにくいから↓の図を見てくれ。住所を例にして説明しよう。

絶対パスと相対パスの説明


せんせい

↑の場所に、それぞれ住んでいたとする。道を歩いていたら、知らない人に私が何処に住んでるか聞かれたとしよう。なんて答える？

初心者

えーと、中流ハイツ３号棟の１階です。
せんせい

では、お姉さんは何処？
初心者

一戸建３０年ローンの家の２階です。
せんせい

そのとおり、それが絶対住所（このページだけの造語です）。絶対というのは「誰から見ても変わることのない住所」という感じで覚えておけばＯＫ。これをホームページのパス風に置き換えるとこうなる。

http://○○県○○市/中流ハイツ/３階/２階/１階/せんせい
http://○○県○○市/一戸建て３０年ローン/２階/お姉さん

ｈｔｔｐ://ではじまるパスは、絶対パスと覚えておいてもいいかな。

じゃぁ、相対は？
せんせい

相対住所（造語です）は自分から見た相手の住所を表す。３階から見た私の住んでる場所は？

初心者

僕の家から１階、２階下にせんせいが住んでます。
せんせい

そのとおり、ホームページのパス風に置き換えるとこうなる。

./２階/１階/せんせい　

ちなみに私から見ると君が住んでるのは

../../初心者　（２階上という意味）

※お姉さんは、同じマンション（同じドメイン）に住んでいないので相対では表せない。 なので他人のホームページにリンクする時は必ず絶対で指定する。

絶対パスと相対パスについては、わかりましたけど、どんな時にそれぞれ使うんでしょう？

せんせい

自分のページの中で画像やリンク先を指定する時は相対パスを使う。絶対パスを使うのは、他の人のページへリンクする場合と覚えておけばＯＫ。相対パスは同じサーバーの中だけで有効なので相対パスでは他の人のページにリンクできないのだ。最後に相対パスの指定方法を書いておくぞ。 




「HPフォルダ」┳　index.html
　　　　　　　┃
　　　　　　　┣　「img」　┳　a.gif
　　　　　　　┃　　　　 　┗　b.jpg
　　　　　　　┃
　　　　　　　┗　「diary」━ diary.html

自分のホームページが「HPフォルダ」に全て入っています。
その中の「img」には「a.gif」「b.jpg」があり
「diary」フォルダの中に「diary.html」がある状態を表しています。

相対パス指定のお約束

・同じ階層にあるものは、そのままファイル名か「./ファイル名」
・下の階層にあるものは、「./フォルダ名/ファイル名」
・上の階層にあるものは、「../ファイル名」
・２階層上にあるものは、「../../ファイル名」
・1階層上にあるフォルダの中のファイルは、「../フォルダ名/ファイル名」



せんせい

では、練習。「index.html」から「a.gif」への相対パスは？
初心者

えーと、「index.html」と同じ階層にある「img」フォルダに「a.gif」があるので
「./img/a.gif」です！

せんせい

正解。では「diary.html」から「index.html」へのパスは？
初心者

「index.html」が一階層上にあるので
「../index.html」です！

せんせい

ム、正解。では最後に「diary.html」から「b.jpg」へのパスは？
初心者

一階層上の「img」フォルダの中に「b.jpg」があるので
「../img/b.jpg」です！

せんせい

・・・・・・・・

あれ、間違ってますか？
せんせい

せいかい・・・・。

あ、あの・・どうしたんですか？

全部、正解でおもしろくない。

おもしろくなきゃ、いけないのか！
戻る