HTMLページの文字化けを直して解決する方法

作成しておいたHTMLページをスマホのテキストエディタで表示したときに6つあるHTMLファイルのうち2つが文字化けしてることに気づく。

PCでは文字化けしないのになんでスマホでは文字化けしてんだろう？と疑問に思いながら、文字化けに気づいた時点では原因が何も浮かばない。

勉強用のHTMLページなのでしばらく放置していましたが、最近やっぱり気になるのでHTMLページの文字化けを直そうと思い立つのです。

HTMLページの文字化けを直したい

HTMLページの文字化けを直したいと思い立ったわけですが、文字化けを直すために私がやったことの流れを一通り記事にしておきます。

まずは「文字化けを直す前のHTMLの表示がどんな感じで文字化けしていたのか」そして「文字化けを直すためにHTMLファイルで確認したこと」を紹介します。

文字化けを直したいと思ったときに、文字化けを直すために必要な確認ポイントが分かると、文字化けの解決の糸口として役立ちます。

文字化けを直す前のHTML

文字化けを直す前のHTMLページでは、文字化けした文字がすべて意味不明な文字の羅列になってしまいます。以下の画像のようにです。

PCのChrome環境では文字化けすることがなかったのですが、スマホ(iPhone)のHTMLエディタアプリでHTMLページをプレビューした場合に文字化けしました。

リロードすると文字化けが直ることもあるのですが、次にHTMLページを表示すると文字化けしてしまいます。

このように文字化けしてしまった場合は、ブラウザでHTMLページの文字化けしてる問題の場所を確認しても解決はしないので、表示したHTMLページから一度離れてHTMLファイル内を確認します。

文字化けを直すために確認したこと

HTMLで文字化けしてしまって直すためにはHTMLファイルを開き確認します。

文字化けを直すために確認すべきポイントは基本的に２箇所

• 文字化けしてるHTMLのhead要素
• 文字化けしてるHTMLファイル

1箇所目の「文字化けしてるHTMLのhead要素」では、metaタグでcharsetという記述があるか確認します。charsetがある場合はcharsetの値がUTF-８になってるか確認します。

私の場合は、文字化けするHTMLページにcharsetと値を記述していないという凡ミスが原因で文字化けしてました。

HTMLのhead要素にmetaタグでcharsetと値があるけど文字化けしてる場合は、2箇所目の確認場所として文字化けしてるHTMLファイルを確認します。

HTMLファイルの文字コードとHTMLのheadで指定するcharsetの値の文字コードが一致してる必要があるためです。

HTMLページで文字化けするほとんどの場合は、上記説明の2箇所の文字コードが「一致してるか」「一致していないか」を確認することで文字化け解決ができます。

HTMLで文字化けを直す解決方法

文字化けする場所を確認してHTMLのheadにcharsetがない、もしくはcharsetと値も記述してるけど、HTMLファイルの文字コードとheadのcharsetの値が違う場合は、2つの文字コードの違いを直すことで文字化けが解決します。

文字化けの解決方法として必要になる「文字コードをHTMLファイルのhead側でどのように記述するのか」また「HTMLファイル側の文字コードを変更するやり方」を説明します。

文字化けするheadにcharsetを記述

HTMLページで文字化けするheadにcharsetを記述する場合は、文字化けの確認をしたとき、headにmetaタグでcharsetを記述してない、もしくはcharsetの値がUTF-8で指定してない場合です。

charsetの記述は以下のように記述して文字化けするHTMLページのheadに記述します。

<meta charset="UTF-8">

HTMLのmetaタグを使用してmetaタグの属性としてcharsetを書きます。そしてcharsetの値にはUTF-8の文字コードで表示するように指定します。

charsetは文字化けしてたHTMLページの文字をどの文字コードで表示するか指定するために記述するもの。

charsetの値になるUTF-8は文字コードの一種で文字を数字変換してコンピュータが解釈できるように、文字に割り当てられてる番号です。今回のHTMLページの文字化けで言えば、文字化けするHTMLページをUTF-8の文字コードでブラウザに識別してもらうため。

現在のHTML5で推奨されているのも「UTF-8」です。

またcharsetの値で記述するUTF-8は大文字でも小文字でも区別されません。

文字化けするheadにcharsetをUTF-8にして記述したらファイルを保存します。

保存してから文字化けするHTMLページを表示して文字化けを直すことができていれば、そのHTMLページで文字化けが解決です。

HTMLファイルの文字コードをUTF-8に変更

HTMLページで文字化けするheadにcharsetを記述しても文字化けが直らない場合には、HTMLファイル側の文字コードをUTF-8にしたHTMLファイルにします。

それぞれ使用してるテキストエディタにより文字コード選択方法に違いがあるので、適宜でエディタの文字コード設定を確認して文字化けするファイルをUTF-8します。

「UTF-8」の文字コードにするときは「BOMなし」の「UTF-8」にするようにします。

上の画像はWindowsのメモ帳でHTMLファイルを作成してみた場合ですが、メモ帳に文字化けしてるHTMLページの記述を新規作成で貼り付けて保存するときに文字コードを変更できます。

Macの場合はメモ帳ではなくテキストエディットですが、メモ帳と同じように文字化けしてるHTMLページの記述を新規作成で貼り付けて保存するときに文字コードを変更できます。

軽い参考程度ですが、UTF-8のHTMLファイルをShift-JISに変更してHTMLページで文字化けするように試してみました。それが以下の画像です。

そして文字コードShift-JISで文字化けしたHTMLファイルを、さらに文字コードをUTF-8に変更し直して文字化けを直そうとしたのですが、文字コード変更ができませんでした。さらにコードが途中から消えてしまう。

私は記述してたコード半分以上消えました。

なので念のためにHTMLファイルの文字コードを変更するときは、HTMLファイルをコピーしてバックアップしておき、新規ファイル作成で文字コードをUTF-8にするのがいいと思うのです。

HTMLページの文字化けを直して解決する方法をまとめると

• HTMLファイルのheadに<meta charset=”UTF-8″>
• HTMLファイルの文字コードをUTF-8で保存して作成

このようにHTMLページで使用する文字をUTF-8の文字コードで統一することで、文字化けを直すことができ解決することができます。

文字化けする原因を文字コードで理解しておく

HTMLページの文字化けを直して解決できるようにと説明しましたが、ある程度は文字化けする原因を理解しておくことで、今後また文字化けを直すことがあるときに悩むことないように活かしたいです。

ざっくり説明ですが、文字コードには文字一つ一つに与えられている固有の文字コードがあります。コンピュータは番号で識別するのが大好きなので、HTMLページの文字も文字に割り当てられてる番号で識別します。

文字コードには種類があって「UTF-8」や「Shift-JIS」「EUC-JP」など種類がありますが、それぞれの文字コードの文字に対応しているコード番号は違います。

例えば日本語の「あ」の場合、UTF-8は「E38182」、Shift-JISは「82A0」、EUC-JPは「A4A2」とコードが決まっています。

そのため指定する文字コードが違うことでHTMLページの文字をブラウザが解釈できない場合に文字化けの原因になってしまう仕組みです。