HTMLの文字化けは、初心者がつまずきやすいトラブルです。特に「<meta charset="utf-8">を書いたのに効かない」「日本語だけ記号のように崩れる」「VSCodeでは正常なのにブラウザで見ると文字化けする」というケースはよくあります。「html charset utf-8 文字化け 効かない」と調べている方は、metaタグの書き方だけでなく、ファイルの保存形式やサーバー側の設定まで確認する必要があります。
今回の記事では、
- HTMLでutf-8を指定しても文字化けする原因
- meta charset=”utf-8″の正しい記述位置
- ファイル保存形式とBOMの確認方法
- サーバーやWordPressで文字化けする原因
- 実務で使える文字化けチェックリスト
について解説していきます。
HTMLでutf-8を指定しても文字化けする原因とは
HTMLの文字化けは、ブラウザが「このHTMLファイルはどの文字コードで読めばよいか」を正しく判断できていないときに起きます。
よくある対策として、headタグ内に以下のmetaタグを書きます。
<meta charset="utf-8">ただし、これを書くだけで必ず直るとは限りません。HTMLの文字化けは、metaタグの記述だけでなく、ファイル自体の保存文字コード、metaタグの位置、サーバーのHTTPヘッダー、外部ファイルやデータベース側の文字コードも関係します。
- HTMLファイル自体がUTF-8で保存されていない
- meta charsetの記述位置が遅すぎる
- サーバーのcharset指定がHTMLと違う
- 外部ファイルやテンプレート部品だけ文字コードが違う
- DB・CSV・フォーム送信側の文字コードが違う
meta charset=”utf-8″を書いているのに文字化けする場合、HTMLの記述ミスだけを見るのではなく、保存形式と配信設定まで確認する必要があります。
関連記事：「HTMLタグ一覧｜コピペで使える目的別リファレンス」
まず確認：meta charset=”utf-8″の正しい書き方
HTMLで文字コードを指定する場合は、headタグのなるべく上にmeta charsetを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<p>日本語の文章です。</p>
</body>
</html>meta charsetは、titleタグやCSS、JavaScriptの読み込みよりも前に書くのが基本です。ブラウザはHTMLを上から読みながら文字コードを判断するため、文字コードの指定はできるだけ早い位置に置く必要があります。
大文字・小文字は基本的に問題にならない
以下のようにUTF-8を大文字で書いても、通常は問題ありません。
<meta charset="UTF-8">HTMLの仕様上、charset属性の値は大文字・小文字を区別せずに扱われます。実務では小文字のutf-8でも大文字のUTF-8でも問題ありません。
古い書き方との違い
古いHTMLでは、以下のようにhttp-equivを使う書き方もあります。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">現在のHTMLでは、基本的に以下の短い書き方で十分です。
<meta charset="utf-8">迷った場合は、headタグの先頭付近に <meta charset=”utf-8″> を1つだけ書く、と覚えておけば問題ありません。
関連記事：「HTMLのheadタグとは？意味や使い方を解説」
原因1：HTMLファイル自体がUTF-8で保存されていない
meta charset=”utf-8″を書いているのに文字化けする場合、最初に確認すべきなのがファイル自体の保存形式です。HTMLファイルがShift_JISなど別の文字コードで保存されていると、meta charset=”utf-8″を書いていても文字化けすることがあります。
たとえば、HTMLファイルの中身がShift_JISで保存されているのに、ブラウザへ「これはUTF-8です」と伝えると、ブラウザはShift_JISの文字列をUTF-8として読もうとします。その結果、日本語が崩れて表示されます。
VSCodeで保存文字コードを確認する
VSCodeでは、画面右下に現在の文字コードが表示されます。たとえば、右下にUTF-8、UTF-8 with BOM、Shift JISなどと表示されます。
確認手順は以下です。
- HTMLファイルをVSCodeで開く
- 画面右下の文字コード表示を確認する
- UTF-8以外の場合はクリックする
- 「エンコード付きで保存」を選ぶ
- UTF-8を選んで保存する
「エンコード付きで再度開く」と「エンコード付きで保存」は役割が違います。文字化けを直して保存したい場合は、保存形式を変更する必要があります。
CursorやWebStormを使っている場合も保存形式を確認する
実務では、VSCodeだけでなくCursorやWebStormなどのエディタを使うこともあります。どのエディタでも確認すべき点は同じで、ファイルがUTF-8として保存されているかを確認します。CursorはVSCodeをベースにしたエディタのため、基本的には画面右下のエンコーディング表示から確認できます。WebStormでは、画面右下のエンコーディング表示や設定画面からファイルエンコーディングを確認できます。
エディタが違っても、確認するポイントは「表示上読めるか」ではなく「UTF-8として保存されているか」です。
BOMあり・BOMなしの違い
UTF-8には、BOMありとBOMなしがあります。BOMは、ファイル先頭に付く文字コード識別用の目印です。HTMLだけであればBOMありでも表示できることが多いですが、PHPファイルやWordPressのテンプレートでは、BOMが原因で予期しない空白出力やヘッダー送信エラーにつながることがあります。Web制作では、基本的にUTF-8のBOMなしで保存するのが扱いやすいです。
HTML / CSS / JavaScript / PHP：
UTF-8（BOMなし）で保存するメモ帳やExcelからコピーした文字にも注意する
Windowsのメモ帳、Excel、CSV、古いテキストエディタからコピーした文章をHTMLに貼り付けた場合、ファイル全体の文字コードや一部の記号が原因で表示が崩れることがあります。
制作現場では、CSVから取り込んだ店舗名や商品名だけが文字化けするケースもあります。この場合、HTMLファイルではなく、元データ側の文字コードを確認します。
実務で多い事例：CSVの一部だけ文字化けするケース
Web制作の現場でよくあるのが、HTMLやWordPressの記事本文は正常なのに、CSVから読み込んだ店舗名、商品名、住所だけが文字化けするパターンです。たとえば、サイト本体はUTF-8で作られているのに、クライアントから支給されたCSVがShift_JISで保存されている場合、HTML側をいくら修正してもCSV由来の文字だけ崩れることがあります。
HTML：UTF-8
WordPressテーマ：UTF-8
CSV：Shift_JIS
表示結果：CSVから読み込んだ日本語だけ文字化けこの場合は、HTMLのmetaタグではなく、CSVをUTF-8で保存し直す、読み込み時に文字コード変換を行う、CSV出力元の設定を変更するといった対応が必要です。
ページ全体ではなく一部だけ文字化けしている場合は、「その文字列がどこから来ているか」を追うのが最短の解決策です。
原因2：meta charsetの記述位置が遅すぎる
meta charsetは、ただ書けばよいわけではありません。記述位置も重要です。
HTML仕様では、文字コード宣言を含む要素はHTML文書の先頭1024バイト以内に完全に収まる必要があります。つまり、headタグの下の方に書きすぎると、ブラウザが文字コードを判断するタイミングに間に合わない可能性があります。meta charset=”utf-8″は、headタグの最上部に近い位置へ書くのが安全です。
<head>
<!-- 長いコメントや大量のscriptが先にある -->
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>サンプル</title>
</head>このように、meta charsetの前に長いコメント、scriptタグ、styleタグ、不要な空白が大量にあると、文字コードの判断が遅れる原因になります。
<head>
<meta charset="utf-8">
<title>サンプル</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>「meta charsetを書いているのに効かない」という場合は、headタグ内のどこに書いているかを確認しましょう。
WordPressテーマではheader.phpを確認する
WordPressでは、HTMLのhead部分がテーマのheader.phpやテンプレートファイルで出力されます。文字化けする場合は、管理画面の記事本文だけでなく、テーマ側のhead出力も確認します。
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>WordPressでは、サイト設定の文字コードをbloginfo('charset')で出力する書き方がよく使われます。
関連記事：「HTMLのheadタグとは？意味や使い方を解説」
原因3：サーバーのContent-Type charsetが別の文字コードを返している
HTMLファイルにmeta charset=”utf-8″を書いていても、サーバーがHTTPヘッダーで別のcharsetを返していると、文字化けの原因になります。たとえば、HTMLファイルはUTF-8で保存されているのに、サーバーが以下のようなヘッダーを返しているケースです。
Content-Type: text/html; charset=Shift_JISこの場合、ブラウザはサーバーの情報をもとにShift_JISとして解釈し、UTF-8の日本語が崩れて表示されることがあります。
ブラウザの開発者ツールで確認する
確認手順は以下です。
- Chromeで対象ページを開く
- F12キーで開発者ツールを開く
- Networkタブを開く
- ページを再読み込みする
- HTMLドキュメントを選択する
- Response HeadersのContent-Typeを確認する
HTMLのmetaタグとHTTPヘッダーのcharsetが食い違っている場合、サーバー設定側を修正する必要があります。
.htaccessでUTF-8を指定する例
Apache環境では、.htaccessでcharsetを指定することがあります。
AddDefaultCharset UTF-8ただし、サーバー環境やレンタルサーバーの仕様によって設定方法は異なります。管理画面やサポートページで確認してください。たとえば、エックスサーバーやConoHa WINGなどのレンタルサーバーでは、サーバー管理画面、.htaccess、WordPressキャッシュ機能のどこで表示が変わっているかを切り分ける必要があります。サーバー側でcharsetを強制している場合、HTMLのmetaタグだけでは直らないことがあります。
サーバー設定を変更する場合は、他のページや既存システムへの影響も確認してから実施しましょう。
原因4：外部ファイルやテンプレート部品だけ文字コードが違う
HTML本体がUTF-8でも、読み込んでいる外部ファイルやテンプレート部品だけ文字コードが違うと、ページの一部だけ文字化けすることがあります。よくある例は以下です。
- includeしているPHPファイルだけShift_JISで保存されている
- 古いテンプレート部品だけEUC-JPやShift_JISで保存されている
- 外部JavaScript内の日本語文字列だけ文字化けする
- CSVから読み込んだデータだけ文字化けする
PHPのincludeファイルに注意する
Web制作では、ヘッダーやフッターを別ファイルに分けて読み込むことがあります。
<?php include 'header.php'; ?>
<main>
<p>本文です。</p>
</main>
<?php include 'footer.php'; ?>このとき、index.phpはUTF-8でも、header.phpだけShift_JISで保存されていると、ヘッダー部分だけ文字化けすることがあります。
文字化けがページ全体ではなく一部だけに出る場合は、includeしているファイルや読み込み元データを確認します。
CSSやJavaScript内の日本語も確認する
CSSやJavaScriptにも日本語を書くことがあります。
const message = "送信が完了しました";JavaScriptファイルがUTF-8以外で保存されていると、この文字列だけ文字化けすることがあります。HTMLだけでなく、関連ファイルもUTF-8で統一しましょう。
関連記事：「HTMLのコメントアウト方法を解説」
原因5：DB・CSV・フォーム送信の文字コードが違う
meta charsetやHTMLファイルを直しても、データベースやCSVの文字コードが違うと文字化けします。たとえば、以下のようなケースです。
- CSVがShift_JISで保存されている
- データベースの照合順序が古い設定になっている
- フォーム送信時の文字コードが想定と違う
- APIから受け取る文字列のエンコードが違う
CSVをExcelで扱う場合の注意点
ExcelでCSVを開く場合、環境によってShift_JIS前提で読み込まれることがあります。そのため、UTF-8のCSVをExcelで開いたときに文字化けしたり、逆にShift_JISのCSVをWeb側で読み込んだときに文字化けしたりします。
CSVをWebサイトへ取り込む場合は、CSVの保存形式もUTF-8にそろえるのが基本です。
データベースはutf8mb4を確認する
WordPressやMySQLを使う場合は、データベース側の文字コードも確認します。現在のWordPressではUTF-8系の設定が一般的ですが、古い環境や移行データでは一部だけ文字化けすることがあります。特に絵文字や一部の漢字まで扱う場合は、MySQLのutf8mb4系の設定が重要です。
HTMLのmeta charsetだけを直しても、DBやCSVの文字コードが違う場合は根本解決になりません。
オススメ：HTML、CSSの問題集に無料で挑戦しよう！
HTMLを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じることがあります。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を用意しています。
WordPressで文字化けする場合の確認ポイント
WordPressで文字化けが起きる場合、HTMLファイルだけを確認しても原因が見つからないことがあります。テーマ、プラグイン、データベース、キャッシュの影響を順番に切り分けます。
テーマファイルの保存形式を確認する
テーマ内のheader.php、functions.php、テンプレートパーツがUTF-8で保存されているか確認します。特に、古いテーマや外部から受け取ったテーマでは、ファイルごとに保存形式が混在していることがあります。
キャッシュを削除する
文字コードを直したのに表示が変わらない場合、キャッシュが残っている可能性があります。
- ブラウザでスーパーリロードする
- WordPressのキャッシュプラグインを削除する
- サーバー側キャッシュを削除する
- CDNを使っている場合はCDNキャッシュも削除する
プラグインが出力する文字列を確認する
問い合わせフォームやCSV出力系のプラグインで、メール本文やCSVだけ文字化けすることがあります。この場合は、HTMLのcharsetではなく、プラグイン側のメール送信設定やCSV出力形式を確認します。
文字化けを解決するチェックリスト
HTML charset utf-8 文字化けが効かない場合は、以下の順番で確認してください。
| 確認項目 | 見る場所 | 対処 |
|---|---|---|
| meta charset | HTMLのhead | <meta charset="utf-8">をhead上部に置く |
| 1024バイト以内 | HTML先頭 | meta charsetをtitleやCSSより前に移動する |
| 保存形式 | VSCode右下 | UTF-8（BOMなし）で保存する |
| HTTPヘッダー | 開発者ツール | Content-Typeのcharsetを確認する |
| 外部ファイル | PHP / JS / CSV | 関連ファイルもUTF-8に統一する |
| WordPress | テーマ・DB・キャッシュ | header.php、DB、プラグイン、キャッシュを確認する |
文字化けは、HTMLだけでなく「保存形式」「配信設定」「読み込み元データ」を順番に確認することで解決しやすくなります。
公式ドキュメントも確認する
文字コードの仕様を正確に確認したい場合は、公式ドキュメントも参考になります。
まとめ
この記事では、HTMLでutf-8を指定しても文字化けする原因と解決策について解説しました。
meta charset=”utf-8″を書いているのに文字化けする場合、原因はmetaタグ以外にあることが多いです。特に確認すべきなのは、HTMLファイル自体がUTF-8で保存されているか、meta charsetがheadタグの上部にあるか、HTML先頭1024バイト以内に収まっているか、サーバーのContent-Typeが別のcharsetを返していないかです。また、WordPressやPHPでは、テーマファイル、テンプレート部品、CSV、データベース、キャッシュの影響で一部だけ文字化けすることもあります。
まずは、VSCodeでファイルの保存形式をUTF-8にそろえ、headタグの先頭付近に<meta charset="utf-8">を置き、ブラウザの開発者ツールでContent-Typeを確認しましょう。そこまで確認すると、多くの文字化けは原因を切り分けられます。
関連記事：「HTMLのheadタグとは？意味や使い方を解説」
