webcordingカテゴリーの共通アイキャッチ画像

相対パス

相対パスとは、あるファイルやフォルダを起点として、そこから目的のファイルやフォルダまでの相対的な位置を表す経路(パス)のことです。
同一サイト内でリンクをする場合は相対パスで記述することが一般的です。相対パスと対になるのが絶対パスです。
絶対パスは、全体のルートディレクトリから目的のファイルまでの絶対的な位置を表します。
絶対パスは: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.pngresponsive.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
メリットどの環境でも同じパスでアクセスできるファイルの移動が容易、記述が簡潔
デメリットパスが長くなる、変更に弱いファイルの階層構造が変わるとパスを修正する必要がある
主な用途外部サイトへのリンク、内部リンクでもリンク元のページの場所が頻繁に変わる場合同一サイト内のファイルを参照する場合
PAGE TOP