絶対パス、相対パス、ルート相対パスの違いについて

絶対パス

絶対パスとは、次のような書き方で、ごく一般的なURLの書き方のことです。

「http://」または「https://」から始まり、ドメインからパスの全てを記述します。

例えばHTMLのaタグに当てはめると次のようになります。

別のサイトへのリンクを貼る場合や、別のサイトの要素を呼び出す場合など、対象が外部サイトにある場合はこの書き方である必要があります。

対象が自サイト内である場合も絶対パスは使えますが、一般的には次章の「相対パス」「ルート相対パス」を使うことが多いです。

相対パス

相対パスとは、次のような書き方です。

相対パスの書き方の例

相対パスとは、パスを記述するページ (編集中のページ) を基準として、対象のファイルのパスを記述します。

対象のファイルが自サイト内にある場合に使います。

少し難しいかもしれないので、例を2つ見ていきましょう。

相対パスで書いておけば、後々フォルダを移動した場合や、複製して別のフォルダに設置した場合などにも関係性が維持されるため、ソースコードの変更が不要になる、という点が大きなメリットです。

ルート相対パス

ルート相対パスとは、次のような書き方です。

ルート相対パスとは、対象のファイルのパスをルート (一番上の階層) から記述します。

ルート相対パスはスラッシュ「/」から始まります。

絶対パスからドメインの部分 (https://www.weblab.co.jp など) を省略したようなイメージです。

こちらも対象のファイルが自サイト内にある場合に使います。

例えば「service」フォルダ内の「websitedesign.html」というファイルへのリンクを貼りたいとき

どのページから指定する場合でも、ルート相対パスは次のようになります。

ルート相対パスは、サイト内のどの位置から見ても同じ書き方になるので、サイトのナビゲーションメニューなどの共通部分で多く使われます。

また、階層構造が複雑で相対パスでの記述が難しい場合にも、ルート相対パスのほうが便利であったりします。