相対パスとは？意味や絶対パスとの違い、書き方や使い分けの方法を解説

本記事では相対パスの意味や特徴、絶対パスの違いと具体的な使い分け方法などをわかりやすく解説します。メリットとデメリットを知り、環境にあわせて適切に使い分けましょう。

相対パスとは、ファイルやフォルダの場所を指定する際に、現在の作業ディレクトリを基準として相対的な位置を指定するものです。現在の場所を基準にどれだけ離れた場所にあるかを示すことで、目的のファイルやフォルダへ簡単にアクセスできます。

相対パスは絶対パスと比べてわかりやすく理解もしやすいため、Web開発やプログラミングなど、さまざまな場面で利用されているのです。

本記事では相対パスの使い方や基本的な構文、絶対パスとの違いや使い分けの方法などについて、初心者でも理解しやすいように具体的な例を交えながら解説します。

目次

• そもそもパスとは何だろう？
• 相対パスとは何？
  • 相対パスと絶対パス、ルート相対パスとの違いとは？
  • 相対パスの階層について
  • 相対パスの使い方
• 相対パスを使うメリット
  • 絶対パスと比べて文字数が少なく済む
  • インターネットを経由せず必要な部分だけをテストできる
  • Webサイトのドメインを変えたときにパスを変えずに済む
• 相対パスを使うデメリット
  • 大規模プロジェクトではファイルの所在がわかりにくくなる
  • ファイルの場所が離れていると記述が複雑になりやすい
• 相対パスと絶対パスの使い分けのポイント
• 環境別相対パスの記述例
  • Windowsでの書き方
  • Javaでの書き方
  • Linuxを含むUNIX互換環境での書き方
  • HTMLでの書き方
  • PHPでの書き方
• 相対パスをマスターしてリンク切れを起こしにくいサイトを作ろう

そもそもパスとは何だろう？



パス（Path）には、道という意味があります。Webサイト制作におけるパスとは、CSSファイルや画像ファイルといったファイルが、どの場所に格納されているかを表した文字列のことです。

パスの書き方を間違えると、「画像が表示されない」「テキストファイルが読み込まれない」といった事態が起こるため、パスは正確に書く必要があります。

また、パスには絶対パスと相対パスの2つがあります。2つのパスにはそれぞれメリットとデメリットがあり、使い方に注意してシーンごとに使い分けましょう。

たとえば、現在の作業ディレクトリが「/home/user/documents/」で、このディレクトリ内にある「report.txt」というファイルを指定する場合の相対パスは、以下のようになります。

【相対パス】

./report.txt

【絶対パス】

C:\Users\user\Documents\report.txt

ここではまず、相対パスと絶対パスについて視覚的に覚えておきましょう。

相対パスとは何？



相対パスとは、現在の作業ディレクトリを基準として、ファイルやフォルダの位置を示したパスのことです。現在の場所からどれだけ移動したか記述することで、目的のファイルやフォルダを指定できます。

たとえば、現在の作業ディレクトリが「/home/user/documents/」であり、「/home/user/documents/reports/report.txt」というファイルを指定する場合は、相対パスで「./reports/report.txt」と記述します。

「./」が現在のディレクトリを表しており、「reports/report.txt」で現在のディレクトリから「reports」フォルダに移動し、フォルダ内の「report.txt」を指定するという意味です。

相対パスは絶対パスに比べて簡潔で、ファイルの格納場所を変えても同じように動作するため、Web開発やプログラミングにおいて頻繁に使われます。ただし、現在の作業ディレクトリが変わると、指定したファイルやフォルダの場所も変化してしまうので、正確な指定が必要です。

相対パスと絶対パス、ルート相対パスとの違いとは？

絶対パスは、「どのドメイン」の「どのフォルダの中」の「どのファイル」かをすべて指定します。たとえば、Windowsの場合、「C:\Users\ユーザー名\Documents\ファイル名」のように、ドライブ名からファイル名まで完全なパスを指定する形式です。

外部サイトでは、「http://~」や「https://~」といった記述で始まりますが、一番上からすべての階層を書くので手間がかかってしまいます。相対パスであればすべての階層を書く必要はなく、対象ファイルが同じ階層やごく近くにある場合は、極めて短い記述で済みます。

また、ルート相対パスとは、ドメインを基準としてファイルやフォルダを相対位置で指定するパスのことです。

たとえば、「https://example.com」というサイト内で、「/fruits/apple.txt」と指定されている場合、絶対パスでは「https://example.com/fruits/apple.txt」と記述されます。現在の作業ディレクトリを相対パスで示す場合は「./」ですが、ルート相対パスの場合は「/（スラッシュ）」から始まることに注意しましょう。

相対パスの階層について

相対パスは、ユーザーの作業ファイルから目的のファイルまでの経路を、記号を使ってファイルの「階層」という概念で表現します。

具体的には、以下のような記号を使用します。

書き方	意味
「.」	現在のディレクトリを表す
「..」	1つ上のディレクトリを表す
「../..」	2つ上のディレクトリを表す

記述例は以下の通りです。
「./folder」：現在のディレクトリ内にある「folder」フォルダ
「../folder/file.txt」：1つ上のディレクトリにある「folder」フォルダ内の「file.txt」ファイル

このように、相対パスは階層指定を使って、目的のファイルやフォルダまでの相対的な位置が表現できます。ただし、指定するパスに誤りがある場合、指定した場所に移動できないなどの問題が生じるため、指定には注意が必要です。

相対パスの使い方

相対パスの主な使い方は、プログラムやWebページのコーディングです。たとえば、Webページ内に画像ファイルを埋め込む場合、相対パスを使って画像ファイルを指定できます。

ユーザーの作業ファイルと同じ階層にある画像ファイルを表示する場合は、相対パスは「./gazou.jpg」または「gazou.jpg」です。1つ上の階層のファイルを表示するには「../gazou.jpg」、1つ下の階層のディレクトリ内にある際は「/〇〇/gazou.jpg」と書きます。

以下はHTML内で画像を表示するパスの例です。

<img src="./images/gazou.jpg">

ここで「./」は現在のディレクトリを表しており、「images/gazou.jpg」で現在のディレクトリから「images」フォルダに移動し、「images」フォルダ内にある「gazou.jpg」ファイルを指定しています。

プログラムにおいても、ファイル操作やディレクトリの移動などで相対パスを指定することが可能です。

相対パスを使うメリット



ここからは、相対パスを使う以下の3つのメリットを紹介します。

• 絶対パスと比べて文字数が少なく済む
• インターネットを経由せず必要な部分だけをテストできる
• Webサイトのドメインを変えたときにパスを変えずに済む

絶対パスを使っている場合と比較していますので、参考にしてください。

絶対パスと比べて文字数が少なく済む

相対パスの使用で、ファイルやフォルダへのパスの記述を短縮できます。

たとえば、ファイルが「/usr/local/www/site/index.html」にある場合、絶対パスでこのファイルにアクセスするためには、この長い文字列をすべて記述しなくてはなりません。相対パスでは、現在のディレクトリからの相対的な位置を示せばよいため、短くシンプルな記述が可能です。

具体的には、同じディレクトリ内の場合、絶対パスでは「https://〇〇.com/〇〇/〇〇.html」と書き、相対パスでは「〇〇.html」とだけ書けばよいのです。

相対パスの活用により、複雑なWeb開発であってもシンプルなパス指定ができ、開発効率を高められるでしょう。

インターネットを経由せず必要な部分だけをテストできる

相対パスを使えば、インターネットを経由せずにファイルへたどり着くため、必要な部分だけを抽出してテスト、改修などの作業が可能です。Webサイトの一部分をローカル環境で動作させる場合、相対パスを指定すればテストできます。

たとえば、Webサイトのヘッダー部分のみ変更したいときに、ヘッダーが表示されているページにアクセスする必要がありません。ヘッダーが含まれるHTMLファイルをローカル環境にダウンロードすれば、対象のファイルだけを開いて編集できます。

そのため、相対パスを使って、HTMLファイルに含まれる画像やCSSファイルなどのリソースにアクセスが可能です。Webサイトの全体的な動作確認も不要になり、開発の迅速化にもつながります。

公開するサイトとローカルのファイル構造を合わせておくことは、相対パスを使用する際に有用です。ローカルでのテストと公開サイトでの動作が、一致する確率が高くなるでしょう。

相対パスは、基準となるファイルからの相対的な位置に基づいて他のファイルを参照します。つまり、ファイル構造がローカルと公開サイトで異なる場合、相対パスによる参照が正しく動作しない可能性があります。

しかし絶対パスを使用する場合や、特定の設定やツール（Docker、仮想環境など）を用いて環境を整える場合は、このような一致が必ずしも必要ではありません。

ファイル構造を一致させることは、とくに相対パスを多用する場合には推奨されますが、必須ではないのです。状況と要件に応じて、最適なアプローチの選定が重要といえるでしょう。

Webサイトのドメインを変えたときにパスを変えずに済む

Webサイトを運営していると、ドメインを変更することもあるでしょう。相対パスを使っていればドメイン変更時にパスの修正が必要ありません。

絶対パスを使っている場合は、すべてのファイルやコード内に記載されたパスを修正する必要があります。そのため、相対パスを使用することでWebサイトの管理が簡単になり、運用上の負担を減らせるのです。

たとえば、「wbx.com」のドメインにあったものを「wgx.jp」に移した場合、絶対パスでは旧ドメインの「wbx.com」と書いた部分をすべて「wgx.jp」に変える必要があります。相対パスであれば、ドメインを移管したあともページ内の記述を変えずに済み、記述を変更したりリンク切れを修正したりしなくてもよいのです。

相対パスを使うデメリット



相対パスにはメリットも多いですが、以下のようなデメリットもあります。

• 大規模プロジェクトではファイルの所在がわかりにくくなる
• ファイルの場所が離れていると記述が複雑になりやすい

相対パスのデメリットも理解し、使いこなしていきましょう。

大規模プロジェクトではファイルの所在がわかりにくくなる

大規模プロジェクトや巨大なサイトの制作では、相対パスを使用するとファイルの所在がわかりにくくなるデメリットがあります。とくに、多数のディレクトリやサブディレクトリが存在する場合、ファイルがどこにあるのか特定することは困難です。

複数のファイルが互いに依存し合っている場合には、それぞれのファイルがどこにあるのか把握する必要があります。どこにファイルがあるかがわかりにくければ、メンテナンス性にも影響を及ぼす可能性があるため注意が必要です。

そのため、大規模プロジェクトにおいては、絶対パスが有効なケースがあることは覚えておきましょう。

ファイルの場所が離れていると記述が複雑になりやすい

ファイルの場所が離れていると、相対パスを記述する際に複雑になりやすく、記述ミスが起きやすくなります。とくに複数のディレクトリをまたいで移動する場合、相対パスの記述が複雑になりやすいため注意しましょう。

たとえば「../../../../../../img/〇〇/〇〇.png」では、具体的にどのファイルにあるのか、パスからは把握しにくくなってしまいます。

相対パスを使う際は、ファイルの所在や関係性の理解が重要です。ファイルの場所が離れている場合は、記述が複雑になりやすいことを考慮しておく必要があります。

相対パスと絶対パスの使い分けのポイント



相対パスと絶対パスの特徴と、使い分けのポイントを紹介します。

パスの種類	特徴
相対パス	現在のディレクトリからそのファイルの位置を指定する
絶対パス	そのファイルの正確な場所を指定する

以下にHTMLのコーディング時における、相対パスと絶対パスの使い分けのポイントをまとめました。

パスの種類	使い分けのポイント
相対パス	aタグ以外（例：imgタグのsrc属性・linkタグのhref属性・scriptタグのsrc属性など） 同じディレクトリ内のファイルやディレクトリを指定する場合 階層が浅い場合 ファイルやディレクトリが同じ階層にある場合
絶対パス	aタグのリンク先

リンク先が外部サイトの場合、相対パスは使用できないため絶対パスを使用します。このように、相対パスは基本的に同じサーバー内や同じローカルファイルシステム内のファイルに対して使用されます。したがって、別のサイトへリンクを設定する場合は、絶対パスで指定する必要があるでしょう。

環境別相対パスの記述例



ここからは、環境ごとの相対パス記述例を簡単に説明します。

• Windowsでの書き方
• Javaでの書き方
• Linuxを含むUNIX互換環境での書き方
• HTMLでの書き方
• PHPでの書き方

OSやプログラミング言語によって、相対パスの書き方が異なる場合がありますので参考にしてください。

Windowsでの書き方

コマンドプロンプトなどのWindows環境では、ファイルパスの区切り文字は「\（バックスラッシュ）」で、現在のディレクトリを表す「.」や親ディレクトリを表す「..」を使用します。1つ上のディレクトリのファイルを指定する場合には、以下のような相対パスを記述します。

..∖file.txt



「∖」は、画面上では「¥」と表示される点に注意してください。また、WindowsとmacOSは使用する記号が異なるので気を付けましょう。

Javaでの書き方

「Java」のクラスパスとは、「Java」の実行環境がクラスファイルを参照するために指定するものです。「Java」のクラスパスには、相対パスが指定できます。

ファイルパスの区切り文字には、「∖（バックスラッシュ）」を2つ重ねて使用する点に注意が必要です。相対パスは、現在のディレクトリを「.」で、1つ上のディレクトである親ディレクトリを「..」で記述します。

Javaにおいて相対パスで1つ上のディレクトリのfile.txtを指定する例が、以下です。

..\\file.txt

Linuxを含むUNIX互換環境での書き方

UNIX互換環境では、階層の区切り文字には共通で「/」が用いられており、ルートディレクトリは「/」のみで表されます。

Linuxでは「tar」コマンドでファイルを圧縮する場合、相対パスを使って圧縮対象を指定することが推奨されています。絶対パスで圧縮すると、解答した際にルート以下のフォルダ構造までセットで圧縮されてしまうからです。

1つ上のディレクトリのfile.txtファイルを指定する場合、以下のように相対パスを記述します。

../file.txt

HTMLでの書き方

HTMLでは、Webページ内でリンクするほかのファイルや画像の場所を指定するためにパスを記述し、サイトアドレスの階層を示す場合、区切り文字には「/」を使用します。

ディレクトリの1つ上にあるimage.jpgファイルを指定する場合、以下のように相対パスを記述します。

../images/image.jpg

PHPでの書き方

「PHP」では、includeやrequireなどの関数を使って、ほかのPHPファイルやライブラリを読み込むことができ、ファイルシステムの場所を基準に相対パスを指定可能です。

HTMLなどと同様に、「PHP」では、ファイルパスの区切り記号には「/」を使用します。現在のディレクトリを示すには「.」を、親ディレクトリを示すには「..」が使われます。

ディレクトリの1つ上にあるfile.txtファイルを指定する場合の、記述例は以下です。

../file.txt

相対パスをマスターしてリンク切れを起こしにくいサイトを作ろう



相対パスの意味や絶対パスとの違い、書き方や使い分けの方法を解説しました。

相対パスと絶対パスは、状況に応じて適切に使い分けましょう。それぞれにメリットとデメリットがあり、しっかりと理解した上で上手に活用してください。

また、相対パスの書き方は、使用する環境やプログラムによって異なります。とくにWindows環境とUNIX環境では、パスの区切り文字が異なるため注意してください。

本記事を参考に相対パスをマスターして、より使いやすいWebサイト開発をおこない、リンク切れを起こしにくいサイト作りを目指しましょう。