絶対パス・相対パス・ルート相対パスの違いとは？初心者向け使い分け・書き方ガイド

Webサイト制作を始めたばかりのころ、ファイルへの「パス」指定でこんな悩みにぶつかった経験はありませんか？

「パス」は、Webサイト上で画像やCSS、別ページなどを正しく読み込むために欠かせない、いわばファイルまでの道案内情報（住所）です。このパスの指定方法には大きく分けて3種類あり、それぞれの特徴と正しい使い方を理解しないと、思わぬリンク切れや表示崩れの原因になってしまいます。

でも、ご安心ください！この記事を読めば、

「絶対パス」「相対パス」「ルート相対パス」 3つのパスの明確な違い
それぞれのメリット・デメリット
具体的な書き方（コピペで使えるHTMLコード例付き！）
cominkaが推奨する、Webサイト制作でのベストな使い分け
SEO（検索エンジン最適化）との関係
よくあるパス指定エラーとその解決策

が、基礎からしっかり分かります。

パスの指定はWebサイト制作の基本中の基本。この記事でマスターして、リンク切れの心配から解放され、スムーズなサイト制作・運営を目指しましょう！

yoriaiSEO導入事例後の成功事例はこちら

パスとは？Webサイトにおける「住所」の役割
3つのパスを徹底解説！絶対パス・相対パス・ルート相対パス
メリット・デメリット比較表：一目でわかる違い
【cominkaの見解】Webサイト制作でのベストな使い分けガイド
あるあるエラー！パス指定ミスと解決策
まとめ：3つのパスを使いこなして、エラー知らずのサイト制作を！

パスとは？Webサイトにおける「住所」の役割

パス（Path）とは、コンピューターやインターネット上で、特定のファイルやフォルダがどこにあるのかを示す情報のことです。ちょうど、私たちが手紙を出すときに住所を書くように、Webブラウザやコンピューターはパス情報を頼りに目的のファイルを探し出します。

例えば、Webページに画像を表示させたい場合、HTMLファイルに「この画像ファイルは、〇〇フォルダの中の△△という名前ですよ」とパスを使って正確に教えてあげる必要があります。このパス指定が間違っていると、ブラウザは画像を見つけられず、表示できない（リンク切れ）というわけです。

3つのパスを徹底解説！絶対パス・相対パス・ルート相対パス

Webサイト制作で主に使用するパスには、以下の3種類があります。それぞれの特徴と書き方をしっかり理解しましょう。

絶対パス：どこからでも辿り着ける完全な住所

定義: ファイルが存在する場所を、階層構造の一番上（ルート）から省略せずに全て記述したパス。Webサイトの場合は、http:// または https:// から始まるURL形式が一般的です。
書き方 (Web): https://yourdomain.com/images/logo.png
特徴:
- 記述が長くなる傾向がある。
- そのファイルが存在する場所を示す唯一無二の住所なので、どこから参照しても必ず同じファイルを指す。
- 外部サイトのファイル（他のWebサイトの画像など）を指定する場合は、必ず絶対パスを使う必要がある。
例えるなら: 「東京都千代田区千代田1-1 皇居」のように、日本全国どこから見ても同じ場所を指す完全な住所。

相対パス：今いる場所からの道案内

定義: 現在作業しているファイル（HTMLファイルなど）の位置を基準にして、目的のファイルまでの相対的な道のりを示すパス。
書き方:
- 同じ階層にあるファイル: file.jpg または ./file.jpg (. は現在地を示す)
- 一つ下の階層(例: imagesフォルダ内)のファイル: images/file.jpg または ./images/file.jpg
- 一つ上の階層にあるファイル: ../file.jpg (.. は一つ上の階層を示す)
- 二つ上の階層にあるファイル: ../../file.jpg
特徴:
- 記述が短くなることが多い。
- 現在地（作業ファイル）が変わると、同じファイルへのパスも変わる可能性がある。
- ファイル群をフォルダごと移動しても、内部の相対的な位置関係が変わらなければパスを修正する必要がない。
- ローカル環境（自分のPC）での開発時に便利。
例えるなら: 「この角を右に曲がって、2つ目の信号を左」のように、現在地によって指示が変わる道案内。

ルート相対パス：Webサイトの玄関からの道案内

定義: Webサイトの一番上の階層（ルートディレクトリ、通常はドメイン直下）を基準にして、目的のファイルまでの道のりを示すパス。
書き方: 必ずスラッシュ / から始まる。
- 例: /images/logo.png （サイトのルートにある images フォルダの中の logo.png）
- 例: /css/style.css （サイトのルートにある css フォルダの中の style.css）
特徴:
- 相対パスのように現在地を気にする必要がない。
- Webサイト内であれば、どの階層のページからでも同じ記述でファイルを指定できる。
- サイトのドメイン名が変わっても（例: http から https へ、テスト環境から本番環境へ）、パスの修正が不要。
- ファイルを別の階層に移動した場合でも、パスの記述が比較的シンプルに保たれることが多い。
- Webサイトの内部リンク（画像、CSS、JS、他ページへのリンク）で非常に便利で、管理しやすい。
例えるなら: 「駅の北口を出て、まっすぐ進んだ先の公園の中」のように、常に特定の起点（駅の北口＝サイトのルート）からの道案内。

図解とコード例で見るパスの書き方

【例：Webサイトのファイル階層構造】

https://yourdomain.com/ (ルート: /)
├── index.html              <-- トップページ
├── css/
│   └── style.css           <-- スタイルシート
└── images/
│   └── logo.png            <-- ロゴ画像
│   └── photo.jpg
└── pages/
    ├── about.html          <-- 会社概要ページ
    └── contact/
        └── form.html       <-- お問い合わせフォームページ

(テキストでの図解です。実際の記事では図を入れるとより分かりやすくなります)

【HTMLコードでのパス指定例】

1. index.html から logo.png を表示する場合 (<img> タグ)

HTML

<img src="images/logo.png" alt="ロゴ">
<img src="./images/logo.png" alt="ロゴ">

<img src="/images/logo.png" alt="ロゴ">

<img src="https://yourdomain.com/images/logo.png" alt="ロゴ">

2. about.html (pagesフォルダ内) から style.css を読み込む場合 (<link> タグ)

HTML

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

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

<link rel="stylesheet" href="https://yourdomain.com/css/style.css">

3. form.html (pages/contactフォルダ内) からトップページ (index.html) へリンクする場合 (<a> タグ)

HTML

<a href="../../index.html">トップページへ</a>

<a href="/">トップページへ</a>

<a href="https://yourdomain.com/">トップページへ</a>

(OSによる違いについて) Windowsではパスの区切り文字に \ (バックスラッシュ) が使われますが、Web開発においては基本的に / (スラッシュ) を使用します。多くのWebサーバーやブラウザは / を正しく解釈してくれます。

メリット・デメリット比較表：一目でわかる違い

特徴	絶対パス (`https://...`)	相対パス (`../` など)	ルート相対パス (`/`始まり)
分かりやすさ	◎ (場所が明確)	△ (現在地依存)	〇 (起点固定)
記述の長さ	× (長い)	◎ (短いことが多い)	〇 (比較的短い)
リンク切れ耐性	〇 (場所固定)	△ (ファイル移動に弱い)	〇 (階層変更にやや強い)
ローカル環境	× (基本使えない)	◎ (使いやすい)	◎ (使いやすい)
サイト移転/ドメイン変更	× (全修正必要)	◎ (修正不要な場合多い)	◎ (修正不要)
管理のしやすさ	△ (長い、修正手間)	△ (現在地意識必要)	◎ (管理しやすい)
外部サイト指定	◎ (必須)	× (不可)	× (不可)

【cominkaの見解】Webサイト制作でのベストな使い分けガイド

3種類のパスの特徴を踏まえ、Webサイト制作の現場でどのように使い分けるのがベストか、私たちcominkaとしての推奨をお伝えします。

結論から言うと、Webサイト内部のファイル（画像、CSS、JS、他ページへのリンクなど）を指定する場合は、「ルート相対パス (/始まり)」を基本として使うことをcominkaでは強く推奨しています。

なぜルート相対パスを推奨するのか？

管理が圧倒的に楽: どの階層のページからリンクする場合でも、パスの記述が同じになります。現在地を意識して ../ を数える必要がなくなり、記述ミスが大幅に減ります。
リンク切れに強い: ページのファイルを別のフォルダに移動した場合でも、ルートからの位置関係が変わらなければ、画像やCSSへのパスを修正する必要がありません。これはサイトのメンテナンス性を大きく向上させます。
サーバー移転やドメイン変更に強い: http から https への変更や、テスト環境から本番環境への移行時など、ドメイン名が変わってもパス記述を一切変更する必要がありません。
チーム開発や長期運用でメリット大: 複数人で開発する場合や、長期間にわたってサイトを改修していく場合、パスのルールが統一され、記述がシンプルであることのメリットは計り知れません。

相対パスもローカル環境での手軽さなどメリットはありますが、サイトが複雑化したり、ファイルを移動したりする際に、意図せぬリンク切れが発生しやすいというデメリットがあります。絶対パスは外部サイトへのリンクには必須ですが、内部リンクで多用すると記述が長くなり、ドメイン変更時の修正が非常に手間になります。

cominka推奨の使い分けまとめ:

Webサイト内のリンク（画像、CSS, JS, ページリンクなど）
- 最推奨：ルート相対パス (/css/style.css)
- 次点：相対パス (../css/style.css) ※ファイル構成がシンプルな場合やローカルでの一時的な利用
- 非推奨：絶対パス (https://.../style.css) ※特別な理由がない限り避ける
外部サイトへのリンク
- 必須：絶対パス (https://othersite.com/)
SEO関連タグ (canonical, hreflang, サイトマップなど)
- 推奨：絶対パス (理由は次章)
メール本文や外部サービスに記載するリンク
- 必須：絶対パス
ローカル開発環境での作業
- 相対パス、ルート相対パスが便利

最初はルート相対パスの考え方に少し戸惑うかもしれませんが、この書き方に慣れることが、結果的にミスが少なく、効率的でメンテナンスしやすいWebサイト制作への近道だと、私たちの経験から考えています。

SEOとパスの関係：Googleは絶対パスが好き？

検索エンジン最適化（SEO）の観点では、パスの使い分けについて少し注意が必要です。

Googleは、canonicalタグ（ページの正規URLを示すタグ）やhreflangタグ（言語・地域別のページURLを示すタグ）、サイトマップ (sitemap.xml) などでURLを指定する際には、絶対パスの使用を推奨しています。

理由:

URLの正規化: 絶対パスで指定することで、どのURLが正式なものかをGoogleに明確に伝えることができます。相対パスだと、クローラーがアクセスする経路によってURLの解釈が複数生まれてしまい、重複コンテンツと誤認されるリスクがあります。
クローラーの混乱防止: Googleのクローラーがサイト内を巡回する際に、絶対パスの方がURLを一意に特定しやすく、サイト構造を正確に把握しやすいためです。

ただし、これはあくまでGoogleにURLを伝える特定の場面での話です。

Webサイト内の通常のリンク（<a>タグでのページ間リンクや、<img>, <link>, <script>タグでのファイル読み込み）まで、全て絶対パスにする必要はありません。 前述の通り、サイト内部のリンクについては、管理のしやすさやリンク切れ耐性の観点から、ルート相対パスや相対パスを使う方がメリットが大きい場合が多いです。

SEOのためと思って内部リンクまで全て絶対パスにすると、かえってメンテナンス性が低下し、ドメイン変更時の修正漏れによるリンク切れなどを引き起こす可能性もあるため、注意しましょう。

ポイント：SEO関連タグでは絶対パス、サイト内部リンクはルート相対パス（または相対パス）を基本とするのがバランスの取れた考え方です。

あるあるエラー！パス指定ミスと解決策

パス指定でよく遭遇するエラーと、その解決策を知っておきましょう。

エラー1：画像が表示されない / CSS・JSが効かない (404 Not Found エラー)

原因: 指定したパスにファイルが存在しない。
- ファイル名やフォルダ名のタイプミス（スペルミス）。
- 大文字と小文字の間違い（特にLinuxサーバーでは区別される！Windowsでは区別されないことが多い）。
- ファイルやフォルダを移動・削除してしまった。
- 相対パスの基準となる現在地の認識が間違っている (../ の数が違うなど)。
- ルート相対パスの / を忘れている。
解決策:
- ブラウザの開発者ツール（F12キーで開けることが多い）の「コンソール」や「ネットワーク」タブで、どのファイルが読み込めていないか（404エラーが出ているか）確認する。
- エラーが出ているファイルのパス指定をHTMLソースで確認し、スペル、大文字/小文字、階層構造が正しいか、実際のファイル構成と照らし合わせる。
- タイプミスがないか、ファイルが実際にその場所にあるか、サーバー上のファイルマネージャーやFTPソフトで確認する。

エラー2：ローカル（自分のPC）では表示されるのに、サーバー上では表示されない

原因:
- ローカル環境でのみ有効な絶対パス（例: C:\Users\...）を記述してしまっている。
- サーバー上での大文字/小文字の区別の違い（ローカルのWindowsではOKでも、サーバーのLinuxではNG）。
- サーバーへのファイルアップロード漏れ。
- サーバー側の設定や、CMSなどのシステムがパスを書き換えている可能性。
解決策:
- パスの記述をWebで使える形式（相対パス、ルート相対パス、https://...の絶対パス）に修正する。
- ファイル名やフォルダ名の大文字/小文字をサーバー環境に合わせて統一する（一般的には小文字とハイフン/アンダースコアで統一するのが無難）。
- 必要なファイルが全てサーバーにアップロードされているか確認する。

エラー3：アクセス権限がない (403 Forbidden エラー)
- 原因: ファイルやフォルダに対するアクセス権（パーミッション）がサーバー側で適切に設定されていない。
- 解決策: サーバーのコントロールパネルやFTPソフトを使い、該当ファイルやフォルダのパーミッション設定を確認・修正する（通常、HTMLファイルは 644、フォルダは 755 などが一般的ですが、サーバー環境によります）。

パスのエラーは焦らず、原因を一つずつ特定していくことが大切です。開発者ツールの活用は非常に有効なので、使い方に慣れておきましょう。

まとめ：3つのパスを使いこなして、エラー知らずのサイト制作を！

今回は、Webサイト制作の基本である「絶対パス」「相対パス」「ルート相対パス」について、その違いから具体的な書き方、メリット・デメリット、そしてcominkaが推奨する使い分けまで詳しく解説しました。

今回の重要ポイント:

パスはファイルまでの「住所」。指定が間違えばリンク切れになる。
パスには絶対パス・相対パス・ルート相対パスの3種類がある。
cominkaの見解として、Webサイト内部のリンクには管理がしやすくリンク切れにも強い「ルート相対パス (/始まり)」の利用を強く推奨。
外部サイトへのリンクやSEO関連タグでは「絶対パス」が必要。
エラーが出ても焦らず、開発者ツールなどを活用して原因を特定しよう。

パスの使い分けは、最初は少し複雑に感じるかもしれません。しかし、それぞれの特徴を理解し、特に「ルート相対パス」の考え方に慣れてしまえば、Webサイト制作の効率は格段に上がり、面倒なリンク切れトラブルも大幅に減らすことができます。

ぜひこの記事をブックマークして、パス指定で迷ったときに見返してみてください。エラーを恐れずに実際に手を動かしてみることが、スキルアップへの一番の近道です！ cominkaは、皆さんのスムーズなWebサイト制作を応援しています。

WEBサイトの課題解決（集客・問い合わせ）なら株式会社Cominkaにご相談ください

コンテンツSEOでお困りの方は、実績豊富な株式会社Cominkaにご相談ください。

なぜなら、株式会社Cominkaは、御社のWebサイトの課題を明確にし、最適なソリューションを提供できるからです。豊富な知識と経験を持つプロフェッショナルが、御社のWebサイトの成長を強力にサポートします。

【課題を抱えていませんか？】

SEO対策を始めたばかりで、何から手を付ければ良いかわからない
キーワード選定が難しく、どのキーワードで対策すべきか悩んでいる
コンテンツ作成に時間がかかり、なかなか記事を更新できない
効果測定の方法がわからず、改善が進まない
自社でSEO対策を行うリソースがない
SEOツールを導入したが、使いこなせていない

もし、上記のような課題を抱えていましたら、ぜひ株式会社Cominkaにご相談ください。

問い合わせフォームはこちら

【株式会社Cominkaの強み】

1. 御社のWebサイトの集客をサポート

株式会社Cominkaは、DB型サイトやメディアサイト、サービスサイトなど豊富なSEO対策の知見・経験から、御社のWebサイトのSEO対策をしっかりサポートします。対策キーワードの選定から、テクニカルSEO、コンテンツ、UI/UXまで、ありとあらゆる施策を多角的にご提案し、御社のWebサイトでの集客をサポートします。

2. SEOツール「yoriaiSEO」

株式会社Cominkaが提供するSEOツール「yoriaiSEO」は、Webマーケティングのプロが設計した、初心者でも使いやすいSaaSツールです。SEO対策、アクセス分析、ライティング機能、競合分析、サイト課題診断など、さまざまな機能でWebサイトの集客・運用を強力にサポートします。Webサイトの成長を加速させ、ビジネスの目標達成を支援します。

導入後の成功事例はこちら

主な機能