相対パスと絶対パスの違いやメリット・デメリット、使い分け方を解説いたします。
目次
パスとは?
特定のファイルの位置を表現する表記方法に、「絶対パス」と「相対パス」があります。
絶対パスは、目的のファイルまでの全ての道筋を記述する方法で、相対パスは現在のファイルの位置からの相対的な位置を記述する方法です。それぞれに書き方や使い方が異なりますが、その違いがわからない方もいるでしょう。
そこで、この記事では、絶対パスと相対パスの表し方・書き方の違い・それぞれの使用法・ルートパス(ルート相対パス)についても解説します。
そもそもパスとは何?
パスとは、「経路」のことで、目的のファイルがどのフォルダ(ディレクトリ)に保存されているかを示すものです。
パスは、現在実行しているプログラムや閲覧しているファイルから、他の場所にあるファイルを指定して実行・表示させたり、作業対象を移動したりする場合に、目的のファイルを指定するために使われます。
具体的には、Excel(エクセル)のシートやマクロから別のブックを外部参照する時や、HTMLのタグやタグでリンク先や画像などのファイルを指定するためにパスを使います。
絶対パスと相対パスの違い
パスの表記方法には、「絶対パス」と「相対パス」があります。
絶対パスとは、ディレクトリの階層構造の頂点から目的のファイルまでの道筋を、全て省略せずに表記する方法です。 一方、相対パスは、現在作業しているファイルの場所から見た、目的のファイルへの行き方を表記します。
例えば、「http:// ●●●.co.jp」というドメイン(サーバ)を頂点とするWebサイトで、「animal.html」ファイルから、画像ファイルの「dog.jpg」を参照するとした場合、下図のようなイメージになります。
あくまでイメージですが、ある目的地の場所を聞かれたときに、「住所」を教えるのが絶対パス、「ここから1つ手前の交差点を左に曲がって…」のように、現在の場所からの辿り方を教えるのが相対パスです。
絶対パスとは
ここでは、絶対パスの特徴と書き方を詳しく説明します。
絶対パスはどこから見ても同じ表記になる
絶対パスは「フルパス」とも呼ばれ、ファイル名を階層構造の頂点から最後まで完全に表記する方法です。
そのため、現在の作業フォルダがどこであっても、同じ目的ファイルを示す表記は同じです。
例えば、あるWebサイトの「img」フォルダ内の画像ファイル「dog.jpg」を、ディレクトリの位置が異なる「index.html」ファイルと「animal.html」から絶対パスで指定しても、表記は同じです。
絶対パスで指定する場合は、「http:// ●●●」(または「https:// ●●●」)から省略せずにファイルの位置を指定します。
つまり、「http:// ●●●.co.jp」にある、「img」フォルダ内の「dog.jpg」フォルダを指定したい場合、「http:// ●●●.co.jp/img/dog.jpg」と指定します。
絶対パスの書き方
絶対パスの記載内容は、「http:// ドメイン名」(= 階層構造の頂点)、「フォルダ名」、「ファイル名」という構成です。
階層構造の頂点である「http:// ●●●.co.jp/」から、その配下の各階層を「/」(スラッシュ)で区切って、目的のファイルまで辿っていることがわかります。
Webだけでなく、UNIX系やWindows系のパソコン上など、環境が異なる場合も考え方は同じですが、ルートディレクトリ(階層構造の頂点)やディレクトリの区切り記号が異なります。
1.Web表記 Web表記の場合、ルートディレクトリは「http(s):// (ホスト名.)ドメイン名/」です。 階層の区切りには「/」(スラッシュ)を使います。 (例)http:// ●●●.co.jp/img/dog.jpg
2.UNIX互換環境(Linux含む)表記 UNIX互換環境では、ルートディレクトリは「/」です。 階層の区切りには「/」(スラッシュ)を使います。 (例)/Users/●●●/Desktop/img/dog.jpg
3.Windows系表記 Windows系では、ローカルディスクのドライブ名がルートディレクトリになります。 階層の区切りには「」(バックスラッシュ)または「¥」を使います。 (例)C:\Users●●●\Desktop\img\dog.jpg
相対パスとは
続いて、相対パスの特徴と書き方について詳しく解説します。
相対パスは現在の場所から指定の場所への「辿り方」を指定する表記
相対パスは現在作業しているファイルから、目的ファイルのある場所への辿り方を指定する方法です。その名の示す通り、現在の場所からの相対的な位置を表します。
そのため、現在作業しているファイルの場所が異なると、同じ目的ファイルを指定する場合でも、表記が異なります。
相対パスでは、目的のファイルがどこにあるかを指定するために、階層の考え方が特に大切です。
相対パスの書き方
相対パスでは、現在の作業フォルダと目的のファイルの位置関係によって、書き方が異なります。
例として、あるWebサイトの「animal.html」に「dog.jpg」ファイルを表示させるため、タグを相対パスで記述する場合について説明します。 2つのファイルの位置関係が異なる4つのパターンを挙げます。
1.同じフォルダ(階層内)にある場合
同じフォルダであることを意味する「./」を使用してパスを記述します。 「./」は省略することができます。
2.1つ上の階層にある場合
1つの階層を意味する「../」を使用してパスを記述します。
3.1つ上の階層にある別のフォルダ内にある場合
「../」で1つ上の階層を指定し、その中のフォルダ、さらにファイル名を指定します。
4.2つ上の階層にある場合
「../」を2回記載し、「../../」とすることで、2階層上であることを示します。
それぞれのメリット・デメリット
絶対パスと相対パスにはそれぞれメリットとデメリットがあり、使い分けることが重要です。
絶対パスのメリット
絶対パスは、指定元のファイルがどこにあっても目的ファイルの位置が変わらなければ記述が変わらないため、指定元のファイルが移動する場合に発生するリンク切れなどのミスを防ぐことができます。サーバ内における目的ファイルの位置を構造的に把握しやすいというメリットもあります。
また、Web系で外部サイトへのリンクを指定する時には絶対パスでの指定が必須であり、相対パスでは同じサーバ内のファイルしか指定できません。
絶対パスのデメリット
絶対パスのデメリットとしては、階層構造の頂点から全てを省略せずに記載するため、パスが長くなりがちであるという点があります。収容するサーバやドメイン名が変わった時には、全ての記載を変更する作業も必要です。
また、Web上のファイルを指定する絶対パスの場合、オフライン環境で動作させようとするとファイルの場所を確認できない場合があります。
相対パスのメリット
相対パスのメリットは、絶対パスに比べて記述量が少なくて済むことです。また、サイトの引越しなどでサーバが丸ごと変更になるような場合でも、ファイル同士の位置関係が変わっていなければ、パスの表記を変更する必要がありません。
相対パスのデメリット
相対パスの場合、現在のファイルと目的のファイルの位置関係が変わると、リンク切れになってしまいます。そのため、ファイルを別のディレクトリへ移動する場合は、相対パスの書き換えの確認が必要です。
絶対パスと相対パスの使い分け方の例
ここでは、絶対パスと相対パスの使い分けについて2つのケースを説明します。 あるWebサイトで、「http:// ●●●.co.jp/photo/animal.html」から「http:// ●●●.co.jp/img/dog.jpg」を指定するリンクがある想定です。
1.同一ドメイン(サーバ)内でファイルの位置が変わる場合
「http:// ●●●.co.jp/photo/animal.html」ファイルの場所を1階層上に移動し、「http:// ●●●.co.jp/animal.html」とすることにしました。ドメインに変更はなく、目的ファイルである「dog.jp」の位置も変わりません。
目的ファイルの位置が変わらないので、絶対パスは変わりません。 一方、2つのファイルの相対的な位置関係が変わるため、相対パスの変更が必要です。 「animals.html」の移動前と移動後の、絶対パスと相対パスの表記は以下のようになります。
・移動前 絶対パス:http:// ●●●.co.jp/img/dog.jpg 相対パス:../img/dog.jpg
・移動後 絶対パス:http:// ●●●.co.jp/img/dog.jpg 相対パス:img/dog.jpg
2.サイトを引っ越す場合
Webサイト「http:// ●●●.co.jp/」を丸ごと別のドメインの新しいサイト「http:// 〇〇〇.co.jp/」に引っ越しすることにしました。サイト内の構造に変化はなく、「animal.html」ファイルと「dog.jp」ファイルの位置関係も変わりません。
この場合、階層構造の頂点が変わるため、絶対パスは変更が必要です。 一方、構造自体を丸ごと引っ越し、2つのファイルの位置関係は変わらないため、相対パスは変わりません。
・引っ越し前 絶対パス:http:// ●●●.co.jp/img/dog.jpg 相対パス:../img/dog.jpg
・引っ越し後 絶対パス:http:// 〇〇〇.co.jp/img/dog.jpg 相対パス:../img/dog.jpg
チェックテスト
チェックテストを確認する
下記ディレクトリ構造において、index.htmlファイルからみたenjoy.pdfファイルを表す相対パスをdiscord で共有ください。
※imgフォルダとindex.html及びstyle.cssは同階層であり、imgフォルダ内にenjoy.pdfは格納されております。