URLのルート相対パスとは

ホームページを作成する際，URL のパス(Path)をどうするかという問題がある．

パスとはそのファイルまでのディレクトリ(フォルダ)を示すもので，これによってファイルがどこにあるかが分かる．

ホームページを制作する際にはここをどうするかによってメンテナンスの手間が変わってくる．

パスの種類には大きく分けて，相対パスと絶対パスがあり，相対パスだが絶対パスのようにも扱えるルート相対パスというものがある．
それぞれ説明する．

絶対パス

絶対パスとはそのパスで完全にファイルというかパスが特定できるものをいう．

http や https などのプロトコルから始まり，ファイル名や / (スラッシュ) で終わるものを指す．

スラッシュで終わるのは index.html や index.php などファイル名が省略されているだけで実際には何らかのファイルが呼ばれている．

例)
https://www.xxxxxx.com/

絶対パスのメリット

どこに持っていっても表すものは一つなので確実に正しいものを指すことが出来る．

絶対パスのデメリット

そもそもおいている場所(サーバー)が変わってしまうと表示出来なくなる．
置くサーバーが変わらないという前提が必要になる．

https://www.xxxxxx.com/
に置いているファイルを自分のパソコンに移動して
http://localhost/
で表示しようとしても，本物のサーバーの方を見に行ってしまうのでテストがしづらい．

相対パス

相対パスとは今いる自分の(ファイルの)位置からの相対的な位置関係を表したパスのことをいう．

つまり，../ と書けば一つ上のディレクトリ(フォルダ)を指す．

今いるディレクトリの別のファイルを表す場合は， ./ で表す．
通常，何も書かずファイル名だけの場合も今いる同じディレクトリ内のファイルを指す．

例)

../hoge/fuga.html

一つ上の hoge ディレクトリの fuga.html を指す

./hoge.html

同じディレクトリの hoge.html を指す

hoge.html

通常，同じディレクトリの hoge.html を指す

相対パスのメリット

置く場所(サーバー)を変更してもディレクトリ構造が変わらなければ正しく表示出来る．

相対パスのデメリット

置く場所(ディレクトリ)の配置を変えてしまうと表示出来なくなる．
例えば，/images/logo.gif とロゴを置いた場合に
https://www.xxxxxx.com/index.html からアクセスする場合は
./images/logo.gif
や
images/logo.gif
でよいが，
https://www.xxxxxx.com/products/index.html からアクセスする場合は
../images/logo.gif
と表す必要が出てくる．
つまり，表示している画像は同じなのに自分のファイルの場所を考慮した上でディレクトリがどこにあるかを考えてパスを作る必要がある．

ルート相対パス

つまり，絶対パスにも相対パスにも一長一短あるということが分かる．
「絶対パス」と「相対パス」のデメリットを避けたものが「ルート相対パス」と呼ばれるものである．
/ (スラッシュ)から始まるパスである．

例)
/images/logo.gif

ルート相対パスのメリット

ホームページを置くサーバーの場所を変えても，ルート相対パスなら変更する必要はない．
https://www.xxxxxx.com/
にあるものを
http://localhost/
に変更しても中のファイルは変更しないでよい．

また，場所に関しても例えば，
https://www.xxxxxx.com/aaaaaa/
に置いてあるファイルを
https://www.xxxxxx.com/aaaaaa/bbbbb/
に移動したとしても
中で画像
https://www.xxxxxx.com/images/logo.gif
の参照をルート相対パスで
/images/logo.gif
と書いてあれば何も変更する必要はない．

つまり，サーバーを変えても，ファイルの位置を変えても中で参照しているページや画像の表記を変更する必要はないのだ．

WordPress での画像の扱いについて

以上のことから HTML ファイルの中の画像や他のページへの内部リンクは出来るだけルート相対パスで書くとメンテナンスが楽になることが分かる．

テストサーバーを別の場所にたてた場合，画像ファイルをルート相対パスにしておくと画像もコピーしてくる必要がある．
本当にテストするなら，そこまでするべきだが，画像は面倒だと思う場合は画像だけ「絶対パス」にしておくと画像だけは本物を見に行くようになるのでテストにはならないが工数削減は出来る．