2026年4月16日
HTML パスとは？相対パスと絶対パスの違い
HTMLで画像やリンクを指定するとき、ファイルの場所を パス（path） で指定します。パスには 相対パス と 絶対パス の2種類があります。
- 📁 相対パス：現在のファイルの場所を基準にした相対的な場所
- 🌐 絶対パス：ドメインから始まる完全なURL
相対パスの書き方
相対パスは現在のHTMLファイルの場所を基準に書きます。
<!-- 同じフォルダ内のファイル -->
<img src="photo.jpg" alt="写真">
<a href="about.html">自己紹介</a>
<!-- 子フォルダ内のファイル -->
<img src="images/photo.jpg" alt="写真">
<!-- 1つ上のフォルダ -->
<a href="../index.html">トップへ</a>
<!-- 2つ上のフォルダ -->
<a href="../../index.html">トップへ</a>../ は「1つ上のフォルダ」を意味します。
👉 inputタイプ一覧も参考にしてください。
絶対パスの書き方
絶対パスはドメインから始まる完全なURLです。外部サイトへのリンクや、サイトのルートからのパスに使います。
<!-- 外部サイトへのリンク -->
<a href="https://www.google.com">Google</a>
<!-- ルートパス（/から始まる） -->
<a href="/about/">自己紹介</a>
<img src="/images/logo.png" alt="ロゴ">/ から始まるパスは ルートパス といい、サイトのトップ（ドメイン直下）を基準にします。
🔥 HTMLテーブルの作り方で実践してみましょう。
フォルダ構造とパスの例
<!-- フォルダ構造：
/
├── index.html
├── about/
│ └── index.html
└── images/
└── photo.jpg
-->
<!-- about/index.html から画像を参照する場合 -->
<img src="../images/photo.jpg" alt="写真">
<!-- または -->
<img src="/images/photo.jpg" alt="写真">💡 headタグに書くべき内容で基礎を確認できます。
まとめ
- ✅ 相対パス：現在のファイルを基準にした場所
- ✅ 絶対パス：ドメインから始まる完全なURL
- ✅
../で1つ上のフォルダに移動できる - ✅
/から始まるルートパスはサイトのトップを基準にする
パスの書き方を覚えると、ファイルの参照ミスが減ります。レッスンでさらに詳しく学んでみましょう。