絶対パス・ルート相対パス・相対パスとは？
要約
パスとは、Webページ内で画像やリンク先、CSSなどの場所を指定するための記述方法です。絶対パス・ルート相対パス・相対パスの違いや使い分け、指定を間違えたときに起こるトラブルについて解説します。
さらに詳しい内容をご覧になりたい方は下記も併せてお読みください。
パスとは、Webサイト内で画像やリンク、CSSなどのファイルがどこにあるかを指定するための書き方です。
パスの指定方法には、主に「絶対パス」「ルート相対パス」「相対パス」があります。
たとえば、同じ画像を指定する場合でも、次のように書き方が異なります。
- 絶対パス：
https://example.com/images/photo.jpg - ルート相対パス：
/images/photo.jpg - 相対パス：
../images/photo.jpg
それぞれ基準にしている場所が違うため、サイトの構成や作業環境によって使い分けます。
絶対パス・ルート相対パス・相対パスの違い
絶対パスは、https://example.com/images/photo.jpg のようにURLをすべて指定する方法です。ドメイン名まで含めて、参照先を直接指定します。
ルート相対パスは、/images/photo.jpg のように、サイトのルート（一番上の階層）を基準に指定する方法です。どの階層のページからでも同じ書き方で指定できるのが特徴です。
相対パスは、../images/photo.jpg のように、現在いるファイルの場所を基準に指定します。../ は「1つ上の階層」を意味するため、ファイルの位置によって書き方が変わります。
ざっくり言えば、絶対パスは「URLを直接指定する」、ルート相対パスは「サイトのルートから指定する」、相対パスは「自分がいる場所から指定する」という違いです。
パスの指定を間違えるとどうなる？
パスの指定を間違えると、画像が表示されない、CSSが読み込まれずデザインが崩れる、リンクをクリックしても意図したページに移動しない、といった不具合が起こります。
特に注意したいのが、本番環境とは別に公開前の確認用として用意するステージング環境です。
本番サイトとステージング環境ではURLやディレクトリ構成が異なることがあるため、パスの指定方法によってはステージングでは表示できても本番では表示できない、またはその逆といったことがあります。
パスの指定方法をサイトの構成や運用方法に合わせて選ぶことで、こうした環境の違いによるトラブルを減らすことができます。
パス指定で意識したいこと
- 基本はルート相対パスを使う：ENVY DESIGNでは、特別な指定がない場合はルート相対パスを使うことが多いです。どの階層からでも同じ指定で使えるため、扱いやすいと感じています。ただし、ローカル環境でもルート相対パスが正しく機能するように環境を整えておく必要があります。
- ステージング環境の構成に注意する：ステージング環境をサブディレクトリに作成した場合など、環境の構成によってはルート相対パスが想定した場所を参照せず、画像やスタイルが表示されないことがあります。
- 修正案件では絶対パスにも注意する：既存サイトの一部のページ内リンクが絶対パスになっていると、ステージング環境で確認しているつもりでも、リンクをクリックした先だけ本番サイトに移動してしまうことがあります。その結果、修正が反映されていないように見える紛らわしい状況になることがあります。
ENVY DESIGNの視点と観察
ENVY DESIGNでは、特別な指定がない場合はルート相対パスを基本にしています。どの階層のページからでも同じ指定で使えるため便利だからです。
その代わり、ローカル環境での表示には注意が必要です。普段はMAMPでルート相対パスが正しく通る環境を作成したうえで実装・確認を行っています。
実際に、ステージング環境でサブドメインを作成していなかった時に、パスが通らず画像やスタイルが表示されていないことはありました。
また修正案件では、一部のページ内リンクが絶対パスになっていると、ステージング環境で修正反映箇所をチェックしてもらっている時に本番サイトへ飛んでしまい、そのページは修正されていないように見える紛らわしい状況になることもあります。
よくある誤解と関連用語
「URLをすべて書く絶対パスの方が確実なのでは？」と思うかもしれませんが、必ずしもそうとは限りません。
絶対パスは特定のドメインまで含めて指定するため、本番環境とステージング環境のようにドメインが異なる場合には、意図せず本番サイトを参照してしまうことがあります。
一方で、相対パスやルート相対パスも、サイトのディレクトリ構成によっては正しく参照できないことがあります。
どの書き方が良い・悪いというより、サイトの構成や用途に合わせて使い分けることが大切です。
パスの仕組みは、サーバーやドメインとあわせて理解しておくと分かりやすくなります。また、パスを間違えると、参照している画像やファイルが404エラーになることもあります。
サイトの構成やファイル管理でお困りの際は、サイト保守・運用サポートもご検討ください。