【HTML 3-1】よくあるつまずき｜パス・画像が出ない・文字化けをやさしく解決する（初心者向け）

一番多いのは、やっぱり画像です。
でも確認ポイントはかなり決まっています。

• images フォルダを作ったか
• その中に sample.jpg を入れたか
• img の src が `images/sample.jpg` になっているか
• ファイル名の大文字小文字が一致しているか
• 拡張子が `.jpg` なのか `.jpeg` なのか確認したか

例：
HTMLファイルと同じ場所に images フォルダがある場合

`index.html`
`images/sample.jpg`

この時の src はこう書きます。

<img src="images/sample.jpg" alt="サンプル画像" width="480" />

<img src="images/sample.jpg" alt="サンプル画像" width="480" />

a タグのリンクは、href の書き方がズレると動きません。

• href の中身に `https://` が入っているか
• 引用符 `”` が閉じているか
• a タグの閉じタグ `</a>` があるか
• リンク先URLそのものが間違っていないか

<a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener noreferrer">
MDN（日本語）
</a>

<a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener noreferrer">
MDN（日本語）
</a>

• head の中に 下記コードを書いたか

<link rel="stylesheet" href="style.css" />

<link rel="stylesheet" href="style.css" />

• style.css という名前になっているか
• index.html と style.css が同じ階層にあるか
• CSSの最後に `;` を付け忘れていないか
• 中括弧 `{ }` が閉じているか

日本語が変な文字になる時は、まず meta charset を確認します。

• head の中に下記コードがあるか

<meta charset="utf-8" />

<meta charset="utf-8" />

• ファイルを保存し直したか
• ブラウザを更新したか

最初は、ほとんどこれで大丈夫です。
いまの教材の流れでは、head の中に毎回入れておけばかなり安心です。

• VS Codeで“フォルダ”を開いているか
• 右下に「Go Live」が出ているか
• 拡張機能 Live Server が有効か
• index.html を開いているか
• ブラウザを閉じずに、更新だけで確認しているか

そんな時は、いったん“前に動いていた状態”まで戻すのが一番早いです。

• 最後に動いていたコードまで戻す
• 1か所だけ直して保存する
• ブラウザを更新して確認する
• 変化があったら次へ進む

toshi

一気に3つ直すと、どこが原因か分かりにくくなります。
1か所ずつで大丈夫です。