2.パスとフォルダー構成

学習目標

フォルダーの階層構造を理解し、ファイルの場所を把握できる
相対パスを使って、HTML から画像や CSS などのファイルを指定できる
ファイルが見つからないエラーの原因を自分で特定できる

1. フォルダーの階層構造

ファイルはフォルダーで整理します。フォルダーの中にフォルダーを作ることもできます。

たとえば、以下のような構成を考えます。

Directoryhtml-practice/
- index.html
- style.css
- Directoryimages/
  - profile.png
  - background.jpg

html-practice というフォルダーの中に index.html、style.css、images というフォルダーがあります。images フォルダーの中にはさらに profile.png と background.jpg が入っています。

VS Code を開くと、左側のサイドバーに同じ構造のファイル一覧が表示されます。

2. パスとは

パスは、ファイルの場所を文字列で表したものです。HTML で画像を表示したり CSS を読み込んだりするとき、ファイルの場所をブラウザーに伝えるために使います。

<img src="profile.png" alt="プロフィール写真">

この src="profile.png" がパスです。ブラウザーはこのパスを元に profile.png を探して表示します。

3. 相対パス

HTML では 相対パス を使うのが一般的です。コンピューター上の絶対的な場所を指す絶対パス（C:\Users\... のような書き方）は、HTML で画像や CSS などのファイルを指定するときには使いません。相対パスは、HTML ファイルがある場所を基準にしてファイルの場所を示す書き方です。

3-1. 同じフォルダーにあるファイル

HTML ファイルと同じフォルダーにあるファイルは、ファイル名だけで指定できます。./style.css のように ./（現在のフォルダー）を明示する書き方もありますが、HTML では省略するのが一般的です。

Directoryhtml-practice/
- index.html (基準)
- style.css

<!-- index.html から style.css を指定 -->
<link rel="stylesheet" href="style.css">

3-2. 下の階層にあるファイル

フォルダーの中にあるファイルを指定するには、フォルダー名/ファイル名 と書きます。

Directoryhtml-practice/
- index.html (基準)
- Directoryimages/
  - profile.png

<img src="images/profile.png" alt="プロフィール写真">

images/profile.png は「images フォルダーの中にある profile.png」という意味です。/ はフォルダーの区切りを表します。Windows のファイル管理では \（バックスラッシュ）を使う場面もありますが、HTML や Web では /（スラッシュ）を使います。

4. よくあるエラー

画像が表示されない、CSS が読み込まれない場合、原因はほとんどパスの間違いです。

4-1. ファイル名の間違い

ファイル名の大文字・小文字は区別されます。profile.png と Profile.png は別のファイルとして扱われるので、実際のファイル名と一致しているかを確認します。

4-2. フォルダーの指定忘れ

ファイルが別のフォルダーにある場合は、フォルダー名を含めて指定する必要があります。

<!-- images/ をつけ忘れている -->
<img src="profile.png" alt="プロフィール写真">

<!-- 正しくはこう -->
<img src="images/profile.png" alt="プロフィール写真">

4-3. パスの確認方法

パスが正しいかどうかは、開発者ツールで確認できます。詳しくはブラウザーの開発者ツールで扱いますが、「コンソール」タブに 404 (Not Found) というエラーが出ていたら、指定したパスにファイルが見つからなかったという意味です。

エラーメッセージにはブラウザーが探しに行ったパスが表示されるので、実際のファイルの場所と見比べると原因が特定できます。