こんにちは、かたすけです！
Web制作を始めたばかりの頃、「ファイルが見つかりません」というエラーに悩まされた経験はありませんか？実は、その原因のほとんどはパスの指定ミスです。
パスとは、簡単に言えば「目的のファイルがどこにあるかを示す住所」のこと。このパス指定には、大きく分けて相対パスと絶対パスという2つの方法があります。
この記事を読めば、それぞれのパスの役割と正しい使い方を完全に理解でき、もう二度とパスで迷うことはなくなります。
パスとは？基本的な考え方
パスとは、コンピュータに「このファイルは、ここにあるよ！」と教えるための道案内です。
たとえば、「index.html」というファイルから「profile.jpg」という画像を表示したい場合、コンピュータにprofile.jpgの場所を正確に伝える必要があります。
この「場所の伝え方」が、相対パスと絶対パスの2種類です。
英単語「path」には、進路や方向などの意味があるよ！
1. 相対パス：現在の位置を基準にした道案内
相対パスは、「今いる場所から見て、目的のファイルはどこにあるか」という考え方です。友人に「駅から歩いて5分、右に曲がって3軒目の家だよ」と伝えるようなものです。
この「今いる場所」というのは、パスを記述しているHTMLファイルがある場所を指します。
ここでは、実際のフォルダ構成とコード例を見ながら、相対パスの書き方を学びましょう。
フォルダ構成の例
my-website/
├── index.html
├── style.css
├── about.html
└── images/
└── profile.jpg
パターン1：同じ階層にあるファイルにアクセスする場合
index.htmlからstyle.cssを読み込む場合、2つのファイルは同じフォルダ（my-website）にあるため、ファイル名だけでOKです。
- 現在のファイル:
index.html - 目的のファイル:
style.css
以下のコードがその例ですね！
<link rel="stylesheet" href="style.css">
パターン2：1つ下の階層にあるファイルにアクセスする場合
index.htmlからimagesフォルダの中のprofile.jpgを読み込む場合、パスはフォルダ名/ファイル名という形で記述します。
- 現在のファイル:
index.html - 目的のファイル:
imagesフォルダの中のprofile.jpg
<img src="images/profile.jpg" alt="プロフィール画像">
images/は「imagesフォルダの中にある」という意味です。
パターン3：1つ上の階層にあるファイルにアクセスする場合
about.htmlからstyle.cssを読み込む場合、about.htmlはmy-websiteフォルダの1つ下の階層にあります。この場合、1つ上の階層に戻る../を使います。
- 現在のファイル:
about.html - 目的のファイル:
style.css
<link rel="stylesheet" href="../style.css">
../は「1つ上の階層に戻る」という意味です。もし2つ上の階層に戻りたい場合は../../と記述します。
2. 絶対パス：ウェブ上の完全な住所
絶対パスは、「ウェブサイトのトップページから見た、目的のファイルの完全な住所」です。これは、友人に「東京都港区六本木1丁目2-3」と伝えるようなものです。どこにいても、この住所を見れば確実にたどり着けます。
絶対パスは、主に2つのパターンがあります。
パターン1：自分のサイト内の絶対パス
自分のサイトのトップページ（例：https://example.com/）を基準にしたパスです。これは、相対パスのようにファイルを移動しても、パスを修正しなくて済むというメリットがあります。
フォルダ構成の例
my-website/
├── index.html
├── style.css
├── about.html
└── images/
└── profile.jpg
about.htmlからimagesフォルダの中のprofile.jpgを読み込む場合、パスはサイトのルートディレクトリから見たパスを記述します。
- 現在のファイル:
https://example.com/about.html - 目的のファイル:
https://example.com/images/profile.jpg
<img src="/images/profile.jpg" alt="プロフィール画像">
この場合の/は、サイトのトップディレクトリ（https://example.com/）を意味します。URLのドメイン名部分は省略します。
パターン2：外部サイトの完全なURL
YouTubeの動画や外部サイトの画像など、自分のサイトとは全く別の場所にあるファイルを読み込む場合に使います。この場合は、https://から始まる完全なURLを記述する必要があります。
<a href="https://www.youtube.com/watch?v=xxxxxxxx">YouTubeの動画を見る</a>
<img src="https://other-website.com/images/logo.png" alt="外部サイトのロゴ">
相対パスと絶対パス、どちらを使えばいい？
Webサイト制作の現場では、基本的には相対パスを使うことが推奨されています。
| 項目 | 相対パス | 絶対パス |
| 使いやすさ | 少し慣れが必要 | ドメインさえ分かれば簡単 |
| メンテナンス性 | サイトを移転しても、パスを修正しなくて済む場合が多い | ドメインが変わると全てのパスを修正する必要がある |
| 表示速度 | わずかに速い | ドメイン名の解決が必要なため、わずかに遅い |
| 主な用途 | 自分のサイト内のファイルへのリンク | 外部サイトのファイルへのリンク |
相対パスを使う主なメリットは、サイトの引っ越しが簡単になることです。例えば、テスト環境から本番環境にファイルを移す際も、フォルダ構成が変わらなければパスを修正する必要がありません。
ただし、外部サイトのコンテンツを読み込む場合や、ページの階層構造が非常に複雑で相対パスの記述が難しくなる場合は、絶対パスを適切に使い分けることが重要です。
よくあるパスのエラーと解決策
エラー1：画像やCSSが表示されない
原因: パスが間違っている可能性が非常に高いです。
解決策:
- ファイル名やフォルダ名が正しいか確認: 大文字・小文字も正確に合わせましょう。
- 階層が正しいか確認:
../で1つ上の階層に戻るのを忘れていないか、images/のようにフォルダ名を正しく指定しているか確認しましょう。
エラー2：ブラウザでfile:///から始まるURLが表示される
これは、ローカルのPCからファイルを開いている証拠です。サーバーにアップロードしていない状態では絶対パスは機能しないため、相対パスで記述しているか確認しましょう。
まとめ：HTMLパスのベストプラクティス
Web制作におけるパス指定のまとめです。
- まずは相対パスを基本に使う: 自分のサイト内のファイルは、原則として相対パスで指定しましょう。
- 階層を意識する:
../や/を使って、ファイルの位置関係を正確に把握することが重要です。 - 外部コンテンツは絶対パスで: 外部のYouTube動画や他サイトの画像を埋め込む際は、完全なURL（絶対パス）を使います。
パスは、Web制作の基礎中の基礎ですが、最初は誰でもつまずきやすいポイントです。この記事の内容を参考に、実際に自分で色々なパスを試してみてください。
一度仕組みを理解してしまえば、もうパスで悩むことはなくなるはずです。
もしパスの指定で困ったことがあれば、いつでも質問してくださいね！
