サイトルート相対パスとは？相対・絶対パスの意味や記述例・確認方法を解説

サイトルート相対パス・相対パス・絶対パスとは

パス（Path）とは、簡単にいうとファイルがどこに保存されているのかを示す住所のようなものです。

例えば、パソコン内の「ダウンロード」というフォルダ内に、画像ファイルを保存した「イメージ」というフォルダがあり、その中に「sample.jpg」という画像ファイルがあったとします。
パスは、「ダウンロード」→「イメージ」→「sample.jpg」というファイルの場所を、コンピューター側が理解できる形式で表したものとなります。

パスは、例えばリンクを示す「<a href=" ">リンク先</a>」や、画像を表示させる「<img src=" " alt=" ">」などで使用します。
具体的には「<a href="パス">リンク先</a>」や「<img src="パス" alt=" ">」といったかたちで、「パス」と書かれた箇所に該当するものを記述するのがパスの使い方です。

では、記述するサイトルート相対パス・相対パス・絶対パスとはどのようなものなのでしょうか。
まずはそれぞれの意味とメリットとデメリットをまとめた表をご覧ください。

次に、それぞれのパスについてご紹介します。

 サイトルート相対パス

サイトルート相対パス（ルートパス、ルート相対パス）とは、階層のトップを示しています。
対象となるドメインやファイルを起点として、目的となるファイルまでの道のりを示すものです。
URLの場合はドメイン名となり、住所で例えるなら、「東京都」や「大阪府」のような都道府県にあたります。

サイトルート相対パスは「/」（スラッシュ）から始まり、ドメイン名が「/」と略されているかたちとなります。
「https://sample.jp」というURLのWebサイトを例にあげると、以下がサイトルート相対パスとなります。

• トップページの場合→「/」
• ブログの場合→「/blog」

指定したいファイルが同じWebサイト内にあるケースや、構造が複雑なWebサイトで使用する際に利用するのがおすすめです。

一方で、サイトルート相対パスは、同じドメイン内でファイルを指定するものであることから、指定したいファイルが外部サイトにあるケースには使えないといえるでしょう。

サイトルート相対パスのメリット

サイトルート相対パスを使用するメリットは以下のとおりです。

• 階層構造が理解しやすい
• ドメイン変更にも対応している

サイトルート相対パスは、ドメインを起点として目的までの道のりを示していることから、階層構造がわかりやすくなっています。

サイトルート相対パスのデメリット

サイトルート相対パスを使用するデメリットは以下のとおりです。

• 環境設定が必要になる

サイトルート相対パスはサーバーにアップしなければ機能しません。
そのため、ローカルサーバー環境を構築したり、FTP（File Transfer Protocol）と呼ばれるインターネットを通じてデータを別のコンピューターに送受信するためのプロトコルを使用しなければならなかったりと、専門知識が必要となる作業が発生する点がデメリットといえるでしょう。

相対パス

相対パスとは、同じドメイン内であれば、現在地を起点として対象となるファイルまでの道のりを記述するものです。
現在地を起点とするため、それ以前の部分に関しては省略して記述できます。

相対パスは、同じドメイン内に対象となるケースでの使用がおすすめで、一方でドメインが異なる場合の使用はおすすめできません。

相対パスのメリット

相対パスのメリットは以下のとおりです。

• 記述する文字量が減る
• ローカル環境でテストすることができる
• ファイルの位置関係に変化がなければ記述内容への変更が不要

相対パスは省略が可能なので、全体的に記述する量が少なくてすみます。
記述する文字量が少なくなることで、ページの読み込み速度に影響を与えづらいと考えられています。
また、相対パスの重要な箇所は位置関係であり、位置を指定するだけであることからローカル環境でのテストも可能です。

相対パスのデメリット

相対パスのデメリットは以下のとおりです。

• 位置関係がわからなくなると混乱を招きやすい
• ファイルを移動するとリンク切れが起こる

例えば、都内在住者同士であれば「東京都中央区日本橋」と言わずに「日本橋」と略しても場所が伝わります。

しかし、大阪で「日本橋」といえば、「大阪府大阪市中央区日本橋」へと案内されるでしょう。
相対パスの場合、このように「日本橋」がどちらの地域のものを指しているのかがわかりづらかったり、同じファイル名であれば混乱しやすかったりといったデメリットがあります。

絶対パス

絶対パスとは、対象となるファイルの所在地を最初から最後まですべて記述することで、必ず目的地にたどり着けるパスです。
荷物を送る際に、宛先として住所と名前を書いて確実に相手へと届けられるものといえばわかりやすいでしょう。

住所と名前を指定することで、どこにいたとしても荷物を届けることができることと同様に、ファイルの場所や名前を絶対パスを使用して指定することで、インターネット上のどこからでもそのデータにアクセスできるようになります。

例えば、「<a href="https://www.sales-dx.jp/">バンソウ公式Webサイト</a>」と記述すれば、リンクの設置された「バンソウ公式Webサイト」の文字をクリックすることで、ネット環境がある限りは誰でもバンソウの公式ホームページを閲覧できます。

絶対パスは、指定したいファイルが外部サイトにあるときや、階層構造が複雑な傾向にあるWebサイトへ使用するのがおすすめです。

一方、指定したいファイルが同じWebサイトにあるケースや、今後ドメインが変更される可能性があるケースでは、ページ全体のURLをすべて変更するといった手間のかかる作業が発生する可能性があるため、使用を控えたほうがよいでしょう。

絶対パスのメリット

絶対パスを使用するメリットは、以下の2つです。

• 階層構造が理解しやすい
• リンク切れが発生しづらい

絶対パスは、先述のようにファイルの所在地をすべて記述することから、構造を階層的に理解しやすく、タイプミスをしない限りはリンク切れが起こりづらいといわれています。

絶対パスのデメリット

絶対パスを使用するデメリットは以下の2つです。

• 記述する文字量が増えることから、ページの表示速度が低下する可能性がある
• ローカル環境でテストすることができない

絶対パスは記述する文字量が増えるとはいえ、個別で見ると相対パスと比較しても数文字多い程度だと思うかもしれません。

しかしWebサイト全体で見ると大きな差が出るケースもあります。
記述するコードが多いとその分Webサイトの読み込みに時間がかかり、表示速度が低下します。
その結果、ユーザーがWebサイトの閲覧をやめてしまう可能性もあります。
また、ローカル環境は本番環境とは異なるため、絶対パスでアクセスができず、テストができないという点もデメリットといえるでしょう。

 Googleは絶対パスの使用を推奨している

ここまでご紹介してきた、サイトルート相対パス・相対パス・絶対パスの中で、Googleが推奨しているのは絶対パスです。

このことについてGoogleは、Google Search Console ヘルプにて以下のように述べています。

可能な場合は、相対リンクではなく絶対リンクを使用します（たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなく https://www.example.com/mypage.html とします）。
引用：クロールが完了できなかった URL のエラー｜Google Search Console ヘルプ

Googleは、クローラーと呼ばれるロボットを自動巡回させることでWebページの情報を収集しています。
その際、Webページに設置されたリンクをたどって別のWebページへと移動するため、リンク切れが発生しているとそのページの情報が読み込めません。
クローラーがスムーズに巡回し、正しい情報を読み取るためにも、リンク切れが発生しづらい絶対パスの使用が推奨されています。

パス別の記述例

3種類あるパスのうち、Googleが推奨しているものはリンク切れとなる可能性が低い絶対パスです。
では、パスは実際どのように記述するのでしょうか。

ここでは、パスの種類別のHTML記述例を、「https://sample.jp」のWebサイトのブログ内にある画像を指定するケースを例にご紹介します。
※URLは「https://sample.jp/blog/photo.jpg」となります。

サイトルート相対パスの記述例

はじめに、サイトルート相対パスの記述例をご紹介します。
サイトルート相対パスは、先述したように階層のトップから目的地までの道のりを示すもので、「/」を用いてドメイン名を省略します。

今回のケースにおけるサイトルート相対パスの記述例は以下のとおりです。

【サイトルート相対パス】

<a href="/blog/photo.jpg">

相対パスの記述例

相対パスは、現在地を起点として目的のファイルが存在している場所までの道のりを示すものです。
ここでは、現在地を「blog」として記述する例をご紹介します。

今回のケースにおける相対パスの記述例は以下のとおりです。

【相対パス】

<a href="/photo.jpg">

絶対パスの記述例

絶対パスとは、目的のファイルまでの道のりを最初から最後まで略すことなく記したもので、先述のとおりGoogleから推奨されているパスでもあります。
絶対パスで今回のケースを記述する際は、以下のようになります。

【絶対パス】

<a href="https://sample.jp/blog/photo.jpg">

パス別の確認方法

納品されたファイルに含まれるリンクやパスを確認する際には、使用されているパスに応じて確認方法を変更する必要があります。
これは、先述のとおりパスの種類によって書き方が異なるため、それぞれに合った確認方法があるからです。
最後に、パス別の確認方法をご紹介します。

サイトルート相対パス：ドメインに接続されたサーバーで確認

サイトルート相対パスを使ったファイルは、最終的に使用する予定のドメインとDNS接続されたサーバーにアップロードして確認するのが理想的です。
DNSとはDomain Name Systemの略で、ドメイン名とIPアドレスをひもづけるシステムのことを指します。

テストサーバーで本番環境と同じ構造を再現できる場合は、そのサーバーでも確認が可能となっています。

相対パス：ローカル環境・サーバーで確認

相対パスは、ローカル環境でも確認が可能となっています。
しかし、フォームやプログラムの動作確認はローカルでは行えないため、その場合はサーバーにアップロードして確認することをおすすめします。

絶対パス：ドメインに接続されたサーバーで確認

絶対パスは、ドメインを含むURLが記述されていることから、ドメインとDNS接続されたサーバーへとアップロードして確認する必要があります。
異なるドメインのサーバーにアップロードしてしまうと、リンクが正しく表示されず確認ができないため注意しましょう。

まとめ

この記事では、サイトルート相対パス・相対パス・絶対パスについて詳しくご紹介しました。
これらは「パス」と呼ばれており、Web制作において欠かせないものとなっています。
サイトルート相対パスは、階層のトップを示しており、対象となるドメインやファイルを起点に、目的となるファイルまでの道のりを示すものです。
階層構造がわかりやすい点がメリットですが、ローカルサーバー環境の構築といった専門知識を要する作業が必要になる点はデメリットといえます。
この記事でご紹介したそれぞれのパスの特徴や記述例を参考に、目的や状況に応じてパスを使い分けましょう。また「パス別の確認方法」もご一読いただき、確認作業に生かしましょう。