環境構築
Live Serverで日本語ファイル名が文字化けする
ファイル名に日本語を使っている
こんな症状
ファイル名に日本語を使うとLive ServerのURLで問題が起きる。日本語ファイル名で起きるよ。
まず試す
ファイル名・フォルダ名を半角英数字とハイフンのみにする。
env
❌ 自己紹介ページ.html ／ 練習フォルダ/
✅ profile.html ／ practice/これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓ファイル名に日本語を使っている
→ 半角英数字とハイフンに変える（例: profile.html）。 - ✓フォルダ名に日本語がある
→ プロジェクトを英語名のフォルダに移す。 - ✓ユーザー名が日本語でパスに入る
→ 英語名のユーザーを作る等、パスから日本語を外すことを検討する。
なぜ起きる？
ファイル名やフォルダ名に日本語を使うと、Live ServerのURLエンコードで問題が起きるよ。URLは基本的にASCII文字（半角英数字）しか使えないから、日本語はパーセントエンコーディング（%E3%81%82等）に変換されるんだ。この変換がうまくいかないとファイルが見つからなくなるよ。
✕ エラーが起きるコード
❌ 自己紹介ページ.html
# → Live Server で開くと文字化けしたURL（%E8%87%AA...）になり 404 になる✓ 直したコード
✅ profile.html
# 半角英数字とハイフンのみのファイル名にすれば正しく開ける✅ 直ったか確認
Live Server で文字化けせずページが開ければOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- Live Serverが起動しない — Live Server 拡張機能が正しく動作していない
- GitHub Pagesで404が表示される — Pages設定またはindex.htmlの配置が間違っている
- VS Codeの拡張機能が動かない・反映されない — 再起動・有効化・追加設定のどれかが足りていない
- Permission denied (publickey) — SSH鍵が設定されていない
- npm installが失敗する — パッケージのインストールでエラーが出る
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- VS Codeのインストール方法 — インストールと初期設定を図解で解説
- プログラミング初心者が最初にやるべきこと5選 — 目的を決めて環境構築から