ルートパスとは？絶対パス・相対パスとの違いや書き方・使い分けをわかりやすく解説

2026年2月17日

この記事の監修者：倉田真太郎

ルートパスとは？絶対パス・相対パスとの違いから書き方・使い分けまで初心者向けに解説

お役立ちセミナー開催情報

広告・SEO・MA──CPA高騰にどう対抗する？AI時代のBtoBマーケ戦略

「AI時代のSEOで勝ち残る条件」「CPAを抑制する広告運用」「受注率を底上げするMA活用」の3つの視点から、限られた予算で最大の結果を出すための2026年版・BtoBマーケティング戦略を徹底解説いたします。

お役立ちセミナーに参加する ▶

Webサイトを制作していると、画像やCSSファイルへのリンクを記述する際に「パス」という概念に出会います。その中でも「ルートパス」は、サイト全体の構造を把握し、効率的なファイル管理を実現するために欠かせない知識です。ルートパスを正しく理解することで、ページ間のリンク切れを防ぎ、保守性の高いWebサイトを構築できます。本記事では、ルートパスの基本的な概念から、絶対パス・相対パスとの違い、具体的な書き方、そして実務での使い分けまでをわかりやすく解説します。初心者の方でも理解できるよう、具体例を交えながら説明していきますので、ぜひ最後までお読みください。

この記事でわかること

ルートパスの基本的な仕組みと役割

ルートパスはWebサイトの最上位ディレクトリを起点としてファイルの場所を指定する方法です

絶対パス・相対パスとの明確な違い

3種類のパスにはそれぞれ特徴があり、用途に応じた使い分けが重要です

実務での適切な使い分け方法

サイト規模や運用体制に応じて最適なパス形式を選択することで保守性が向上します

ルートパスの基本を理解する

ルートパスの定義

ルートパスは、Webサーバーのドキュメントルートを基準点として、目的のファイルまでの経路を記述する方式です。例えば「/images/logo.png」という記述は、ルートディレクトリ直下のimagesフォルダにあるlogo.pngファイルを指します。

この方式では、現在表示しているページの階層に関係なく、常に同じ記述でファイルを参照できます。サイト内のどのページからでも統一した書き方ができるため、大規模サイトの管理に適しています。

ルートディレクトリとは

ルートディレクトリは、Webサイトの最上位に位置するフォルダのことを指します。一般的には、index.htmlなどのトップページが配置される場所です。

Webサーバー上では、このルートディレクトリがURLのドメイン名の直後に対応します。例えば「https://example.com/」にアクセスすると、サーバーのルートディレクトリにあるファイルが表示される仕組みです。

ルートパスが必要な理由

Webサイトの規模が大きくなると、ファイルの管理が複雑になります。ルートパスを使用することで、ディレクトリ構造が深くなっても、ファイルへの参照を簡潔に記述できます。

また、テンプレートファイルやヘッダー・フッターなど、複数のページで共通して使用する要素を管理する際にも便利です。ルートパスであれば、どの階層のページに組み込んでも正しくファイルを参照できるためです。

以下の表は、ルートパスを使用する主なメリットをまとめたものです。

メリット	説明	効果
統一性	どのページからも同じ記述で参照可能	コードの可読性向上
保守性	ファイル移動時の修正箇所が少ない	運用コストの削減
拡張性	サイト構造の変更に柔軟に対応	将来の改修が容易

このように、ルートパスはWeb制作の効率化に大きく貢献する重要な概念といえます。

ルートパスの基本を押さえておくと、サイト規模が大きくなっても管理しやすくなりますよ。

ルートパスと絶対パスの違い

絶対パスの特徴

絶対パスは、プロトコル（httpやhttps）からドメイン名を含めた完全なURLでファイルの場所を指定する方法です。「https://example.com/images/logo.png」のような形式で記述します。

絶対パスの最大の特徴は、インターネット上のどこからでもファイルを一意に特定できる点です。外部サイトからの参照や、メールマガジンでのリンク設定などに適しています。

両者の記述形式の違い

ルートパスと絶対パスの記述形式を比較すると、その違いが明確になります。同じファイルを指定する場合でも、書き方が大きく異なります。

以下の表で、具体的な記述例を確認してみましょう。

パスの種類	記述例	起点
ルートパス	/images/logo.png	ドキュメントルート
絶対パス	https://example.com/images/logo.png	完全なURL

ルートパスは「/」で始まり、絶対パスは「http://」や「https://」で始まる点が大きな違いです。

使用場面の違い

ルートパスは同一サイト内でのファイル参照に適しています。一方、絶対パスは外部サイトへのリンクや、サイト外からの参照が必要な場面で使用します。

サイト内部のリソース参照にはルートパス、外部との連携には絶対パスという使い分けが一般的です。この原則を守ることで、サイトの移行やドメイン変更時の作業負担を軽減できます。

ルートパスと絶対パスの使い分けポイント

サイト内のCSS・JavaScript・画像はルートパス
外部サイトへのリンクは絶対パス
OGP画像やcanonicalタグは絶対パス
共通パーツのincludeはルートパス

このように使い分けることで、効率的なサイト運用が可能になります。

サイト内部と外部で使い分けるルールを決めておくと、迷わずに済むでしょう。

バクヤスAI 記事代行では、
高品質な記事を圧倒的なコストパフォーマンスでご提供！

サービス詳細を見る ▶

資料をダウンロードする ▶

ルートパスと相対パスの違い

相対パスの特徴

相対パスは、現在表示しているHTMLファイルの位置を基準にして、目的のファイルまでの経路を記述します。「../」は一つ上の階層、「./」は同じ階層を意味します。

相対パスは小規模なサイトや、ローカル環境でのテストに適した記述方法です。ファイル構造がシンプルな場合は、直感的に理解しやすいというメリットがあります。

階層構造による記述の変化

相対パスは、参照元のファイルがどの階層にあるかによって記述が変わります。これがルートパスとの大きな違いです。

以下の表で、同じ画像ファイルを参照する際の記述の違いを確認しましょう。

参照元の位置	相対パス	ルートパス
ルート直下	images/logo.png	/images/logo.png
第1階層	../images/logo.png	/images/logo.png
第2階層	../../images/logo.png	/images/logo.png

ルートパスは階層に関係なく同じ記述である一方、相対パスは階層が深くなるほど「../」が増えていきます。

メンテナンス性の比較

サイトの規模が大きくなると、相対パスの管理は煩雑になりがちです。ファイルを別のフォルダに移動した場合、関連するすべての相対パスを修正する必要があります。

ルートパスであれば、ファイル移動時も起点が変わらないため、修正箇所を最小限に抑えられます。特に複数人で開発する場合や、長期運用を想定する場合は、ルートパスの採用が効果的です。

ローカル環境での注意点

ルートパスには一つ注意点があります。ローカル環境でHTMLファイルを直接ブラウザで開いた場合、ルートパスが正しく解釈されないことがあります。

これは、ローカル環境ではWebサーバーが動作していないためです。この問題を回避するには、ローカルサーバーを立ち上げてテストするか、開発時のみ相対パスを使用するという方法があります。

相対パスはシンプルなサイト向け、ルートパスは大規模サイト向けと覚えておくとよいでしょう。

バクヤスAI 記事代行では、高品質な記事を圧倒的なコストパフォーマンスでご提供！

バクヤスAI 記事代行では、SEOの専門知識と豊富な実績を持つ専任担当者が、キーワード選定からAIを活用した記事作成、人の目による品質チェック、効果測定までワンストップでご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。

サービス資料を受け取る ▶

サービス導入事例

株式会社ヤマダデンキ様
生成AIの活用により、以前よりも幅広いキーワードで、迅速にコンテンツ作成をすることが可能になりました。
親身になって相談に乗ってくれるTechSuiteさんにより、とても助かっております。
▶バクヤスAI 記事代行導入事例を見る

ルートパスの書き方と実例

HTMLでの記述方法

HTMLでルートパスを使用する場面は多岐にわたります。画像の表示、CSSファイルの読み込み、JavaScriptファイルの読み込み、ページ間のリンクなどが代表的です。

すべての記述において、ルートパスは「/」（スラッシュ）から始まる点が共通しています。以下に具体的な記述例を示します。

HTMLでのルートパス記述例

画像：<img src=”/images/photo.jpg” alt=”説明”>
CSS：<link rel=”stylesheet” href=”/css/style.css”>
JavaScript：<script src=”/js/main.js”></script>
リンク：<a href=”/about/index.html”>会社概要</a>

これらの記述は、サイト内のどのページに配置しても同じように機能します。

CSSでの記述方法

CSSファイル内でもルートパスを使用できます。背景画像やフォントファイルの指定などで活用します。

CSSでルートパスを使用する際は、url()関数の中に記述します。例えば、背景画像を指定する場合は「background-image: url(/images/bg.jpg);」のように記述します。

ディレクトリ構造の設計例

ルートパスを効果的に活用するには、適切なディレクトリ構造の設計が重要です。一般的には、ファイルの種類ごとにフォルダを分けて管理します。

以下は、一般的なWebサイトのディレクトリ構造例です。

フォルダ名	格納ファイル	ルートパス例
/images	画像ファイル	/images/logo.png
/css	スタイルシート	/css/style.css
/js	JavaScriptファイル	/js/main.js
/assets	その他のリソース	/assets/font.woff2

このような構造にしておくと、ファイルの管理が容易になり、ルートパスの記述も統一しやすくなります。

ディレクトリ構造を最初にしっかり設計しておくと、後々の運用がとても楽になります。

ルートパスの使い分け方法

サイト規模による選択

小規模なサイト（数ページ程度）であれば、相対パスでも十分に管理できます。しかし、ページ数が増えてくると、ルートパスの方が効率的になります。

目安として、10ページ以上のサイトや、階層構造が3段階以上になる場合は、ルートパスの採用を検討することをお勧めします。将来的な拡張を見据えて、早い段階でルートパスに統一しておくという選択肢もあります。

開発環境と本番環境の違い

開発環境と本番環境でパスの挙動が異なる場合があります。特にルートパスは、ローカルでHTMLファイルを直接開くと正しく動作しないことがあります。

この問題を解決する方法として、ローカルサーバーを使用する方法があります。VS Codeの「Live Server」拡張機能や、Pythonの簡易サーバーなどを利用すると、ローカル環境でもルートパスが正常に動作します。

CMSでの活用方法

WordPressなどのCMSを使用する場合、テーマファイル内でのパス指定にはCMS独自の関数を使用することが一般的です。

CMSの関数を使用することで、サイトURLの変更にも自動的に対応できる柔軟な構成が可能になります。ただし、静的なHTMLページを併用する場合は、通常のルートパスも理解しておく必要があります。

パス選択のチェックリスト

サイト内リソースの参照はルートパスまたは相対パス
外部サイトへのリンクは絶対パス
OGP画像やcanonicalタグは絶対パス
大規模サイトはルートパスを推奨
ローカルテストではサーバー環境を用意

これらの基準を参考に、プロジェクトに適したパス形式を選択してください。

プロジェクトの初期段階でパスの方針を決めておくと、チーム全体で統一した開発ができますよ。

よくある質問

ルートパスと絶対パスはどちらを使うべきですか？: サイト内部のリソース（画像、CSS、JavaScriptなど）にはルートパスが適しています。一方、外部サイトへのリンクやOGP画像、canonicalタグなど、サイト外からも参照される可能性がある要素には絶対パスを使用することをお勧めします。
ローカル環境でルートパスが動作しないのはなぜですか？: ローカル環境でHTMLファイルを直接ブラウザで開くと、Webサーバーが動作していないため、ルートパスの起点となるドキュメントルートが存在しません。この問題を解決するには、VS Codeの「Live Server」などのローカルサーバーを使用してテストすることをお勧めします。
相対パスからルートパスに変更する際の注意点は何ですか？: 相対パスからルートパスへの変更時は、すべてのリンクと参照を一括で修正する必要があります。変更後は、各ページで画像やCSSが正しく読み込まれているかを確認してください。また、ローカル環境でのテスト方法も変更が必要になる場合があります。
サブディレクトリにWordPressをインストールした場合、ルートパスはどう変わりますか？: サブディレクトリにインストールした場合でも、ルートパスの起点はWebサーバーのドキュメントルートです。WordPressの場合は、テーマ内でget_template_directory_uri()などの関数を使用することで、インストール場所に関係なく正しいパスを生成できます。