2026年4月16日
HTML パスとは？なぜ必要なの？
HTMLで画像を表示したり、別のページにリンクしたりするとき、「どこにあるファイルなのか」をブラウザに伝える必要があります。この「ファイルの場所を指定する書き方」が パス（path） です。
パスを正しく書けないと、画像が表示されない・リンクが壊れるといった問題が起きます。初心者がよくつまずくポイントなので、しっかり理解しておきましょう。
- 📁 相対パス：現在のHTMLファイルの場所を基準にしたパス
- 🌐 絶対パス：ドメインから始まる完全なURL（または/から始まるルートパス）
HTMLの基礎をまだ学んでいない人は「HTML入門」を先に読んでおきましょう。
フォルダ構造の基本を理解しよう
パスを理解するには、まずフォルダ（ディレクトリ）の構造を把握することが大切です。
/ （プロジェクトのルートフォルダ）
├── index.html ← トップページ
├── about/
│ └── index.html ← 自己紹介ページ
├── blog/
│ ├── index.html ← ブログ一覧ページ
│ └── post1/
│ └── index.html ← 記事ページ
└── images/
├── logo.png
└── photo.jpg「今どのHTMLファイルを書いているか」によって、パスの書き方が変わります。
相対パスの書き方
相対パスは「今いる場所（現在のHTMLファイル）を基準」に書きます。地図で言うと「今ここから〇〇方向に〇〇歩」という書き方です。
同じフォルダ内のファイル
<!-- index.html と同じフォルダにある photo.jpg を表示 -->
<img src="photo.jpg" alt="写真">
<!-- index.html と同じフォルダにある about.html へのリンク -->
<a href="about.html">自己紹介ページへ</a>子フォルダ（下の階層）のファイル
<!-- images フォルダの中にある photo.jpg -->
<img src="images/photo.jpg" alt="写真">
<!-- pages フォルダの中の about.html へのリンク -->
<a href="pages/about.html">自己紹介</a>親フォルダ（上の階層）のファイル
<!-- 1つ上のフォルダにある index.html へのリンク -->
<a href="../index.html">トップへ戻る</a>
<!-- 2つ上のフォルダへ -->
<a href="../../index.html">トップへ戻る</a>
<!-- 1つ上のフォルダにある images フォルダの photo.jpg -->
<img src="../images/photo.jpg" alt="写真">../ は「1つ上のフォルダ」を意味します。../../ なら「2つ上のフォルダ」です。
👉 inputタイプ一覧も参考にしてください。
絶対パスの書き方
絶対パスは「場所の全情報を含むパス」です。どこから見ても同じ場所を指します。
外部URLへのリンク
<!-- 外部サイト（Google）へのリンク -->
<a href="https://www.google.com">Google</a>
<!-- 外部サイトの画像を表示 -->
<img src="https://example.com/images/photo.jpg" alt="写真">ルートパス（/から始まる）
<!-- サイトのルートから始まるパス（どのページから参照しても同じ場所を指す） -->
<a href="/about/">自己紹介ページ</a>
<img src="/images/logo.png" alt="ロゴ">
<link rel="stylesheet" href="/css/style.css">/ から始まるパスは ルートパス といいます。サイトのトップ（ドメイン直下）を基準にするので、どのページからリンクしても同じ場所を指します。
🔥 HTMLテーブルの作り方で実践してみましょう。
フォルダ構造とパスの具体例
実際にフォルダ構造とパスの対応を確認してみましょう。
【フォルダ構造】
/
├── index.html
├── about/
│ └── index.html
└── images/
└── photo.jpg<!-- index.html から images/photo.jpg を参照する場合 -->
<img src="images/photo.jpg" alt="写真">
<!-- または（ルートパスを使う場合） -->
<img src="/images/photo.jpg" alt="写真">
<!-- about/index.html から images/photo.jpg を参照する場合 -->
<!-- about/ フォルダの中にいるので、1つ上に戻ってから -->
<img src="../images/photo.jpg" alt="写真">
<!-- または（ルートパスを使えばどこからでも同じ） -->
<img src="/images/photo.jpg" alt="写真">💡 迷ったらルートパスが便利
相対パスはファイルを移動すると書き直しが必要です。ルートパス（/から始まる）を使えば、どのページからリンクしても同じ場所を指すので、大きなサイトでは管理しやすいです。
💡 headタグに書くべき内容で基礎を確認できます。
相対パスと絶対パスの使い分け
| 種類 | 書き方の例 | 向いている場面 |
|---|---|---|
| 相対パス | images/photo.jpg | 小さなサイト、ファイル移動が少ない場合 |
| ルートパス | /images/photo.jpg | ページ数が多いサイト、画像やCSSの共通管理 |
| 絶対URL | https://example.com/img.jpg | 外部サイトのリソース、CDNを使う場合 |
よくあるエラーと対策
エラー1：大文字・小文字の間違い
Photo.jpg と photo.jpg は別のファイルとして扱われます（特にLinux/Macのサーバー）。ファイル名はすべて小文字で統一するのがおすすめです。
エラー2：スペースや日本語のファイル名
私の写真.jpg や my photo.jpg はURLエンコードが必要になりエラーの原因になります。ファイル名は半角英数字とハイフン（-）だけを使いましょう。
<!-- ❌ NG：スペースや日本語はエラーの原因 -->
<img src="私の写真.jpg" alt="写真">
<img src="my photo.jpg" alt="写真">
<!-- ✅ OK：半角英数字とハイフンのみ -->
<img src="my-photo.jpg" alt="写真">
<img src="profile-photo.jpg" alt="プロフィール写真">エラー3：フォルダ構造の間違い
HTMLファイルと画像ファイルの位置関係を正しく把握していないとパスが通りません。ファイルを移動したらHTMLのパスも書き換える必要があります。
確認方法：ブラウザの開発者ツール
ブラウザで画像が表示されないとき、F12 キーで開発者ツールを開いてConsole（コンソール）タブを確認しましょう。404 Not Found と表示されていればパスが間違っています。
// Consoleに表示されるエラー例
GET https://example.com/images/phoot.jpg 404 (Not Found)
// ↑ typo！ photo が phoot になっているまとめ
- ✅ 相対パス：現在のHTMLファイルを基準にした場所
- ✅ 絶対パス：ドメインから始まる完全なURL
- ✅
../で1つ上のフォルダに移動できる - ✅
/から始まるルートパスはサイトのトップを基準にする - ✅ ファイル名は小文字・半角英数字・ハイフンのみを使う
- ✅ 404エラーが出たら開発者ツールのConsoleでパスを確認する
パスの書き方を覚えると、ファイルの参照ミスが減ります。レッスンでさらに詳しく学んでみましょう。
あわせて読みたい記事
- HTML入門 — HTMLの基礎から学ぶ
- HTMLの画像表示方法 — img タグの使い方
- はじめてのWebページ — HTMLファイルを作って開く
- headタグに書くべき内容 — CSS・JSのパスの指定