HTML
ファイル名に日本語やスペースが含まれている
ファイル名が原因でエラーになる
こんな症状
ファイルが読み込めない、リンクが動かない。ファイル名に日本語やスペースを使ったときに起きやすいよ。
まず試す
ファイル名を半角英数字とハイフンのみにする（スペースの代わりに -）。HTML/CSS内のパス参照も合わせて直す。
html
❌ <link href="スタイル シート.css">
✅ <link href="style.css">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓ファイル名に日本語が入っている
→ 半角英数字とハイフンに変える。 - ✓ファイル名にスペースがある
→ スペースをハイフンに置き換える（例: my-page.html）。 - ✓リンクや画像が読み込めない
→ ファイル名を変えたら、参照しているパスも全部直す。
なぜ起きる？
ブラウザやサーバーはファイルパスを処理するとき、日本語やスペースを特殊な文字（%E3%81%82等）に変換する必要があるよ。この変換がうまくいかないとファイルが見つからなくなるんだ。特にスペースは%20に変換されるため、パスの指定でミスが起きやすいよ。
✕ エラーが起きるコード
<link href="スタイル シート.css">
<!-- 日本語とスペースがある -->✓ 直したコード
<link href="style.css">
<!-- 半角英数のみ使う -->✅ 直ったか確認
リンク・画像・CSSが正しく読み込まれればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- 画像が表示されない — 画像パスが間違っている
- imgのalt属性エラー — alt属性が書かれていない
- スタイルが反映されない — CSSファイルが読み込まれていない
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説