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



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

HTMLを使っていて、文字化けが起こったことはありませんか?HTMLを使ったことがある人なら、誰でも直面する問題の一つです。厄介な文字化けは、出来るだけ迅速に解消させたいところですよね。そのためには、パソコンの仕組みを知っておくことが重要です。今回は、HTMLの文字化けが起こる原因から解消方法までを詳しく解説していきます。

目次
  1. HTMLが文字化けする理由とは?
  2. 文字コードの存在
  3. 文字化けが起きる原因とは?
  4. HTMLの文字化けを解消する方法とは
  5. 文字コードを確認する
  6. 文字コードを指定する
  7. まとめ

image

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

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

文字コードの存在

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

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

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

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

2進数表記では、8文字で主要なアルファベット文字を表すことができます。(8文字=8bit=256通り)。

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

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

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

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

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

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

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

image

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

文字コードを確認する

まず、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

まとめ

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

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

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

image

Ayumi
この記事を書いた人
Ayumi
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp