なぜ理解が必要なのか？
📌 HTMLでは、画像やCSSファイルなどを「外から読み込む」必要があります。
📌 そのときに必要になるのがファイルの場所（パス）を正しく書くこと。
✅ でも…
- 「画像が表示されない！」
- 「CSSが効かない！」
- 「正しく書いたのにうまくいかない…」
それ、パスの書き方が間違っているのかもしれません。
操作の流れ
🧭 パスには2種類ある！
| 種類 | 説明 | 例 |
|---|---|---|
| 相対パス | 今いる場所からの道順 | images/photo.jpg（今の場所から探す） |
| 絶対パス | 最初から最後までの正確な住所 | https://example.com/images/photo.jpg |
✅ 相対パス（よく使う！）
<!-- index.htmlと同じ階層にあるstyle.css -->
<link rel="stylesheet" href="style.css">
<!-- imageフォルダの中のphoto.jpgを読み込む -->
<img src="image/photo.jpg" alt="風景">
📘 相対パスは「自分の場所（HTMLファイル）からの道順」で書きます。
✅ 絶対パス（外部リンクなどで使用）
<img src="https://example.com/images/logo.png" alt="ロゴ">📘 絶対パスは「インターネット上の完全な住所」。他人のサイトにある画像や外部CSSなどを読み込むときに使います。
| 記号 | 意味 | 例 |
|---|---|---|
./ | 今の場所（省略可） | ./style.css = style.css |
../ | 1つ上のフォルダへ | ../img/logo.png |
実際にやってみよう！
【課題1】画像を表示してみよう！
フォルダ構成を以下のように準備
※projectフォルダーの作成、HTMLファイルの作成、CSSファイルの作成、imageフォルダーの作成、samle.jpgの用意をしましょう。これらの作業もHPを作るうえでは必要な作業です。頑張りましょう！
project/
├─ index.html
├─ style.css
└─ image
└─ sample.jpg
以下のコードをHTMLに書く
<img src="image/sample.jpg" alt="サンプル画像">→ ブラウザで画像が表示されればOK！
解答
よくあるミス・注意点
❌ ファイルの場所が間違っている → パスが正しくても画像は見つからない
❌ 拡張子の間違い → .JPGと.jpgは別物！（大文字・小文字注意）
❌ 半角英数字で書かれていない → 日本語フォルダ名はエラーのもとに
ポイント
この知識はHP作成に限ったことだけではありません。ファイルのパスを理解するということは、フォルダ構造やファイル管理のスキルが身につくのと同義です。
- どんな名前のフォルダーが良いのか？
- どこにファイルを入れておくとわかりやすいか？
- どんな名前のファイルだとわかりやすいか？
現場のWeb制作だけでなく、職場での資料管理にも応用可能な知識です。
しっかりと身に付けていきましょう。