Webサイト制作

絶対パスと相対パスとは?メリットや書き方・使い分け方を解説

絶対パスと相対パスとは?メリットや書き方・使い分け方を解説

絶対パスと相対パスはウェブサイト上でファイルを指定する場合に必要となりますが、2つの違いが分からないという方もいるのではないでしょうか。それぞれの使い方が分かっていないとリンク切れを起こしたり作業効率が下がったりする可能性があるため、違いや書き方について知っておくことが大切です。

当記事では、絶対パスと相対パスがどういったものか、またそれぞれのメリットやデメリット、書き方などを解説します。

【この記事はこんな方におすすめです】

  • 絶対パスと相対パスの違いが分からない方
  • 絶対パスと相対パスの詳しい書き方を知りたい方
  • 絶対パスと相対パスの使い分けがいまいち分かっていない方

絶対パスと相対パスとは?パスの意味も解説

パソコンにおける「パス」とは、コンピュータ上のファイルの住所のことです。ファイルがコンピューター上のどこにあるのかを、コンピューターが理解できる形にしたのが「パス」と言います。パスには書き方や種類があり、大きく分けると「絶対パス」と「相対パス」に分かれます。

絶対パスとは、https://もしくはhttp://の後にウェブ上のドメイン、フォルダ名、ファイル名を順に記載したファイルの表記方法です。ドメイン、フォルダ名、ファイル名といった各階層の区切りは「/」で区切ります。ファイルの居所を最初から最後まで完全に記述することから「フルパス」とも呼ばれます。

絶対パスが居所を最初から最後まで記載したファイルの住所であるのに対し、相対パスでは現在のファイルから目的となるファイルまでの行き道を示します。そのため、作業しているファイルが異なると、目的のファイルが同じであっても表記が異なるのが特徴です。

相対パスの仲間「ルート相対パス」

パスの種類にはいくつかあり、大きく分けると「絶対パス」と「相対パス」に分かれます。ルート相対パスは相対パスの仲間で、「ルート」とは一番上のフォルダ(ディレクトリ)のことです。ルート相対パスでは一番上のフォルダから、目的のファイルまでの行き道を示します。

絶対パスと相対パスのよい部分を合わせたようなもので、ドメイン名のみを省略して指定できるため、ドメインだけが修正された場合は修正不要です。またオフラインで作業をしたい場合も、そのまま扱えるといったメリットがあります。

基本的に複数人での開発やファイルの構造が複雑であるなど、大規模案件の開発時に用いられるのがルート相対パスです。

絶対パスのメリット・デメリット

絶対パスのメリット・デメリット

絶対パスはファイルの住所となるため、誰が見ても同じ場所に辿り着くといった特徴があります。非常に分かりやすいため、相対パスの必要性がわからない方も中にはいるのではないでしょうか。絶対パスにもメリット・デメリットがあり、使い所によっては絶対パスを必ず使用すべきときもあります。

以下では、絶対パスのメリット・デメリットをそれぞれ紹介します。

絶対パスのメリット

絶対パスの大きなメリットは、ファイルの場所がどこにあるのか誰が見ても辿り着けることです。絶対パスはファイルの住所であり、パスにはどのフォルダにどのファイルがあるのか全て記載されます。そのため、サーバー内のファイルの位置が構造的に把握しやすいです。

また絶対パスには他の表記法がないためファイルで指定した場所が変わることがなく、リンク切れが起こりづらいのもメリットです。

絶対パスのデメリット

絶対パスのメリットがある一方で、デメリットもいくつかあります。1つは、最上位のディレクトリから目的のファイルまですべてを記載するため、表記が長くなることです。コードの流れによっては処理が重くなる場合もあります。

また、ウェブサイトの制作時にローカル環境では使用できないといったデメリットもあります。サイト自体の引っ越しを考えている場合は所在をすべて記載する必要があるため、リンクもすべて正しく修正しなければならないのもデメリットです。

相対パスのメリット・デメリット

相対パスのメリット・デメリット

絶対パスと同様に、相対パスにもメリットとデメリットがあります。絶対パスはローカル環境で使用できないため、相対パスを使用する必要があるのが相対パスの大きな特徴です。また実際の現場では、絶対パスよりも相対パスの方が多く使用される傾向にあります。

以下では、相対パスのメリットとデメリットを解説します。

相対パスのメリット

相対パスは、必要最低限の表記で済むため字数が少なく作業効率が上がるのがメリットです。また絶対パスとは反対に、ウェブサイトの制作時にローカル環境でも作動します。ローカル環境とは、ネットのつながっていないローカルネットワーク上に構築する仮想環境です。ウェブやアプリの制作で必要な開発環境のため、ローカル環境でもテストできるのは相対パスの大きなメリットとなります。

サイトの引越しやドメインの変更をした場合も、サイト内の構造が変わらない場合はパスを修正する必要がありません。

相対パスのデメリット

相対パスのデメリットは、現在のファイルから目的のファイルまでの位置関係が変わるとリンク切れを起こすことです。ファイルを別のところに移動させる場合は、相対パスの書き換えが必要になります。

また絶対パスに比べて表記が短いのがメリットですが、フォルダやファイルが増えていくと「./」が増えて表記が長くなり、デメリットに感じる場合があります。ファイル構成を意識しないとどこに何のファイルがあるのか分からなくなったり、絶対パスとは異なり外部サイトでは使用できなかったりするのもデメリットでしょう。

絶対パスと相対パスの書き方

絶対パスと相対パスの書き方

canonicalタグをはじめとしたパスを表記するべき場面で、Googleは絶対パスを推奨しています。なぜなら、相対リンクはリンク切れを起こしやすいためです。

Googleのクローラーがサイトを正しくインデックスするのには、サイト内のリンクを正しく巡れるようにする必要があります。相対パスを使用する場合は、ファイル構想の変更に注意し、リンク切れを起こさないようにすることが大切です。

以下では、絶対パスと相対パスのそれぞれの書き方を紹介します。

絶対パス

絶対パスの書き方は、「http:// 」もしくは「https:// 」の後にドメイン名、フォルダ名、ファイル名をそれぞれ「/」で区切って記載していきます。最上位のディレクトリから対象のファイルまでを順番に記載していくため、あまり難しいことはありません。

例えば、下記のような形です。

<img src=”http://aaa.co.jp/imag/apple.jpg”>

上記の絶対パスでは、「aaa.co.jp」というファイル内の「imag」フォルダの中にある「apple.jpg」ということになります。

上記はウェブ表記の場合であり、Windows表記の場合はローカルディスクのドライブ名が最上位のディレクトリになり、区切りには「\」または「¥」が用いられます。Windowsで上記の絶対パスを表記する場合は下記のようになります。

C:\Usersaaa\Desktop\img\apple.jpg

UNIX互換環境では、最上位のディレクトリは「/」で、区切りにも「/」を用います。UNIX互換環境での表記は下記の通りです。

/Users/aaa/Desktop/img/apple.jpg

相対パス

相対パスは現在の場所から目的の場所までの巡り方を表記するため、現在作業しているファイルの場所が違うと同じファイルを指定する際も表記が異なります。そのため、表記方法が同じフォルダにあるか、また1つ上の階層にあるかなどファイルの位置関係で異なるのが特徴です。下記で4つのパターンを紹介します。

目的のファイルが同じ階層のフォルダ内にある場合

同じフォルダに目的のファイルがある場合は、「./」を使用してパスを表記します。「.」は現在の階層であることを指し、現在地を起点にフォルダ名、ファイル名と目的のファイルまで表記していきます。など、「./」は省略することも可能です。

【例】

  • 現在の階層:./
  • フォルダ名:image
  • ファイル名:apple.jpg

<img src=”./image/apple.jpg”>
<img src=”./image/apple.jpg”>

 

目的のファイルが同じ階層内のフォルダにあるものの、さらにフォルダの中にある場合

imageというフォルダの中にimage2というフォルダを作成し、image2の中に目的のファイルapple.jpgがある場合のケースになります。フォルダの中のフォルダ、と少しややこしいですが書き方は単純で、フォルダ名をつなげていくだけです。

【例】

  • 現在の階層:./
  • フォルダ名:image
  • mageの中に作ったフォルダ名:image2

<img src=”./image/image2/apple.jpg”>
<img src=”image/image2/apple.jpg”>

 

目的のファイルが現在地から1つ上の階層にある場合

現在地が最上位の階層ではなく1つ下の第一階層にいて、最上位の階層にあるフォルダimageの中にあるapple.jpgを読み込みたい場合の書き方です。同じ階層では「./」だったところを、一度上の階層に行く場合はドットを1つ増やして「../」を使用します。

【例】

  • 現在の階層:../
  • フォルダ名:image
  • 目的のファイル:apple.jpg

<img src=”../image/apple.jpg”>

 

目的のファイルが現在地から2つ上の階層にある場合

現在地が第二階層で、最上位の階層にあるフォルダimageの中にあるappple.jpgを読み込みたい場合の書き方です。1つ上の階層に行く場合は「../」を使用しました。2つ上の階層に行く場合は「../」を2回続けます。階層を上がるたびに「../」が必要です。

【例】

  • 現在の階層:../../
  • フォルダ名:image
  • 目的のファイル:apple.jpg

<img src=”../../image/apple.jpg”>

絶対パスと相対パスの使い分け

絶対パスと相対パスはそれぞれ使用する場面が異なります。以下では使用するパスの使い分けについて紹介します。

リンク先が外部サイトの場合は絶対パス

相対パスは同じサーバ内にファイルやデータがなくてはなりません。外部サイトへのリンクを表記する場合には使用できないため、外部サイトを利用する場合は必ず絶対パスを使用します。

 

リンク先が内部サイトの場合は相対パス

絶対パスをサーバ内で使用すると、外部から書き換えられる可能性があるため必ず相対パスを使用します。相対パスは作業の手間を削減できる上にオフラインでも対応可能です。セキュリティ面でも、データの書き込み命令などは相対パスを使用するのがよいでしょう。

まとめ

絶対パスと相対パスは、それぞれコンピュータ上のファイルの居場所を指すものです。絶対パスはhttps://もしくはhttp://の後に、最上位のディレクトリからファイルまでの道筋を表記します。相対パスは、現在の居場所から目的のファイルまでの道筋を表記するパスです。

絶対パスではローカル上で使用できないためローカル上では相対パスを使用する必要があったり、リンク先が外部サイトの場合は絶対パスを使用する必要があったりと、使い所はそれぞれ異なります。

Googleではcanonicalタグをはじめとしたパスを表記するべき場面では、絶対パスの使用を推奨していますが、実際の現場では相対パスを使用することが多いです。それぞれのメリットやデメリットや書き方を知り、メリットに合わせてパスを使い分けることが大切です。