htmlのファイルをブラウザーで確認したら文字化け!修正する方法は?

Pocket

htmlのファイルをテキストエディタで一生懸命作成し、ブラウザーで確認したら文字化けでみえない!修正する方法は?…… 文字化けしてしまう理由はいくつかあるのですが、一番多いのは「htmlに記述しているcharsetの値(=文字コード)」と「htmlファイルを保存した時の文字コード」が異なっていることです。そのため、htmlをテキストエディタで作成し、Google ChromeやInternet Explorerなどのブラウザーでみたら文字化けしてしまっている人は、まずこの2つの値が同じになっているかを確認し、修正しましょう。

なお、このページでは次の2点からhtmlファイルは文字コードUTF-8で作成していることを前提に説明していきます。

  • html5では、文字コードUTF-8が推奨となっていること
  • 多くのhtml5&cssなどのホームページ入門書がUTF-8で記述説明

それでは1つ目の確認ポイントおよび修正方法の説明をはじめますね。

文字化けしているhtmlに記述しているcharsetの値(=文字コード)がUTF-8になっていることを確認し、修正

ホームページをhtmlのバージョン5.0(いわゆるhtml5)で作成している人は、多くの人が文字コードを「UTF-8」で記述しています。まずは文字化けしているhtmlファイルに以下の記述がされているかどうか確認しましょう。

確認してもらえましたか?どうでした?charset=”Shift-JIS”など「UTF-8以外の値」が記述されていた場合は、charset=”UTF-8″と修正してくださいネ。なおutf-8と小文字なっていても問題はありません。

この時点で文字化けが直っている可能性もあります。一度、Google ChromeやInternet Explorerなどのブラウザーで確認してみましょう。文字化けが直っていれば、今日は終了です。おつかれさまでした~。

まだ文字化けしたままのあなたは、もう少しガマンして次にすすんでください。

文字化けしているhtmlファイルを保存した時の文字コードが「UTF-8(BOMなし)」になっているか確認

次に文字化けしているhtmlファイルを保存した時の文字コードが「UTF-8(BOMなし)」になっているか確認しましょう。確認する方法はいくつかありますが一番簡単な方法は、htmlファイルをテキストエディタで開き、画面の右下にある文字コードを確認することです。以下の図はTeraPadの画像です。

TeraPadでは「UTF-8(BOMなし)」=「UTF-8N」ですので、「UTF-8N」になっていることを確認しましょう。

サクラエディタを使用している人は「UTF-8」になっていることを確認しましょう。

頭が混乱しそうですが、「UTF-8(BOMなし)で記述されているか」を判断する場合、

  • TreaPadの場合は「UTF-8N」
  • サクラエディタの場合は「UTF8」

と表示されているかで判断します。「UTF-8(BOMなし)」を「UTF-8N」と「UTF8」のどちらで表示しているかは、テキストエディタによってことなります。「えっ?UTF-8(BOMなし)って?なにを言っているのわからない!」というあなたはこちらをご覧ください→そもそも「UTF-8(BOMなし)」と「UTF-8(BOMあり)」とは

『わたしが使っているエディタでは「UTF-8(BOMなし)」を、「UTF-8N」と「UTF8」のどちらで表示しているかわからない』と思ったあなた!そんな時は、とりあえずTeraPadをインストールしてみましょう(→TeraPadのインストール先はこちら)。インストール後にhtmlファイルをTeraPadで開いた時、画面右下に「UTF-8N」と表示されていれば、文字コードが「UTF-8(BOMなし)」でhtmlファイルが作成されています。

文字化けしているhtmlがUTF-8(BOMなし)になっていない場合の修正方法

文字化けしているhtmlをテキストエディタで開き、画面の右下にある文字コードを確認した結果「UTF-8(BOMなし)」になっていなかった場合、「htmlファイルを保存した時の文字コード」を修正します。今回はTeraPadeで修正する方法をご紹介します。

文字化けしているhtmlファイルをTeraPadで開き、[編集]→[すべて選択]を選択します。

[編集]→[コピー]を選択します。

[ファイル]→[新規作成]を選択します。

07

新規作成で開いた画面で[編集]→[貼り付け]を選択します。

[ファイル]→[文字/改行コード指定保存]を選択します。

文字コードに「UTF-8N」を選択し、名前を付けて保存を選択し、[OK]ボタンをクリックします。

ダイアログボックスが開くので、文字化けしているhtmlファイルを選択し、[保存]ボタンをクリックします(=修正した内容を、文字化けしているhtmlファイルへ上書きしています)。

以上で、「htmlファイルを保存した時の文字コード」をUTF-8(BOMなし)に修正できました。ブラウザーで確認して文字化けが発生していないことを確認してください。

htmlのファイルをブラウザーで確認したら文字化け!修正する方法は?のまとめ

htmlファイルをテキストエディタで一生懸命作成し、Google ChromeやInternet Explorerなどのブラウザーでみたら文字化けでみえない!……こんな時の解決方法をもう一度簡単におさらいすると以下の2点のいずれかをすると修正されます。

  • 文字化けしている「htmlファイルに記述しているcharsetの値(=文字コード)」を「UTF-8」に修正し、ブラウザーで表示して文字化けしていないことを確認
  • 文字化けしている「htmlファイルを保存した時の文字コード」を「UTF-8(BOMなし)」に修正し、ブラウザーで表示して文字化けしていないことを確認

いずれか1つをおこなえば、文字化けは解消されるはずです(まれに2つ両方おこなわないといけないケースもあります)。

どうですか?Google ChromeやInternet Explorerで文字化けは発生しなくなりましたか?

Pocket