- 今いるファイルを起点に「2つ上のフォルダに進んでから右へ」と指定するファイルの住所の書き方のこと。現在地が基準になるため、移動先によって記述が変わる
- HTMLのimgタグやlinkタグで同じサーバー内のファイルを読み込むときに主に使われ、記述が短くなり可読性が上がるのが最大のメリットだ
- ファイルを別のフォルダへ移動した瞬間に参照先がズレてリンク切れを起こすリスクがある。ファイル構成を変えるときは相対パスの書き直しが必要になる
【深掘り】これだけ知ってればOK！
パスとは、コンピュータ内のファイルやフォルダの場所を示す「住所」のようなものだ。その住所の書き方には大きく2種類あり、ひとつが絶対パス、もうひとつが相対パスだ。絶対パスは「東京都渋谷区○○1丁目2番3号」のようにルートから全部書く方法。対して相対パスは「ここから歩いて2ブロック右に曲がった2階」のように、今いる場所を基準に書く方法だ。
HTMLのWeb制作における実際の使い分けはシンプルに整理できる。aタグで外部サイトへリンクする場合は絶対パスが必須で、imgタグやlinkタグで同じサーバー内のファイルを読み込む場合は相対パスが適している。相対パスは記述が短くなるうえ、サーバー移行の際にドメインが変わってもパスを書き直す必要がないという利点もある。
相対パスを使うとき最も注意すべきなのが「ファイル移動時のリンク切れ」だ。たとえば「../css/style.css」と書いたHTMLファイルを別のフォルダへ移動すると、起点が変わって参照先がズレる。大規模なサイトリニューアルでフォルダ構造を変更した際、相対パスを使っているページでまとめてリンク切れが起きる事故は珍しくない。変更前にパスの一覧を確認しておく習慣が重要だ。
よくある誤解
相対パスは絶対パスより簡単という思い込み
記述が短いぶん「簡単」と思われがちだが、現在地が変わると書き直しが必要になる点で絶対パスより頭を使う場面がある。特に「../」を何回重ねるかを間違えると静かにリンク切れを起こす。小規模サイトなら絶対パス一本で管理する方がシンプルなケースも多い。
外部サイトへのリンクにも使えると思っている
相対パスは同じサーバー内のファイルを指定するときにしか使えない。別ドメインのページへリンクするaタグに相対パスを書くと、自分のサイト内を参照しようとして404エラーになる。外部リンクには必ず「https://」から始まる絶対パスを使うこと。
会話での使われ方
このimgタグのsrcが絶対パスになってますよね。同じサーバーなら相対パスに直した方が、ドメイン変更のときに楽ですよ。
コードレビュー中に先輩エンジニアが新人に指摘している場面。パスの書き方ひとつで後々の保守コストが変わることを伝えている。
フォルダ整理したら画像が全部表示されなくなって…。相対パスで書いてたから、移動先から見た階層が変わっちゃったみたいです。
制作会社のSlackチャンネルでWebデザイナーがディレクターに報告している場面。ファイル移動後に相対パスがズレたことで表示崩れが発生したケース。
ルート相対パスって何が違うんですか？絶対パスとどう使い分ければいいですか？
プログラミングスクールの勉強会で受講生が講師に質問している場面。相対パス・絶対パス・ルート相対パスの三種類の違いを整理したい状況だ。
【まとめ】3つのポイント
- 現在地から目的地までの「道案内」：相対パスは今いるファイルを起点にした住所の書き方で、「../」で上のフォルダへ、フォルダ名で下へ移動する記述を組み合わせる
- imgタグ・linkタグは相対パスが基本：同じサーバー内のファイルを読み込むときは相対パスが適しており、記述が短くなるうえサーバー移行時の書き直しも不要になる
- ファイルを移動したら必ずパスを確認：相対パスの起点はファイルの場所そのもの。フォルダ構成を変えたあとに確認を怠るとリンク切れが静かに発生するため要注意だ
よくある質問
- Q「../」を何回書けばいいか、どう数えればいいですか？
- A
今のファイルがあるフォルダから、目的のファイルがあるフォルダまで何回「上」に移動するかを数えます。たとえばcss/style.cssという場所に行くために今のフォルダの親フォルダまで1回上がるなら「../css/style.css」と書きます。フォルダ構造を図に書いて確認するのが確実です。
- QWordPressで相対パスを使うと問題が起きますか？
- A
WordPressのテーマ内CSSや画像参照では、テーマフォルダを基点にした相対パスが使われることがあります。ただし、WordPress標準の関数（get_template_directory_uri()など）を使って絶対URLを生成する方法の方が安全で一般的です。プラグインとの干渉を避けるためにも、PHPテンプレートでは関数経由の絶対URLを推奨します。
- QPythonでも相対パスは使えますか？
- A
使えます。Pythonではosモジュールやpathlibを使ってファイルを指定するとき、「../data/file.csv」のような相対パスが書けます。ただしPythonスクリプトの相対パスは「スクリプトファイルの場所」ではなく「スクリプトを実行したカレントディレクトリ」が基準になる点に注意が必要です。実行環境によって基準が変わるため、本番環境ではos.path.abspath(__file__)を使って絶対パスに変換する方が安全です。
- Q相対パスと絶対パスの違いは何ですか？
- A
一言で言えば「起点が違う」という違いです。絶対パスはルートディレクトリやドメインから全ての経路を書く方法で、どこから参照しても同じ場所を指します。相対パスは現在地から目的地までの差分を書く方法で、ファイルを移動すると参照先がズレます。外部サイトへのリンクは絶対パス、同じサーバー内のファイル読み込みは相対パスという使い分けが基本です。
この用語と一緒に知っておきたい用語
| 用語 | この記事との関連 |
|---|---|
| 絶対パス | 次のステップとして絶対パスを学ぶと知識が広がります。絶対パスの主要な特徴と用途を理解することで、関連する技術・制度・概念を正確に把握できるようになる |
| フォルダ | 本記事のテーマと実務上セットで使われることが多い用語です。たくさんのファイルを種類や用途ごとに分けてしまっておく、いわば整理用の棚、それがフォルダだ |
| サーバー | サーバーを押さえると本記事の理解がさらに深まります。ネットワークを通じて情報やサービスを提供する側のコンピューターのこと。レストランで料理を運んでくれる給仕係（server）をイメージするとわかりやすいよ |
| サイト | サイトは関連分野でよく登場する重要キーワードです。関連する複数のWebページを、一つのまとまりとして束ねたもの、それがサイトだ |
| ドメイン | ドメインを押さえると本記事の理解がさらに深まります。Webサイトやメールに使われるインターネット上の住所のこと――URLの中にあるexample.comの部分がドメインだよ |
【出典】参考URL
https://qiita.com/mizomizo1/items/addf4ad781aaa28d3f00 ：相対パスと絶対パスの違い（Qiita）
https://webliker.info/html/78726/ ：HTMLでの絶対パス・相対パスの使い分け解説
https://www.sungrove.co.jp/pass/ ：Webサイト制作における相対パスと絶対パスの使い分け
コメント