パスの指定方法には、相対パスと絶対パスがあり、ファイルの特定に必要な経路を表すパスの表記方法を指します。そのため、それぞれの違いや書き方を把握しておくことが重要です。パスの書き方を間違ってしまうと、Webサイトがきちんと表示されなかったり、リンク切れが起きたりすることがあります。
本記事では相対パスを中心に、パスの基本的な概要と、メリットやデメリット、使い分けの方法などを解説します
目次
相対パスと絶対パスの基本理解
パス(path)とは、直訳すると「小道」や「経路」といった意味ですが、IT用語としては「目的のファイルの保存場所を示す文字列」を指します。IT用語としてのパスの記述方法は「相対パス」および「絶対パス」の2種類です。ここでは、Web制作におけるパスと相対パス・絶対パスの概要を解説します。それぞれの基本理解を深めていきましょう。
パスとは何か
Web制作におけるパスとは、画像ファイルやCSSファイルなどがどの場所にあるかを表す文字列のことです。正しいパスを記述することで、コンピューターがファイルへの経路をたどり、ファイルを読み込むことが可能になります。つまり、パスはコンピューターによる「目的ファイルへのアクセス経路」を意味する言葉として使用されているのです。
また、パスは画像ファイルを読み込む時以外に、外部ファイルを読み込んだり、Webページ内のテキストやボタンのリンク先を指定したりする際にも記述します。なお、パスはそれぞれ特徴や記述方法が異なるため注意が必要です。
関連記事：ディレクトリとは？仕組みや一般的に使われる意味を解説！
相対パスとは
相対パスとは、現在地を起点として目的ファイルまでの経路を指定するパスのことです。その名の通り、作業中の場所から相対的な位置を表しています。したがって、起点となる場所が変わると、同じ目的のファイルを指定する場合にも書き方が変わってきます。また、相対パスは後述する絶対パスと比べて表記を短くできるため簡潔で、作業効率の向上が期待できるのです。
絶対パスとは
絶対パスとは、「https://～」や「http://～」の後にWeb上のドメイン名・フォルダ名・ファイル名を全て指定して目的ファイルの場所を表すパスです。その特徴から、別名「フルパス」とも呼ばれています。前述した相対パスは、作業ファイルと目的ファイルの位置関係によってパスの書き方は変わりますが、絶対パスの場合は位置関係が変わっても書き方は同じです。
相対パスの種類と特徴
相対パスの種類の中に「ルート相対パス」があります。ここでは、ルート相対パスと相対パスの特徴について解説します。
ルート相対パスの定義
現在地を起点に、目的のファイルまでの経路を記述する相対パスに対し、最上位階層のフォルダであるルートフォルダを起点に記述するのが「ルート相対パス」です。階層の最上部にあるフォルダから目的のファイルに至るまでの全てを記述する特徴があります。具体的には、絶対パスから「https:://ドメイン名」を省いたものがルート相対パスです。例えば「https://ドメイン名/フォルダ名/ファイル名」のファイルをルート相対パスで表すと「/フォルダ名/ファイル名」となります。
ルート相対パスは、複数人による開発やファイル構造が複雑といった大規模案件の開発でよく用いられます。
異なる階層のファイル指定方法
作業するファイルの場所が変われば、同じ目的ファイルを指定する際でも記述内容が変わることに注意しましょう。ここでは、以下の通り異なる階層でファイルを指定する記述方法を紹介します。
● 目的のファイルが現在の位置から1つ上の階層にある
現在地から、1つ上の階層の中にあるフォルダ「image」の中にある「orange.jpg」を読み込む場合の記述方法となります。同じ階層の場合は、「./」とするところを、1つ上の階層に行くと、「../」のようにドットを1つ増やしていきます。
記述例：<img src=”../image/orange.jpg”>
● 目的のファイルが現在の位置から2つ上の階層にある
現在地から、2つ上の階層の中にあるフォルダ「image」の中にある「orange.jpg」を読み込む場合の記述方法となります。1つ上の階層に行くケースでは「../」とし、2つ上の階層に行く際は「../」を2回続けましょう。さらに階層を上がった時も、「../」が必要です。
記述例：<img src=”../../image/orange.jpg”>
● 目的のファイルが現在の位置から1つ下の階層にある
現在地から、1つ下の階層の中にあるフォルダ「image」の中にある「orange.jpg」を読み込む場合の記述方法となります。下層に進む時は、ドットを使わずに「/」のみで区切っていきます。
記述例：<img src=”/image/orange.jpg”>
相対パスのルール
前述した通り、現在地と同じ階層にあるファイル「orange.jpg」を読み込む場合は、ファイル名の前に「./」を付ける、またはファイル名だけでも良いとされています。
● 記入例：<img src=”./orange.jpg”>または<img src=”orange.jpg”>
相対パスを記述する際は、表示したいページから見て、「読み込みたいファイルがどこにあるのか」を基準にしましょう。例えば、読み込みたいファイルが表示したいファイルから見て上層にある場合には「../」と記述をします。
● 記入例：<img src=”../image/orange.jpg”>
なお、絶対パスを記述する時は「フォルダが保管されている一番上の階層から書く」というルールがあります。
相対パスのメリット
相対パスのメリットとしては「記述が短く簡潔であること」「作動するのに環境への依存がない」の2点が挙げられます。それぞれのメリットを以下で確認していきましょう。
短い記述で済む
相対パスは、コードを短縮して記述できるところが特徴です。字数が少ないということは必要最低限の記述で済むため、作業自体に手間がかからず効率も上がります。記述が短く簡潔であることから、内容が分かりやすいのもメリットです。また、Webサイトのドメインが更新された場合でも、ファイルの配置が変わっていない場合、パスを新たに記述する必要はありません。
環境に依存しない
相対パスは、ローカル環境でも対応します。ここでいうローカル環境とは、インターネット未接続のローカルネットワーク上に構築されている仮想環境のことです。Webサイトの制作やプログラミングを行う際は、個人のパソコンがローカル環境（非公開状態）にある時に作業を進めていきます。ローカル環境でも開発・テストが可能な点は、相対パスの大きなメリットといえるでしょう。
なお、ローカル環境では絶対パスを使用することができません。パスを記述する際には、相対パスまたはルート相対パスを利用する必要があります。
関連記事：プログラミングとは？基本的な意味を理解しておけばビジネスでも役立ちます！
相対パスのデメリット
短く簡潔に記述でき、環境にも依存しない相対パスには「異なるドメイン名のサイトへのリンクには使用できない」「リンクが切れるリスクがある」などのデメリットもあります。ここでは、相対パスで押さえておきたい3つのデメリットを確認しましょう。
外部サイトへのリンクには使えない
外部サイトへのリンクに相対パスは使用できません。したがって、異なるドメインに存在するデータへのリンクは指定できないということになります。サイトのファイル間でのみ相対パスが使用できるため、リンクを外部サイトにしたい場合は、相対パス以外のパス指定方法を選びましょう。
リンク切れのリスクがある
相対パスはフォルダの階層の位置関係によって影響を受けるため、現在のファイルからファイルの場所を変えると位置関係が変わり、リンク切れが起きるおそれがあります。リンク切れした場合、ユーザーとGoogleの双方がリンクをたどれなくなってしまうため注意しましょう。
なお、相対パスで指定されたファイルを異なる場所に移動する際には、位置関係が変化するため、移動するたびに相対パスを修正する必要があります。
大規模サイトではパス管理が難しい
サイトの規模が大きいと、パスの記述や階層構造が複雑になるのがデメリットです。ファイルやフォルダが増えて全体が確認しにくいと、パスを見ただけでは階層構造の把握が難しかったり、相対パスで記述ミスを起こしやすくなってしまったりします。また、ファイル同士の位置関係を把握しきれず、リンク設置を誤ってしまうリスクもあります。
相対パスは、簡潔に記述できるのが特徴ですが、ファイルやフォルダが増えると「./」の記述も増えていき、表記が長くなります。せっかく簡潔に記述できても、「./」が増えたことでデメリットに感じるケースもあるでしょう。大規模なサイトでは、ファイル構成や階層構造がどうなっているか意識することが重要です。
SEOと相対パス
SEOとは「検索エンジン最適化」を意味する言葉で、Googleなどの検索エンジンを利用した際に、検索結果で上位に表示されるように最適化を行う作業のことです。相対パスはSEOと関連しており、リンク切れを起こすとSEOに悪影響を及ぼすおそれがあります。
リンク切れリスクはSEOに悪影響
相対パスの設置ミスなどによりリンク切れが起きると、ユーザーは閲覧したいページにアクセスできず、利便性が低下しページを離脱するリスクが高まります。リンク切れはユーザビリティの低下を招き、結果的にサイトの評価が落ちてしまうおそれがあるため注意が必要です。
また、リンク切れによって検索エンジンのクローラーが巡回しにくくなります。クローラーが巡回できないと情報を収集できず、SEO評価を得て検索順位が決まるのに時間がかかってしまうでしょう。
安定したユーザビリティを確保し、クローラーの巡回を促すためにも、リンク切れを防ぐ必要があります。なお、相対パスや絶対パスはSEO対策の観点から見て、検索順位の決定に効果の差はないことを留意しておきましょう。
関連記事
・リンクとは？しくみと意味、特徴を理解して魅力的なサイトを作る方法
・デッドリンクとは？原因やSEOへの影響を徹底解説
・404 not found（404エラー）ってなに？今さら聞けない原因と対処法を解説
Googleは絶対パスを推奨
前述の通り、リンク切れが起きるとクローラーがページを巡回できません。「Search Console ヘルプ」には、「できるだけ相対リンクではなく絶対リンクを使用します」と記載されています。
このことから、Googleはリンク切れやクロールエラーが発生するリスクが低い絶対パスの使用を推奨しています。ローカル環境で作業する時は相対パスやルート相対パスを使用し、サイトを公開する際に絶対パスに変更することも可能です。しかし、パスが混在すると位置関係がわかりにくくなる場合があります。そのため、同じページ内ではパスを統一して使用すると良いでしょう。
絶対パスのメリットとデメリット
相対パスのメリットとデメリットを確認したところで、絶対パスを使用するメリットやデメリットも把握しておきましょう。
絶対パスのメリット
絶対パスはURLを全て記述するため、指定元のファイルがどの位置にあっても、目的のファイルの位置が変わらない場合、リンク切れが起こりにくいというメリットがあります。目的のファイルまでの経路が全て記述されることから、サイトの全体像や階層、位置関係を理解しやすいのも特徴です。また、絶対パスは相対パスとは異なり、ドメインが違う外部サイトにもリンクを設定できます。
絶対パスのデメリット
階層構造のトップから省略せずに記述するためパスが長くなりやすく、ドメイン名が変わった際には全ての記述を変更しなければなりません。また、Web上のファイルが絶対パスで指定されている場合、ローカル環境ではアクセスできないことにも注意が必要です。
相対パスと絶対パスの使い分け
絶対パスと相対パスには、それぞれメリットやデメリットがあるため、場面によって使い分けることが重要です。「サイトの引っ越しなどでドメインが変わる可能性はあるか」など、状況を考えて適切な方を選びましょう。
相対パスが適しているのは開発・テスト環境など
リンク先が内部サイトであれば、相対パスを使用しましょう。自社サーバーを利用している場合、作業の手間が省けるうえにローカル環境でも対応できる、相対パスを使用するケースがよく見られます。
データの書き込み命令を実行する際も、セキュリティを考えて相対パスを使用します。サーバー内で絶対パスを使用すると、外部からファイルを書き換えられてしまうおそれがあるためです。頻繁に構造が変更される場合でも、相対パスは記述が簡潔で理解しやすいため適しています。
絶対パスが適しているのは大規模サイトなど
外部サイトへのリンクを記述する場合は、相対パスを使用できません。そのため、リンク先が外部サイトの時は絶対パスを使用しましょう。また、絶対パスはリンク切れが発生しにくいことから、SEO目的にも向いているといえます。安定した大規模サイトであれば、相対パスよりも絶対パスを使用する方が効果的です。相対パスだとファイル同士の位置関係がわかりづらく、リンク設置を誤ってしまうおそれがあります。
まとめ
パスとは、コンピューター上のファイルがどの場所にあるかを指す文字列です。相対パスは現在の位置から目的のファイルまでの経路を示し、絶対パスは階層構造のトップからファイルまでの経路を記述します。状況に応じてパスを使い分けることが重要です。ローカル環境でのWebサイト制作やプログラミングには相対パスを使用し、外部サイトへのリンクを設定する際には絶対パスを使用するなど、用途は多岐にわたります。
