サイトルート相対パスとは img などをルートパスから参照 「/(スラッシュ)」から記載

ウェブサイトなどをHTMLなどでコーディングする際、同じファイルを複数のページで参照する場合に、そのファイルを相対パスや絶対パスなどで指定します。

相対パスの問題

ただし、相対パスを使うと、階層が変わるたびに、指定を変えなくてはならないため、手間が増えます。

例えば、ルートにある「img」フォルダ内の「image.png」というファイルを <img src=””>で参照することを考えてみます。

同じルートディレクトリであれば、以下のように記述することになります。

<img src="img/image.png">

しかし、階層が下になるにつれて、上記の記述は、以下のように変わってしまいます。

<img src="../img/image.png">

しかも、PHPなどでインクルードして共通パーツを作る際にも、不便です。

しかし、この問題は、「サイトルート相対パス」を使うことで解決します。

サイトルート相対パスの使い方

サイトルート相対パスは、必ず「/(スラッシュ)」から指定を始めます。

例えば、上記の例のように、ルートにある「img」フォルダ内の「image.png」というファイルを <img src=””>で参照することを考えてみます。

その場合、参照元がどのような階層にあったとしても、以下のように記述するだけでOKになります。

<img src="/img/image.png">

このサイトルート相対パスを使うことにより、参照元ページがどの階層にあったとしても、同じコードを使うことができます。

気を付けないといけないのは、ファイルの指定を「/(スラッシュ)」から始めることです。