相対パスと絶対パスとは？違いから表記方法までをわかりやすく解説

Web制作を円滑に進めるためには、コードの書き方を正しく理解する必要があります。特に、「パス」と呼ばれる表記方法は使用頻度が高い項目です。パスの書き方を誤るとWebサイトの表示に支障をきたすリスクがあるため、十分に理解したうえでコーディングに取り組みましょう。

この記事では、「相対パス」と「絶対パス」の意味や具体的な表記方法、SEOの観点から見た違いなどについて解説します。各表記方法のメリット・デメリットを知り、上手に使い分けたい開発者の方はぜひ参考にしてください。

パス（path）とは道筋や経路という意味の英単語で、IT用語では特定のデータが保存されている場所を示す文字列のことを指します。

パソコンやスマートフォンなどの機器では、データの保存場所が複数のフォルダによって区切られていることが一般的です。画像やWebサイトのソースコードなど、あらゆるデータはいずれかのフォルダに保存されています。

データの位置をパスで指し示すことで、対象となるデータを利用したり、新たに作ったデータの保存場所を指定したりすることが可能です。

パスの表記方法は大きく分けて2種類に分類されます。その中の1つが「相対パス」と呼ばれる書き方です。

相対パスでは、データが存在する場所がほかのデータとの相対的な位置関係によって記述されます。たとえば、「このデータがある場所から見て、1つ上の階層に位置する場所」というような方法でデータの所在地を指定することが可能です。

ここでは、相対パスの書き方やメリット・デメリットについて解説します。

ディレクトリ構造とは？設計時のポイントからよくある失敗例まで

当記事では、ディレクトリ構造の概要とSEOにおける重要性、設計時のポイントを紹介します。ディレクトリ構造の設計でよくある失敗例やSEO効果の高い構造を作るコツも併せて紹介するので、SEOに強いWebサイトを作りたい人はぜひご覧ください。

相対パスの書き方について知っておくべきポイントは次の通りです。

具体的な例として、パソコン上に3つのフォルダ「Japan」「Tokyo」「Shinjuku」があるとします。各フォルダの位置関係は「Japan」フォルダの中に「Tokyo」フォルダがあり、さらに「Tokyo」フォルダの中には「Shinjuku」フォルダがあるという階層構造です。

そして、各フォルダの中に「index.html」というhtmlファイルを作成したと仮定します。この状態で、「Tokyo」フォルダの中にあるhtmlファイルから「Japan」フォルダ内のhtmlファイルを指し示す相対パスの書き方は次の通りです。

../index.html

「Tokyo」フォルダの中にあるhtmlファイルから見て、「Japan」フォルダは1つ上の階層に位置しています。そのため、1つ上の階層を表す「../」の記号を使って記述することが可能です。

同様に、「Tokyo」フォルダの中にあるhtmlファイルから「Shinjuku」フォルダ内のhtmlファイルは、次の記述方法で指定できます。

/index.html

相対パスの機能を試す際は、実際にフォルダやhtmlファイルを作ってみることが有用です。上記のようなディレクトリ構造でフォルダを作成し、各フォルダ内のhtmlファイルには次のようなリンクを設定してみましょう。

<a href=”../index.html”>1つ上の階層にあるindex.htmlへ移動するリンク</a>
<a href=”/index.html”>1つ下の階層にあるindex.htmlへ移動するリンク</a>

作成したhtmlファイルをブラウザで開きリンクをクリックすると、各ページへ移動することが可能です。

HTMLの意味とは？タグや属性などの構成要素からサイト作成まで

この記事では、HTMLの意味を解説します。Webサイトを制作するうえで、HTMLは欠かせないものです。構成要素や必要な準備なども併せて解説するため、HTMLの意味を正しく理解したい方は参考にしてください。

自身の位置を基準にデータの場所を指定する相対パスには、次のようなメリットとデメリットがあります。

相対パスは短いコードで記述できることや、ドメイン名が変わった場合でも機能することなどがメリットです。

ただし、異なるドメインにアップされているデータへのリンクは指定できません。また、フォルダの移動や削除でディレクトリ構成が崩れるとリンクが切れてしまうことも相対パスのデメリットです。

絶対パスとは、対象ファイルが保存されている場所を直接示す指定方法です。相対パスではデータ同士の位置関係によって文字列が変化することに対して、絶対パスによる指定は文字列が1つに決まります。

絶対パスの書き方やメリット・デメリットは次の通りです。

絶対パスを使用する場合は、ローカル端末のルートディレクトリやWebサイトのドメインから、リンク先までの階層構造を文字列で指定します。

具体的な例として、相対パスの書き方で紹介した「Japan」「Tokyo」「Shinjuku」のフォルダを「〇〇〇.com」という架空のドメインにアップしたとします。この場合、「Japan」フォルダ内のindex.htmlを表す絶対パスは次の通りです。

同様に、「Shinjuku」フォルダ内のhtmlファイルは、次の絶対パスで指定できます。

絶対パスは、どの場所に保存されたhtmlファイルに記述されていても、同じ1つのデータへリンクを貼ることが可能です。

指定するデータの保存場所を直接指定する絶対パスには、次のようなメリットとデメリットがあります。

絶対パスでは、データ同士の位置関係に関わらずリンクを記述できるため、ドメインが異なる外部サイトにもリンクを貼れることがメリットです。また、指し示すデータまでの経路がすべて記述されていて、全体における位置関係がわかりやすい点もメリットとなっています。

一方、コードの文字数が多くなりやすい点や、Webサイトのドメイン変更などに伴って修正が必要になる点が絶対パスのデメリットです。サーバーにアップされたデータが絶対パスで指定されている場合は、オフラインの環境からアクセスすることができません。

相対パスと絶対パスでディレクトリの区切りを表す記号は、開発環境によって異なります。環境別の主な区切り文字は次の通りです。

●「abc/abc/」で表記する環境

UNIX互換環境ではディレクトリの区切りに「/」が使用されます。PHPやHTMLのソースコードでディレクトリの区切りを表す記号も「/」です。

●「abc\abc\」もしくは「abc/abc/」で表記する環境

Windows環境のコマンドプロンプトでは、「\」もしくは「/」のいずれかが使用されます。ExcelのVBAなどにおけるパスの書き方は、OSと同じです。

●「abc\\abc\\」で表記する環境

Javaのソースコードでは、ディレクトリの区切りに「\\」が使用されます。

SEO対策の観点から見た場合、相対パスと絶対パスに効果の差はありません。いずれの表記方法が使用されていたとしても、リンク切れなどのトラブルが発生していない限り同等に評価されます。

ただし、Googleが運営する「Search Console ヘルプ」では、リンク切れを起こしにくい絶対パスを推奨しています。

出典：Search Console ヘルプ「クロールが完了できなかったURLエラー」

Webサイト制作の効率を高める目的で相対パスを使用したい場合は、リンクが適切に貼られているか注意しましょう。

パスとはデータが保存されている場所を表すための文字列で、書き方によって相対パスと絶対パスの2種類に分けられます。相対パスは、データ同士の相対的な位置関係で指定する表記方法です。一方、絶対パスはデータの保存場所を直接指定します。

SEOの観点からは、相対パスと絶対パスの違いによる直接的な影響はありません。ただし、Googleが発信する情報では絶対パスが推奨されています。

相対パスと絶対パスのメリット・デメリットを理解したうえで、状況に応じて使い分けましょう。

aタグとは？基本的な意味・Web担当者が覚えておきたい使い方5選

この記事では、aタグとは何か、基本的な意味と簡単な使い方について、詳しく解説します。Web担当者が覚えておきたいaタグの書き方についても紹介するため、aタグの基本について知りたい人は、ぜひ参考にしてください。

hreflangが多言語サイトに必要な理由｜知るべき5つの注意点

当記事では、「hreflang」の概要から書き方、canonicalタグとの併用方法について詳しく解説します。また、hreflangの確認方法や使用時の注意点についても紹介するため、多言語サイトを運用している方は、ぜひ参考にしてください。