相対パスと絶対パス
サイトを作成するときに出てくる『相対パスと絶対パス』に戸惑われる方は結構いるのではないでしょうか。(『相対pathと絶対path』『相対URLと絶対URL』『相対アドレスと絶対アドレス』)
Web上のファイルたちにはそれぞれ住所(アドレス、URL)がついています。ブラウザーは、指定された住所を手がかりにファイルを探しにいって、ブラウザー上に表示します。その結果、私たちはWebページを見ることができるのです。
ちなみにW3Cでは『relative URI』と『full URI』というように表記しています。『絶対』といわれるよりは『full』といわれた方が、感覚的に理解はしやすいですね。(参照・W3Cより)
相対パスと絶対パスはどう違うのか?
住所を思い浮かべて見てください。「○○県○○市○○町○番地」と書くところを、同じ町内に住んでいると「町内○番地」と簡単に表現することが出来ますよね。「○○県○○市○○町○番地」というように、きっちり最初から住所を書く場合が「絶対パス」、そして今自分がいる場所を基本に「町内○番地」とか「隣町○番地」のように簡単に書く場合が「相対パス」です。
絶対パスは、書くのは面倒ではありますが正確に場所を表現できます。一方、相対パスは簡便ではありますが、勘違い(同じ町内と思っていたら、隣の町だったみたいに)も起こしやすかったりします。その時々で使い分けるようにしましょう。
相対パスの書き方
リンク先や画像を指定するときにどのように相対パスを使うか、例を見て参考にしてください。 ピリオド(.)の数に注意。見難い時は文字を大きくして見ましょう。
例の模式図
Aフォルダ(ディレクトリ)の中に
a1.html, a2.html, image-a.gifの3つのファイル
及び
Bフォルダ, Cフォルダ
があり、B,Cフォルダの中にはそれぞれ↓のようにファイルやDフォルダがあるとします。
A/
├B/
│└b.html
│
├C/
│├D/
││└d.html
││
│└image-c.gif
│
├a1.html
├a2.html
└image-a.gif
a1.htmlでの記述
- <a href="a2.html">a2.htmlへGO</a>
- <img src="image-a.gif">
- <a href="B/b.html">b.htmlへGO</a>
- <img src="C/image-c.gif">
- <a href="C/D/d.html">d.htmlへGO</a>
※注:"a2.html"などは"./a2.html"と書いてもOK。
b.htmlでの記述
- <a href="../a1.html">a1.htmlへGO</a>
- <img src="../C/image-c.gif">
- <a href="../C/D/d.html">d.htmlへGO</a>
d.htmlでの記述
- <img src="../image-c.gif">
- <a href="../../a1.html">a1.htmlへGO</a>
- <a href="../../B/b.html">b.htmlへGO</a>
[
前へ|
トップページへ戻る|
次へ]