相対パスとは、あるファイルやフォルダを起点として、そこから目的のファイルやフォルダまでの相対的な位置を表す経路(パス)のことです。
同一サイト内でリンクをする場合は相対パスで記述することが一般的です。相対パスと対になるのが絶対パスです。
絶対パスは、全体のルートディレクトリから目的のファイルまでの絶対的な位置を表します。
絶対パスは:https://www.example.com/ のようにどこからアクセスしても辿り着ける完全な経路です。
ディレクトリ構造を基にした相対パスのサンプル
project/
├── index.html
├── css/
│ └── style.css
└── images/
└── logo.png
./ (ドットスラッシュ)は現在の階層への経路です
../
(ドットドットスラッシュ)はcss
フォルダやimagesフォルダから一つ上の階層(index.html
が存在するディレクトリ)への経路です
index.htmlからstyle.cssへの相対パス | style.cssからindex.htmlへの相対パス |
---|
css/style.css 又は ./css/style.css | ../index.html |
index.htmlからlogo.pngへの相対パス | style.cssからlogo.pngへの相対パス |
---|
images/logo.png 又は ./images/logo.png | ../images/logo.png |
project/
├── index.html
├── common/
│ └── css/
│ └── style.css
└── images/
└── logo.png
../
../ (ドットドットスラッシュドットドットスラッシュ)は二つ上の階層への経路です
index.html からstyle.css への相対パス | style.css から index.html への相対パス |
---|
common/css/style.css | ../../index.html |
index.htmlから logo.png への相対パス | style.css から logo.png への相対パス |
---|
images/logo.png 又は ./images/logo.png | ../../images/logo.png |
project/
├── index.html
├── common/
│ └── css/
│ └── reset.css
│ └── responsive.css
│ └── style.css
├── images/
│ └── logo.png
└── js/
└── script.js
index.htmlから script.js への相対パス |
---|
js/script.js 又は ./js/script.js |
style.cssからlogo.pngへの相対パス | style.cssからresponsive.cssへの相対パス |
---|
../../images/logo.png | responsive.css 又は ./responsive.css |
まとめ
同じ階層にリンクするときは、ファイル名のみ(または ./ に続けてファイル名)を記述 | index.html ./index.html |
下位階層にリンクするときは、フォルダ名に続けて / を入れ、ファイル名を記述(または ./ に続けてフォルダ名以下略) | css/style.css ./css/style.css images/logo.png ./images/logo.png js/script.js ./js/script.js |
上位階層にリンクするときは、../ に続けてフォルダ名とファイル名を記述 | <a href=”../upper/index.htm”> |
2つ上の階層を指定するときは、../../ に続けてフォルダ名とファイル名を記述 | <a href=”../../upper/index.htm”> <img src=”../../upper/image/photo.jpg”> |
絶対パスと相対パスの対比表
項目 | 絶対パス | 相対パス |
---|
定義 | ルートディレクトリから目的のファイルまでの完全な経路 | 現在のファイルからの相対的な位置 |
記述例 | https://www.example.com/images/logo.png | ../images/logo.png |
メリット | どの環境でも同じパスでアクセスできる | ファイルの移動が容易、記述が簡潔 |
デメリット | パスが長くなる、変更に弱い | ファイルの階層構造が変わるとパスを修正する必要がある |
主な用途 | 外部サイトへのリンク、内部リンクでもリンク元のページの場所が頻繁に変わる場合 | 同一サイト内のファイルを参照する場合 |