夕暮れの休憩所〜サイト作成FAQ

相対パスと絶対パス

[トップページへ戻る]

サイトを作成するときに出てくる『相対パスと絶対パス』に戸惑われる方は結構いるのではないでしょうか。(『相対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での記述

※注:"a2.html"などは"./a2.html"と書いてもOK。

b.htmlでの記述

d.htmlでの記述

[前へ|トップページへ戻る|次へ]
一番上に戻る↑