相対パスとは？絶対パスとの違い・書き方・使い分けを図解でやさしく解説

「相対パスってなに？」「絶対パスとどう違うの？」——HTMLやCSS、プログラミングを学び始めると必ず出てくるのがこの「パス」の概念です。特に相対パスは、書き方のルールが少し独特なため、最初はつまずきやすいポイントです。

結論からお伝えすると、相対パスとは「今いる場所（現在のファイル）から見て、目的のファイルがどこにあるか」を相対的な位置関係で示す書き方です。たとえるなら、「この交差点を右に曲がって2つ目の角を左」のような道案内のイメージです。

この記事では、そもそも「パス」とは何かという基礎から、相対パスと絶対パスの違い、相対パスの具体的な書き方ルール、HTML・CSSでの実践例、SEO観点での使い分け、よくあるミスまでを初心者にもわかるように丁寧に解説します。

そもそも「パス（Path）」とは？

パス（Path）は英語で「道筋・経路」という意味です。IT分野では、目的のファイルやフォルダがどこに保存されているかを示す「住所」のような文字列のことを指します。

Webサイトで普段目にするURL「https://example.com/images/photo.jpg」も、パスの一種です。このURLは「example.comというサーバーの中にある、imagesフォルダの中のphoto.jpgファイル」という場所を示しています。

パスは大きく分けて「絶対パス」と「相対パス」の2種類があり、それぞれ書き方のルールと使いどころが異なります。HTMLでリンクを貼ったり、画像を読み込んだり、CSSファイルを指定したりする際に、どちらのパスを使うかを正しく判断できることが、Web制作の基本スキルです。

相対パスとは？基本の考え方

相対パスの定義

相対パス（Relative Path）とは、現在作業しているファイルの位置を基準にして、目的のファイルまでの道筋を記述する方法です。

日常生活にたとえると、人に道を聞かれたとき「ここから2つ目の角を右に曲がって、3軒目のビルの2階」と答えるようなものです。当然、「今いる場所」が変われば、説明の内容も変わります。これが「相対的」ということです。

相対パスの書き方ルール

相対パスでは、ファイル間の位置関係を示すために以下の記号を使います。

具体例で理解する相対パス

以下のようなフォルダ構造のサイトを例に考えてみましょう。

mysite/
├── index.html
├── css/
│　　└── style.css
├── images/
│　　└── logo.png
└── blog/
　　　└── article.html

例1：index.htmlからlogo.pngを読み込む場合

index.htmlとimagesフォルダは同じ階層にあるので、1つ下のフォルダに入るだけです。

<img src="images/logo.png">

例2：article.htmlからlogo.pngを読み込む場合

article.htmlはblogフォルダの中にあります。まず「../」で1つ上の階層（mysite）に移動し、そこからimagesフォルダに入ります。

<img src="../images/logo.png">

例3：article.htmlからstyle.cssを読み込む場合

同じく「../」で1つ上に移動してから、cssフォルダに入ります。

<link rel="stylesheet" href="../css/style.css">

💡ポイント
相対パスで迷ったら、フォルダ構造を紙に書き出し、「今いるファイル」から「目的のファイル」まで指で辿ってみてください。上に移動するたびに「../」、下のフォルダに入るたびに「フォルダ名/」と書けば、正しいパスが完成します。

絶対パスとは？相対パスとの違いを比較

絶対パスの定義

絶対パス（Absolute Path）は、フルパスとも呼ばれ、階層構造の頂点（ルートディレクトリ）から目的のファイルまでの完全な道筋を記述する方法です。

日常生活にたとえると、「東京都港区芝公園4丁目2-8」のような住所にあたります。誰がどこにいても、この住所を見れば同じ場所にたどり着けます。

Web上での絶対パスの例：https://example.com/images/logo.png

パソコン（Windows）上での絶対パスの例：C:\Users\username\Desktop\mysite\images\logo.png

相対パスと絶対パスの比較表

ルートパス（ルート相対パス）とは？第3の選択肢

相対パスと絶対パスに加えて、もう一つ知っておくべき書き方がルートパス（ルート相対パス）です。

ルートパスとは、ドメインのルートディレクトリ（最上位フォルダ）を基準にして記述する方法です。先頭に「/」（スラッシュ）を付けて書きます。

例：/images/logo.png

これは「ドメインの一番上の階層から見て、imagesフォルダの中のlogo.png」という意味です。相対パスの「../」を何個も重ねる必要がなく、絶対パスのようにドメイン名を書く必要もないため、両者の「いいとこ取り」のような存在です。

サイト内リンクの管理ではルートパスが最も効率的な場面も多く、実務では頻繁に使われます。ただし、ローカル環境（自分のパソコン上）ではサーバーのルートが異なるため動作しない点には注意が必要です。

HTML・CSSでの相対パスの使い方

実際のWeb制作で相対パスを使う代表的な場面を紹介します。

画像の読み込み

<img src="images/photo.jpg" alt="写真の説明">

現在のHTMLファイルと同じ階層にあるimagesフォルダ内の画像を読み込みます。

CSSファイルの読み込み

<link rel="stylesheet" href="css/style.css">

同じ階層のcssフォルダ内にあるスタイルシートを読み込みます。

内部リンク（ページ間のリンク）

<a href="../contact/index.html">お問い合わせ</a>

1つ上の階層にあるcontactフォルダ内のページへリンクします。

CSSファイル内から画像を参照する場合

background-image: url("../images/bg.jpg");

CSSファイルから相対パスで画像を読み込む場合、基準点はHTMLファイルではなく、CSSファイルの位置になる点に注意してください。これは初心者がよく間違えるポイントです。

SEO観点での相対パスと絶対パスの使い分け

Web制作やSEOの観点から、相対パスと絶対パスをどう使い分けるべきかを整理します。

外部サイトへのリンク→絶対パス一択

自サイト以外の外部サイトへリンクを貼る場合、相対パスは使えません。必ず「https://」から始まる絶対パスで記述します。

サイト内リンク→相対パスまたはルートパス

同じサイト内のページや画像を参照する場合は、相対パスまたはルートパスが一般的です。ドメイン変更やSSL化（http→https）の際に、絶対パスだと全リンクの書き換えが必要になりますが、相対パスやルートパスなら修正不要です。

canonicalタグ・OGPタグ→絶対パスが必須

SEOで重要なcanonicalタグや、SNSシェア時に使われるOGPタグのURL指定には、Googleが絶対パスでの記述を推奨しています。相対パスで記述すると、正しく処理されないリスクがあるため注意しましょう。

サイトマップ（sitemap.xml）→絶対パスが必須

XMLサイトマップに記述するURLも絶対パスである必要があります。相対パスで記述しても、検索エンジンが正しく認識できません。

【注意】
「サイト内リンクには相対パス、外部リンクには絶対パス」が基本原則ですが、SEO関連のタグ（canonical・OGP・サイトマップ）では例外的に絶対パスが必須です。この使い分けを間違えると、SEO評価に悪影響が出る可能性があります。

相対パスでよくあるミスとトラブル

初心者が相対パスを使う際に陥りやすいミスを紹介します。

ミス①：「../」の数を間違える

何階層上に移動するかを正しく数えられず、リンク切れや画像が表示されない原因になります。対策は、フォルダ構造を樹形図で書き出し、実際に指でたどって「../」の数を確認することです。

ミス②：CSSからの画像参照で基準点を間違える

CSS内でbackground-imageなどを指定する際、基準点はHTMLファイルではなくCSSファイルの位置です。HTMLを基準にパスを書いてしまうと画像が表示されません。

ミス③：ファイルやフォルダを移動してリンク切れを起こす

相対パスは現在のファイル位置が基準のため、ファイルやフォルダの位置を変えると、パスが無効になりリンク切れが発生します。ファイルを移動した際は、必ず関連する相対パスも修正する必要があります。

ミス④：ローカルとサーバーで動作が異なる

自分のPC（ローカル環境）で正常に動いていたサイトが、サーバーにアップロードすると画像やCSSが読み込めなくなるケースがあります。これはルートパスのルートディレクトリがローカルとサーバーで異なることが原因です。アップロード後にも必ず動作確認を行いましょう。

よくある質問（FAQ）

Q. 初心者は相対パスと絶対パスのどちらから覚えるべきですか？

まずは絶対パスの概念を理解してから、相対パスを学ぶのがスムーズです。絶対パスは「ファイルの住所」として直感的にわかりやすく、相対パスは「今いる場所からの道案内」というステップアップになります。実務では両方を使い分ける場面が出てくるため、どちらも習得しておきましょう。

Q. WordPressでブログを書く場合、パスを意識する必要はありますか？

通常の記事執筆ではあまり意識する必要はありません。WordPress本体が内部的にパスを処理してくれるためです。ただし、テーマのカスタマイズやCSSの編集、画像の直接アップロードを行う際にはパスの知識が必要になります。

Q. 「./」は省略してもいいのですか？

はい、「./」（現在のフォルダを示す記号）は省略可能です。「./images/photo.jpg」と「images/photo.jpg」は同じ意味です。ただし、明示的に「現在のフォルダ基準である」と示したい場合には「./」を付けることもあります。

Q. サイトリニューアルでドメインが変わる場合、相対パスなら修正不要ですか？

サイト内の階層構造が変わらなければ、相対パスで記述した部分は修正不要です。一方、絶対パスで記述した部分はドメイン名が含まれているため、すべて書き換える必要があります。これが相対パスの大きなメリットの一つです。

Q. 相対パスと絶対パス、SEO的にはどちらが有利ですか？

サイト内リンクの場合、SEO的にはどちらでも大きな差はありません。Googleのクローラーはどちらのパスも正しく解釈できます。ただし、canonicalタグやサイトマップなどSEOに直結するタグでは絶対パスが必須のため、場面に応じた使い分けが重要です。

まとめ：相対パスは「今いる場所からの道案内」

この記事のポイントを振り返りましょう。

• パス（Path）とは、目的のファイルまでの道筋を示す文字列
• 相対パスは「現在のファイル位置」を基準に、目的ファイルまでの相対的な経路を記述する方法
• 「./」は同じ階層、「../」は1つ上の階層を意味する
• 絶対パスは「ルートからの完全な住所」、相対パスは「今いる場所からの道案内」
• ルートパス（/から始まる）は両者のいいとこ取りで、実務で頻繁に使われる
• 外部サイトへのリンクやSEOタグ（canonical・OGP等）は絶対パス、サイト内リンクは相対パスまたはルートパスが基本

パスは一度理解してしまえば難しいものではありません。迷ったときはフォルダ構造を紙に描いて、指で辿るのが最も確実な方法です。今日から実際にHTMLを書く際に意識してみてください。