HTMLで日本語の文字化けの原因と対策を解説!

WEBサイトでは文字コードの指定を間違えると文字化けが発生することがあります。この文字化けの対策方法についてサンプルコード付きで解説していきます。

コンテンツ [表示]

  1. 1HTMLで日本語の文字化けが発生する原因
  2. 1.1文字コード
  3. 1.2HTMLで文字コードの指定が出来る
  4. 2HTMLで日本語の文字化け対策

HTMLで日本語の文字化けが発生する原因

みなさんは文字化けしたWEBサイトに遭遇したことはありますでしょうか?

文字化けしているWEBサイト
訪れたWEBサイトが文字化けしていると、サイトがバグっているのか、こちらのPCやスマホの問題なのかわからずにただただ混乱してしまいますよね。

WEBサイトで文字化けが発生する原因ですが、「文字コード」をブラウザが正しく解釈できない事が原因です。

文字コード

文字コードを分かりやすく言うと、数字しか扱えないコンピューターで「あ」「い」「う」「え」「お」などの日本語や感じ、記号などを表現するために文字に割り振られた番号があります。そしてその番号と文字の対応を表でまとめたものが文字コードです。

しかしこの文字コードですが、その種類は1つだけではなく、更に文字コードが違えばその対応表も異なり、文字コードのミスマッチがおきたときに文字化けという現象が発生します。

例えばブラウザの解釈はUTF-8という名前の文字コード(対応表)のときに、実際はShift-JISという別の文字コードだとしたら、このミスマッチにより文字化けします。

HTMLで文字コードの指定が出来る

HTMLのmetaタグで文字コードの指定が可能です。ほとんどのサイトではmetaタグに指定されている文字コード通りに解釈されれば文字化けせずに、正常にページが表示されます。

metaタグで文字コードの指定を行う(UTF-8を指定した例)

 <head>
   <meta charset="UTF-8">
   <title></title>
 </head>

文字化けするパターンとしては、このmetaタグの指定がなかったり、指定された文字コードが間違っている場合などです。

HTMLで日本語の文字化け対策

では文字化け対策はどうすればいいかと言いますと、ずばり上記の「metaタグの文字コードの指定を正しく行う」ということにつきます。

もしも正しい文字コードがわからないという方はぜひ下記のサービスを使ってみましょう。

文字エンコード判別 - UIC
文字エンコードを判別することが可能です。99のエンコードを判別可能です。

上記のサービスは「URL」「ファイル」「文字列」のいずれかを入力することで、文字コードを返してくれる便利なサービスです。

文字コード判別サイトを試した結果

文字コードがわかったら、次にheadタグの中にmetaタグで文字コードを記載しましょう。
(念の為htmlタグのlang属性もjaにしておきましょう。)

文字コードをUTF-8に設定した例

<html lang="ja">
  <head>
     <meta charset="UTF-8">
     <title></title>
  </head>
  <body>
    本文
  </body>
    
</html>

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次