HTMLが文字化けする理由と対処法とは？

HTMLが文字化けする理由とは？

HTMLが何故文字化けしてしまうのか。その理由を知るためには、コンピュータの仕組みとコンピュータがどのようにデータを読み込むのかを理解することが重要です。

文字コードの存在

まず、パソコンがどのように文字を扱っているのかを紹介していきます。パソコンは、人間と違って、文字をそのまま読み込むことができません。パソコンが扱えるデータは、数字の「０」と「１」の２進数のみです。

数字の「０」と「１」だけを扱えるパソコンが文字を読み込むために使うのが、「文字コード」です。パソコンは、「０」と「１」の羅列を、文字に変換して読み込むのです。この「０」と「１」からなる羅列のことを、バイト表現と言います。

例えば、バイト表現を用いた文字コードのひとつASCIIでは、「01000001」の対応文字は、「A」となります。こののように、パソコンは各文字をバイト表現に変換して、読み込みます。

しかし、０と１の２進数のみで表記すると長くなりすぎるため、１６進数表記(0~9とA~Fの16文字で数える）でリスト表記する場合もあります。

２進数表記では、８文字で主要なアルファベット文字を表すことができます。（８文字＝８bit=256通り）。

しかし、日本語はひらがなもあれば、片仮名、漢字もあります。文字数が多いため、８文字表現では足りません。そこで、日本語に対応した文字コードを使う必要があります。更に多くの文字を表現できる１６文字（16bit)を利用した文字コードには、「Shift_JIS」や「EUC-JP」があります。

その他、最近主流となってきているのが多言語に対応したコード「Unicode」の「UTF-8」です。この文字コードは、英語や、ドイツ語、フランス語、中国語といった様々な言語に対応しています。

文字化けが起きる原因とは？

HTMLの文字化けが起きる原因は、文字コードにあります。文字コードには、様々な種類があると前述しました。HTMLの文字コードと、ブラウザが解釈する文字コードが違っている時に、文字化けが発生するのです。

例えば、「Shift_JIS」で設定したHTMLファイルをブラウザで表示させようとしたとします。しかし、文字コードをブラウザ側で解釈できなかった場合、もしくはパソコンがその文字コードを持ていない場合、文字コードを正しく表示させることができます。すると、ブラウザ側で解釈した文字コードで表示させようとします。そこで、HTMLで表記した文字が正しく解釈されず、文字化けとなってしまうのです。

この文字化けを防ぐためには、ブラウザがしっかりと解釈できるように文字コードを指定すること、そしてパソコンが解釈できる文字コードを使うことが重要となってきます。

HTMLの文字化けを解消する方法とは

文字化けが起こる原因が理解できたので、文字化けを解消させる方法をみていきましょう。

文字コードを確認する

まず、HTMLファイルがどの文字コードで保存されているかを確認します。利用しているエディタによって、デフォルトで設定されている文字コードは異なります。HTMLで特に指定しない場合、このデフォルトの文字コードが使用されることになるので、文字化けしてしまった場合は、エディタのデフォルト文字コードをチェックしましょう。

Sublime Textは、デフォルトではUTF-8しか扱えないことになっているので、日本語対応の文字コード「Shift_JIS」や「EUC-JP」を利用したい場合は、別途パッケージをインストールする必要があります。こういった設定は、エディタによって違うので、ご利用のエディタに合わせて調べてみてください。

文字コードを指定する

次に、HTML内で文字コードを指定する方法を紹介します。HTMLファイル内で、文字コードを指定するタグを入れることで、ブラウザに利用の文字コードを伝達することができます。

文字コードの指定は、metaタグで行います。metaタグは、要素の中に記述します。UTF-8を指定する場合は、下記の通りです。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

charset=の後に、指定する文字コードを記述します。この文字コードが、HTMLファイル自体の文字コードと同じになっていれば、ブラウザが正しくHTMLの文字コードを解釈してくれます。

CodeCamp提供のデザインマスターコース

当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は

• デザインからコーディングまでWebデザイナーに必要なスキルを獲得できる
• Webデザイナーとして転職・フリーランスも可能になる
• 実際にWebサイトを作るのでポートフォリオとしても使用できる

詳細はこちらから確認してみてください！▶︎https://codecamp.jp/courses/master_design

まとめ

HTMLでの文字化けを防ぐためには、ブラウザに使用しているHTMLの文字コードを正しく伝えることが重要です。特に、「Shift_JIS」や「EUC-JP」といった日本語の文字コードを利用する場合は、HTMLファイルの文字コードと、HTML内のmetaタグの文字コード指定を一致させるように気をつけましょう。

また、最近では本文中で紹介した多言語コードunicodeの利用が一般的になってきています。多くのエディタでデフォルトで設定されているので、特別な理由がなければunicodeを使っておけば、問題は起こりにくいはずです。

文字化けが起こってしまった場合は、今回紹介した方法を試してみてください。また、文字化けが起きないように、文字コードの設定には気をつけてみてください。