相対パスについて

相対パスとは？

HP制作　初心者→上級者　計画
 HP制作　初心者→上級者　計画
上の二つは両方とも私のサイトのトップページへのリンクです。どちらをクリックしても同じトップページにリンクしますね。
でも実はこの二つ、同じページへのリンクなのにリンクタグ（<A HREF="URL">）で指定したURLは違うものです。
上の方は<A HREF="http://page.freett.com/kusadachi/index.htm">、下の方は<A HREF="../index.htm">と指定してリンクを貼りました。
それでも表示されるページは同じ、一体どういうことでしょう？

ここでは二つのURLに注目してください。
上の方はhttp://page.freett.com/kusadachi/index.htmと皆さんの見慣れたURLですよね。
それでは下の../index.htmとはなんでしょうか。
この二つこそ『絶対パス』と『相対パス』の違いなのです。

絶対パスとは世界中に存在するホームページからたったのひとつだけを指定しています。要するに住所みたいなものですね。
相対パスとはそのサイトの中だけで、今表示されているページから見て何処にリンク先が存在するかという考えで指定されます。例えばアパートをひとつのサイトとして考えた場合、ボクの部屋から二階上の端の部屋というような感じになります。

相対パスを使う理由

もしかしたら皆さんは「使い慣れた絶対パスでリンクを貼ることができるんだから、わざわざめんどくさそうな相対パスなんて覚えることないじゃん。」と思っているかもしれません。
ちょっと待って下さい、相対パスには相対パスのメリットが存在するんですよ。

まず第一に、たくさんフォルダを作ってサイトを整理したときに何がどこにあるのかを理解することができるようになります。
フォルダをたくさん作ったときには相対パスを理解していないと絶対パスがどうなっているのかすらよくわからなくなってしまったりします。
それを防ぐため、相対パスを理解してサイト内の階層構造を理解できるようになっておきましょう。

第二に、絶対パスでの指定よりも相対パスでの指定の方が表示速度が速くなります。
その理由はちょっと大げさかもしれませんが、絶対パスでの指定だと一度世界中のサイトを検索してそのURLを探し出すという形になりますが、相対パスの場合、探すのはそのサイト内だけで済むわけです。
同じアパートに住む人に手紙を渡す場合、郵便局に手紙を出すよりも管理人さんにでも渡した方が速く手紙を届ける事ができますよね。
絶対パスと相対パスでの指定での時間差は実際そんなに大きいものではないのですが、ちょっとお得な感じがしますよね。

相対パスを覚えよう

相対パスを簡単に説明すると、同じ階層のフォルダにあるファイルへのリンクはそのままファイル名を指定、ひとつ下の階層のフォルダにあるファイルへのリンクはフォルダ名にスラッシュ(/)をつけた後ファイル名を指定、ひとつ上の階層のフォルダにあるファイルへのリンクは../の後にファイル名を指定、という事になります。
……これではまったくわからないので図を見ながら説明しましょうか。

まずは図の説明から。
homepageというフォルダの中にaaaとcccというフォルダとcとdというHTMLファイルが保存されています。
aaaというフォルダの中にはbbbというフォルダ、そしてbbbというフォルダの中にはaというHTMLファイルが保存されています。

それでは相対パスの説明に移りましょう。
まずc.htmlというファイルを基準にして考えてみます。
このc.htmlの絶対パスをhttp://mysite/homepage/c.htmlとしましょう。

cファイルからのdファイルへリンクしてみます。
階層を見ると、c.htmlとd.htmlは同じhomepageフォルダ内にあるのでそのままファイル名を指定すれば問題ありません。
<A HREF="d.htm">とタグに打ち込めばcからdへのリンクは完了です。

次にcファイルからbファイルへリンクします。
bファイルはcファイルから見てcccというフォルダの中、つまりひとつ下の階層に位置しているのがわかりますね。
ひとつ下の階層はフォルダ名にスラッシュをつけた後ファイル名を指定すればいいので<A HREF="ccc/b.html">となります。

cファイルからaファイルへのリンクも同じように考えます。
aaaというフォルダの下にさらにbbbというフォルダがあるので<A HREF="aaa/bbb/a.html">となりますね。

今度はbファイルからcファイルへリンクしてみましょう。
bファイルからcファイルを見るとcファイルはひとつ上の階層に位置していることがわかります。
ひとつ上の階層は../の後にファイル名を指定すればいいので<A HREF="../c.html">

aファイルからcファイルも同じですね。
cはaから見てふたつ上の階層にあるので../をふたつつければいいだけです。
<A HREF="../../c.html">でaファイルからcファイルへリンクすることができますね。

このように相対パスとは、今表示されているファイルから見てリンク先のファイルがどの階層にあるかという視点で決定されます。
ひとつ下ならフォルダ名/ひとつ上なら../と覚えてしまえばもうマスターしたも同然ですよ。

最後に問題、aファイルからbファイルへ相対パスを使ってリンクする場合URLにはなんと記入したらよいでしょうか。
ヒント:aから見たbはふたつ上がってひとつ下がったところにあるから…
答えは→<A HREF="../../ccc/b.html">←（範囲選択して白黒反転させて表示させて下さい。ちゃんと考えてからですよ）

トップへ　　 HPの作り方MENUへ