相対パスと絶対パスの違いを実務で理解する。画像・CSS・リンク指定で迷わない書き方
Web制作でパス指定に迷ったら、先に結論だけ押さえるのが早いです。同じサイト内でファイルの位置関係に合わせて書くのが相対パス、ドメイン名まで含めて場所を完全に書くのが絶対パスです。
そして実務でつまずきやすいポイントはもう1つあります。HTMLの画像やリンクは「そのHTML文書」を基準に解決されますが、CSSの url() はHTMLではなく、そのCSSファイル自身の場所を基準に解決されます。ここを取り違えると、画像だけ表示されない、CSSだけ当たらない、リンク先がずれる、といった不具合が起きます。
- 相対パス: 今いるファイルから見た位置で書く
- ルート相対パス: ドメイン直下を起点に
/から書く - 絶対パス:
https://example.com/...のように完全なURLで書く - 画像、CSS、リンクで基準が同じとは限らない
- CSSの
url()はスタイルシートの場所基準なので特に注意
ここがポイント: 迷ったら「このパスは、どのファイルを基準に解決されるのか」を先に確認すると崩れにくくなります。
相対パスと絶対パスの違い
まずは定義を短く整理します。
相対パス
相対パスは、現在のファイルから見た位置関係で指定する書き方です。
<img src="images/logo.png" alt="ロゴ">
<a href="contact.html">お問い合わせ</a>
<link rel="stylesheet" href="css/style.css">
たとえば現在のHTMLが /company/about/index.html にあり、images/logo.png と書いた場合は、同じ階層から見た /company/about/images/logo.png を探します。
よく使う書き方は次の3つです。
photo.jpgまたは./photo.jpg: 同じ階層../photo.jpg: 1つ上の階層../../photo.jpg: 2つ上の階層
ルート相対パス
/ で始める書き方は、現在のファイルではなくサイトのルートを基準にします。
<img src="/assets/images/logo.png" alt="ロゴ">
<a href="/support/faq/">FAQ</a>
https://example.com/company/about/index.html にいても、/assets/images/logo.png は https://example.com/assets/images/logo.png を指します。
絶対パス
絶対パスは、ドメイン名やスキームまで含めて完全に書くURLです。
<img src="https://example.com/assets/images/logo.png" alt="ロゴ">
<a href="https://example.com/support/faq/">FAQ</a>
外部サイトへのリンクや、参照先を明示したい場面で向いています。
まず押さえたい前提
このテーマで混乱しやすいのは、「相対パスはいつも同じ基準で解決される」と思い込みやすい点です。実際には、どの記述場所に書いたかで基準が変わります。
- HTMLの
img srcやa hrefは、その文書のベースURLを基準に解決される - HTMLの
<base>を使うと、相対URLの基準を変更できる - CSSの
url()は、そのCSSファイルのURLを基準に解決される
MDNでも、相対参照はベースURLに対して解決され、/ はサイトルート基準、../ は親ディレクトリ基準になると説明されています。また、CSSの相対URLはHTMLではなくスタイルシートのURL基準です。
ディレクトリ構成で見ると理解しやすい
次のような構成を前提にすると、違いが見えやすくなります。
project/
├─ index.html
├─ about/
│ └─ team.html
├─ assets/
│ ├─ css/
│ │ └─ style.css
│ └─ images/
│ └─ logo.png
└─ contact.html
about/team.html から見た指定例はこうなります。
<img src="../assets/images/logo.png" alt="ロゴ">
<a href="../contact.html">お問い合わせ</a>
<link rel="stylesheet" href="../assets/css/style.css">
解決後のイメージ:
../assets/images/logo.png→/assets/images/logo.png../contact.html→/contact.html../assets/css/style.css→/assets/css/style.css
一方で、同じ場所からルート相対で書くならこうです。
<img src="/assets/images/logo.png" alt="ロゴ">
<a href="/contact.html">お問い合わせ</a>
<link rel="stylesheet" href="/assets/css/style.css">
ページの階層が変わっても同じ指定を流用しやすいのが利点です。
画像・CSS・リンクでの書き方
ここが実務で最も使う部分です。
画像を指定する場合
<img> の src には相対URLも絶対URLも使えます。
<img src="../assets/images/logo.png" alt="ロゴ">
<img src="/assets/images/logo.png" alt="ロゴ">
<img src="https://example.com/assets/images/logo.png" alt="ロゴ">
使い分けの目安:
- 同じサイト内で完結する: 相対パスまたはルート相対パス
- 外部CDNの画像を使う: 絶対パス
- HTMLファイルの置き場所が頻繁に変わる: ルート相対パスが管理しやすい
CSSファイルを読み込む場合
HTMLからCSSを読む link href は、HTML文書を基準に考えます。
<link rel="stylesheet" href="../assets/css/style.css">
ただし、その style.css の中で画像を指定すると、今度はCSSファイルの場所が基準です。
/* /assets/css/style.css に書かれている場合 */
.hero {
background-image: url("../images/logo.png");
}
この ../images/logo.png は、HTMLではなく /assets/css/ から見て1つ上の /assets/ に戻り、/assets/images/logo.png を探します。
HTML基準で考えて images/logo.png と書くと、期待した場所に届かないのが典型的なミスです。
リンクを指定する場合
<a href> も相対、ルート相対、絶対のどれでも書けます。
<a href="../contact.html">相対パスのリンク</a>
<a href="/contact.html">ルート相対のリンク</a>
<a href="https://example.com/contact.html">絶対パスのリンク</a>
社内サイトや静的サイトでページ構造がはっきりしているなら、内部リンクは相対かルート相対で十分な場面が多いです。外部サイトへ飛ばすなら絶対パスが自然です。
よくあるNG例と改善例
抽象的に覚えるより、失敗例で見る方が実務では役に立ちます。
NG例1: CSSの画像パスをHTML基準で書いてしまう
NG:
<!-- /about/team.html -->
<link rel="stylesheet" href="../assets/css/style.css">
/* /assets/css/style.css */
.hero {
background-image: url("images/logo.png");
}
この場合、CSSは /assets/css/images/logo.png を探します。画像が /assets/images/logo.png にあるなら不一致です。
改善:
.hero {
background-image: url("../images/logo.png");
}
NG例2: ページを移動したら相対リンクが全部ずれる
NG:
<a href="contact.html">お問い合わせ</a>
index.html では正しくても、about/team.html に同じ記述を移すと /about/contact.html を探してしまいます。
改善:
<a href="/contact.html">お問い合わせ</a>
ページをまたいで共通部品として使うなら、ルート相対の方が崩れにくい場面があります。
NG例3: / 始まりをどこでも安全だと思う
ルート相対は便利ですが、配信先が必ずドメイン直下とは限りません。たとえばサイト全体が https://example.com/docs/ 配下で公開されているのに、/assets/style.css と書くと、https://example.com/assets/style.css を見に行きます。
改善の考え方:
- ドメイン直下で運用するサイト: ルート相対が使いやすい
- サブディレクトリ配下でも配布する: 相対パスの方が移植しやすい
JavaScriptで解決結果を確認する方法
パスの解決結果が不安なら、URL コンストラクタで確認すると早いです。
const base = "https://example.com/about/team/";
console.log(new URL("../images/logo.png", base).href);
// https://example.com/about/images/logo.png
console.log(new URL("/assets/logo.png", base).href);
// https://example.com/assets/logo.png
console.log(new URL("https://cdn.example.com/logo.png", base).href);
// https://cdn.example.com/logo.png
文字列を単純連結しているのではなく、URLのルールに沿って解決される点が重要です。../ や / の挙動を確認したいときに便利です。
実務での使い分け
現場では「どちらが正しいか」より、「どの運用に向くか」で決める方が失敗しません。
相対パスが向く場面
- テンプレートや静的ファイルを別ディレクトリへまとめて移しやすくしたい
- サブディレクトリ配下で公開する可能性がある
- ローカル確認、本番配信、ステージングでドメインが変わる
ルート相対パスが向く場面
- サイト内の共通ヘッダーや共通ナビで、どの階層でも同じ記述を使いたい
- サイトが常にドメイン直下で公開される
- 内部リンクや共通アセットの見通しを良くしたい
絶対パスが向く場面
- 外部サイトへリンクする
- CDNや別ドメインの画像、API、フォントを参照する
- 参照先を完全に明示したい
迷ったときの判断フロー
短く整理すると、判断基準は次の順です。
- 外部サイトや別ドメインを指すか
- 同じサイト内なら、公開場所がドメイン直下で固定か
- その記述はHTML内か、CSS内か
- 共通部品として複数階層で再利用するか
この4点を先に見るだけで、かなりのミスを避けられます。
まとめ
相対パスと絶対パスの違いは単純ですが、どのファイルを基準に解決するかを外すと一気に混乱します。特に、HTMLの src や href は文書基準、CSSの url() はCSSファイル基準、という違いは早めに体で覚えた方が実務で効きます。
最後に確認するなら次の3点です。
- そのパスはHTML基準か、CSS基準か
- サイト内運用には相対かルート相対のどちらが保守しやすいか
- 配信先がサブディレクトリ配下でも壊れないか
ファイルを移動したときに壊れるリンクや画像は、たいていこの3点のどこかに原因があります。新しく書くときだけでなく、既存サイトの修正時にもここを先に見直すと手戻りが減ります。