【初心者向け】絶対パスと相対パスの違い・使い分けを徹底解説！
今回は、相対パスと絶対パスの基本的な概念や違い、使い分け方について初心者向けに解説します。
HTMLでの書き方もあわせて紹介していますので、ぜひ参考にしてください！
そもそもパスとは？
Path(パス)は、日本語で「道」や「経路」という意味があります。
コンピュータ上の世界では、特定のファイルやフォルダがどこにあるのかを示す“道順”を指します。
このパスと呼ばれるものには、大きく分けて「絶対パス」と「相対パス」の2通りあります。
それぞれどういった特徴や、書き方をするのかを地図を例に解説します。
絶対パスと相対パスとは？
地図で例えるなら、絶対パスが「住所」で、相対パスは「そこまでの行き方」を表します。
それぞれ詳しく見ていきましょう。
絶対パスとは
絶対パスは「住所」のようなものです。
たとえば、あなたが「◇◇ビル」という場所に行きたいとします。
しかし、ただ「◇◇ビル」と言われても、どこのビルなのかわかりませんよね？
そこで、「東京都千代田区丸の内◯丁目-△△-◯◯ ◇◇ビル」といった住所がわかれば、 世界中どこにいても、そのビルを正確に見つけることができます。
このように、どこからでも同じ場所を示せるというのが、絶対パスの特徴です。
パソコンの世界で言うなら、URL「例：https://○○△△.com/contact」が絶対パスです。
なぜなら、URLも住所のように固有で、誰が見ても同じ場所を指すためです。
ちなみに絶対パスは、プロトコル（https://）から始まり、ドメイン名(○○△△.com)・フォルダ名・ファイル名までをすべて記述するため、フルパスとも呼ばれます。
相対パスとは
相対パスは、「現在地から目的地までの行き方」を示すものです。
たとえば、人に道を尋ねたときのことを想像してみてください。
「この通りをまっすぐ進んで、3つ目の交差点を左に曲がってください」と案内されるように、
今いる場所から見た、目的地への道順を教えてもらいますよね。
まさにこれが相対パスの特徴です。
パソコンの世界で言えば、../img/logo.pngや ./about.htmlのように、
現在のファイルの場所を基準に、目的のファイルを相対的に指定する書き方になります。
なお、このパスの書き方については、後ほど詳しく解説します。
階層構造とは
パスの書き方に入る前に、より理解を深めるために「階層構造」について説明しておきます。
すでに知っている方は、この章は飛ばしてOKです！
階層構造は、別名「ツリー構造」とも呼ばれ、名前の通り「木の枝が分かれていく形」から由来してるみたいです。
今回はこの階層構造を、カバンの中身に例えて見ていきましょう。
この図のように「カバンの中に筆箱と財布があり、さらにそれらの中に十円玉や鉛筆がある」、この状態のことをまさに「階層構造」と言います！
この十円玉や鉛筆を、パソコンでは「画像ファイル（.png）」として扱うとすると、 フォルダ構造では次のように表せるんです。
実は、私たちがふだん見ているパソコンのファイルも、ホームページも、すべてこの「階層構造」で作られているんです。
これらを踏まえた上で、次はHTMLにおけるパスの書き方を紹介します！
HTMLにおけるパスの書き方
絶対パスの書き方
HTMLで、サーバー上にある画像を読み込むときのパスの書き方を紹介します。
下のような階層構造になっている場合に、index.htmlから、dog.jpgという画像を絶対パスで表示させてみます。
まず、「http://」または「https://」の後に、ドメイン名を書き、フォルダ名、ファィル名を記述します。
今回の例では、以下のように書きます。
<img src="https://○○△△.com/image/dog.png">
「○○△△.com」の後、第一階層のimageフォルダの中にあるdog.jpgファィルを指定してます。
これで「○○△△.com」上にある、dog.jpgという画像を参照してることになります。
ここではindex.htmlからこの画像を表示する方法を説明しましたが、絶対パスの特徴はどこからでも同じ場所を指せることでしたね。
つまり、このコードをsample.htmlなど、別のファイルに書いたとしても、画像は問題なく表示されます。
もし、bird.jpgという画像を指定したいなら、下記のようになります。
<img src="https://○○△△.com/sample/image/bird.jpg">
bird.jpgは、sampleフォルダの中の imageフォルダに入っているので、このようにパスを書きます。
このように、フォルダの階層を区切るときに「/（スラッシュ）」を使うのがポイントです！
相対パスの書き方
次に、index.htmlから、bird.jpgという画像を相対パスで表示させてみます。
相対パスは今いる場所から見た、目的地への道順でしたね。
今回の例では下記のように書けます。
<img src="./sample/image/bird.jpg">
このとき、最初の.は「現在いる場所（＝index.htmlがある場所）」を表しています。
./sampleと書くことで、「現在の階層にあるsampleフォルダ」を指定していることになります。
そこから先は、絶対パスと同じように/でフォルダを区切りながら、目的のファイルであるbird.jpgまでたどっていきます。
ちなみに、最初の./は省略可能なので、
<img src="sample/image/bird.jpg">
と書いても、まったく同じ意味になります！
今度はsample.htmlから、cat.jpgという画像を相対パスで表示させてみます。
今までは階層を「下に降りていく」ばかりでしたが、今度は「上に登る」必要がありますね。
今回の例では、次のように書きます。
<img src="../image/cat.jpg">
これまで./で「現在の階層」を表していましたが、
../は「一つ上の階層」を表します。
つまり、../image/cat.jpg は「1つ上の階層にあるimageフォルダの中のcat.jpg」という意味になります。
もし2つ以上、上の階層にあるファイル(フォルダ)を指定したい場合は、../を繋げて書くことで表現できます。
たとえば、3つ上の階層にあるsample.pngを指定する場合は、次のように書きます。
<img src="../../../sample.png">
このように、../を階層の数だけ繰り返すことで、目的の場所まで「階層をさかのぼる」ことができます。
絶対パスのメリット・デメリット
絶対パスのメリット
パスをルート（最上位）からフルで記述しているため、どこから見ても同じ場所にたどり着けるというメリットがあります。
また、絶対パスは常に同じURLを指すため、リンク切れが起こりにくいのも特徴です。
さらに、ファイルのフルパスが書かれていることで、サーバー内でのファイルの配置や構造を把握しやすくなるという利点もあります。
絶対パスのデメリット
単純にパスをフルで書くため、長くて書くのが面倒になるというデメリットがあります。
そして、記述が固定されているため、環境の変化にも弱いという欠点もあります。
例えば、「https://○○△△.com/img/map.png」のように絶対パスで画像を指定していた場合、サイトのドメインが「◇◇.com」に変わった場合、すべてのリンクを手作業で1つ1つ修正する必要があります。
また、ローカル環境で動作させようとすると、ファイルの場所を確認できない場合があります。
※ローカル環境とは、Webサイトを公開する前に、自分のパソコン内だけで動作確認を行う環境のことです。
相対パスのメリット・デメリット
相対パスのメリット
必要最低限の情報だけを書けばいいので、パスが短く、読みやすいというメリットがあります。
そのため、作業効率も上がり、ファイルを管理する上での負担も軽くなります。
また、ドメインが変更されたとしても、サイト内のフォルダ構成が変わっていなければ、リンクの修正が不要になるという利点もあります。
さらに、相対パスはローカル環境でもそのまま動作するため、公開前のWebサイトを自分のパソコン内で確認・テストしやすいという点も大きなメリットです。
相対パスのデメリット
現在いる場所から目的のファイルまでの位置関係を変えてしまうと、リンク切れになってしまうデメリットがあります。
また、記述が短くて便利な一方で、階層構造が深くなると「../」や「./」といった表記が増え、何を指しているか分かりづらくなることもあります。
絶対パス・相対パスの使い分け
指定したいファイルが外部サイトにある場合は絶対パス
相対パスは自分のサイト内のファイルしか指定できません。
そのため、外部サイトの画像やファイルを読み込みたい場合は絶対パスを使いましょう。
指定したいファイルが外部サイトにある場合は絶対パス
自分のサイト内のファイル（画像やCSSなど）を読み込む場合は、相対パスが向いています。
相対パスは、書く量が少なくてすみ、作業の手間を減らせるからです。
さらに、オフライン環境でもそのまま動作するという利点もあります。
補足
ルート相対パスとは
相対パスの一種に、ルート相対パスというものがあります。
「ルート」とは、Webサイト内の一番上のフォルダのことを指します。
ルート相対パスでは、ルートから目的のファイルまでのパスを指定します。
簡単に言えば、絶対パスからドメイン名を省略した書き方です。
例えば以下のような絶対パスがあったとします。
<img src="https://○○△△.com/sample/image/bird.jpg">
これをルート相対パスに書き換えると、次のようになります。
<img src="/sample/image/bird.jpg">
このように、ドメイン名の部分https://○○△△.comを/に省略して記述できるのがルート相対パスです。
ルート相対パスは ドメイン名に依存しないため、 たとえばサイトを別のドメインに移転する際でも、リンクの修正が不要という大きな利点があります。
そのため、ファイル構造が複雑なWebサイトや、複数人で開発する大規模サイトなどで、ルート相対パスがよく使われています。
Googleは絶対パスの使用を推奨している
SEO（＝検索エンジン最適化）の観点では、パスの使い分けには注意が必要です。
Googleは、以下の公式ガイドにもあるように、できるだけ絶対パスを使用するように推奨しています。
その理由は、相対パスを使うと…
- 同じページなのに、別のURLとして認識されてしまう（重複コンテンツ扱い）可能性がある
- クローラー（Webページを巡回して情報を収集するロボット）が、正しく認識できないことがある
このようなリスクを避けるためにも、特にSEOに影響する重要なタグや内部リンクには、絶対パスを使うのが安全です。
ただし、これはあくまで検索エンジンに正しいURLを伝えるべき特定の場面（例：canonicalタグ、内部リンクなど）での話です。
画像ファイルやCSS、JavaScriptなどを読み込む際まで、すべて絶対パスにする必要はありません。
むしろ、すべてを絶対パスで記述してしまうと、
ドメイン変更やローカル環境での動作確認がしづらくなり、メンテナンス性が下がってしまう可能性があります。
まとめ
絶対パスと相対パスの基本的な概念や違い、そして使い分けについて解説しました。
パスは、プログラミングやWeb制作において欠かせない重要な考え方です。
絶対パスは「住所」で、外部サイトを指定する時に使います。
相対パスは「現在地から目的地までの行き方」で、自分のサイト内のファイルを指定する時に使います。
この記事が、少しでも参考になれば幸いです。
最後までお読みいただき、ありがとうございました！
参考
- Serch Cosole ヘルプ - クロールが完了できなかった URL のエラー（参照日: 2025 年 08 月 8 日）
- Verse type - 絶対パスと相対パスとは？メリットや書き方・使い分け方を解説（参照日: 2025 年 08 月 8 日）
- アンドエンジニア - 相対パスとは？絶対パスとの違いやメリット・デメリット、使い分け方を解説（参照日: 2025 年 08 月 8 日）
- DM SOLUTIONS - SEOを意識したWebサイト設計（ディレクトリ構造）とは？（参照日: 2025 年 08 月 8 日）
- d-fount - 絶対パス、相対パス、ルート相対パスをわかりやすく解説！まずはイメージをつかもう！（参照日: 2025 年 08 月 8 日）
- PCS - Piyopiyo Create Service - 絶対パスとは（参照日: 2025 年 08 月 8 日）
