相対パスと絶対パスの使い方

相対パスと絶対パスは、ファイルやリソースを参照するための方法です。相対パスは現在のファイルからの位置関係でリソースを探し、絶対パスはサイトのルートディレクトリまたはURLの先頭から指定します。どちらを使うかはプロジェクトの構造や用途によって異なります。

✅ 一、相対パス（現在のファイルの位置を基準）

✴️ よく使われる書き方

✅ メリット

• 柔軟性が高く、フォルダ構成を変更しても対応しやすい
• サーバーのルートに依存しないため、ローカル開発に適している

❌ デメリット

• ディレクトリ構成が変わると簡単にパスが壊れる
• 大規模プロジェクトの共通リソース参照には不向き

✅ 二、絶対パス（ウェブサイトのルートまたは完全なURLを基準）

✴️ 2つのケース

1. サイトのルートディレクトリからのパス（ / で始まる）

<link rel="stylesheet" href="/css/style.css">
<img src="/images/logo.png">

→ これは、サイトのルート / にある css/style.css や images/logo.png を指します。

2. 完全な URL の場合

<script src="https://cdn.example.com/lib.js"></script>

→ 外部のサーバー（CDNなど）から読み込まれるリソースです。

✅ メリット

• ファイルの場所がディレクトリ構造に左右されない
• CDN や共通リソースなど、固定パスの指定に適している

❌ デメリット

• サイトのディレクトリ構造が変わった場合、リンク切れになる可能性がある（管理者でない限り修正しにくい）
• ローカル環境（HTML をダブルクリックして開いた場合）では / から始まるパスがうまく動作しないことがある

📝 注意点・補足

相対パスの落とし穴

• ../ の階層を間違えると読み込めない
• フォルダ構造を変更すると全て修正が必要になる場合もある

絶対パスの誤解

• / から始まるのは「パソコンのルート」ではなく「ウェブサイトのルート」
• ローカル環境で .html をダブルクリックして開くと絶対パスが効かないことがある

使い分けのコツ

• 自分のファイルと同じ階層や下のフォルダなら相対パス
• サイト全体で共通して使うリソースは絶対パス

❓ Web制作現場でよくある質問（FAQ）

Q1：相対パスはいつ使う？

A： 同じディレクトリ内や近くのファイルを参照するときに使います。コンポーネント内部などで便利です。

Q2：絶対パスはいつ使う？

A： サイト全体で使うCSSや画像、外部のCDNなど、常に同じ場所にあるものを参照したいときに使います。

Q3：/img/logo.pngの意味は？

A： サイトのルートディレクトリにある img フォルダの中の logo.png を指定しています。

Q4：絶対パスがローカルで動かないのはなぜ？

A： ブラウザで直接HTMLを開いていると、/ の意味が曖昧になり、正しく読み込めない場合があります。サーバー上では問題ありません。

Q5：混ぜて使っても大丈夫？

A： もちろん可能です。多くのプロジェクトでは、目的に応じて両方を使い分けています。

📝 まとめ（相対パス vs 絶対パス）

Web開発において、ファイルやリソースを正しく読み込むためには、「相対パス」と「絶対パス」の違いを理解しておくことが重要です。

✅ 相対パスの特徴

• 現在のファイルの位置を基準にリソースを指定する方法
• ローカル環境や柔軟なディレクトリ構成に適している
• 例：./style.css、../img/logo.png
• フォルダ構造を変更するとパスが壊れることがある

✅ 絶対パスの特徴

• サイトのルートディレクトリ（/）または完全な URL からの指定
• サイト全体で共通のリソースや CDN に適している
• 例：/css/main.css、https://example.com/js/app.js
• ローカルでの動作に注意が必要（/ で始まるパスは失敗することがある）

🔁 使い分けのポイント

• 開発中・モジュール間の連携：相対パスが便利
• 本番環境・共通ファイルや外部サービス：絶対パスが安定
• 両方を場面によって使い分けるのが理想的