HTMLの文字化け対策をたった1行のコードで解決! | WEBCAMP NAVI
【12月の受講枠も残りわずか】

HTMLの文字化け対策をたった1行のコードで解決!

HTMLの文字化けはたった1行で解決できる!

「HTMLで作ったページを開くと文字化けをしている」
「日本語だけがHTML上で文字化けしてしまう」
こんな風にお困りではないでしょうか?

HTMLにおける文字化けは、多くのプログラミング学習をしている方がつまずく部分でもありますが、たった一行をHTMLに追加するだけで文字化けを解決することができます。

今回「DMM WEBCAMP」では、文字化けの解決方法に関して以下のポイントを抑えて解説していきます。

  • 文字化けを解消する方法
  • 文字化けが起こる原因

プログラミング学習を始めたばかりの方でもわかりやすく解説していきます!

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

文字化けの詳しい原因は後ほど解説しますが、一言でいうとHTMLとブラウザで文字コードが異なっていると判断されると文字化けは起こります。
ここで理解できなくても、これからわかりやすく解説していくので安心してください。

文字化けを防ぐためには、以下のことが重要です。

  • ブラウザが文字コードを解釈できるように、HTML上で文字コードを指定
  • コンピュータ側が解釈できる文字コードを使う

早速、その文字化けの解決方法を2ステップでご紹介していきます。

ステップ❶ 文字コードを確認する

文字化けをしてしまったらまずは、文字化けしているHTMLファイルに使われている文字コードを確認します。

文字コードとは以下のように、<head>内に書かれている<meta>要素に記載されていることがあります。

HTML
<head>
 <title>sample</title>
 <meta ~>
</head>

上記のようにHTMLファイルの中に<meta>要素が書かれていない場合には、テキストエディタのデフォルトの文字コードが使用されています。
たとえば、Sublime Textはデフォルトでは文字コードが「UTF-8」になっているため、「Shift_JIS」や「EUC-JP」という「UTF-8」以外の日本語対応の文字コードを利用したい場合は、別途パッケージをインストールする必要があります。
このインストール方法はテキストエディタによって異なるため、ご利用のエディタに合わせて調べてみてください。

メモ

利用しているテキストエディタによって、デフォルトで設定されている文字コードは異なります。
HTMLで特に文字コードの指定がない場合(<meta>要素がない場合)このデフォルトの文字コードが使用されることになるので、文字化けしてしまった場合はエディタのデフォルト文字コードをチェックしましょう。

<meta>要素が設定されていなかった方は、次のステップ❷で文字コードを指定しましょう。

ステップ❷ 文字コードを指定する

結論的には、文字コード「UTF-8」を指定すると日本語であっても文字化けすることなく表示されます。
この「UTF-8」とは、最も多く使われている主流の文字コードです。

文字コードは<head>内で指定します。
HTMLの<head>内に文字コードを指定する<meta>要素を入れることで、ブラウザに利用している文字コードを伝達することができます。

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

charset=の後に、指定する文字コードを記述します。

HTMLに文字コードを明確に記載することで、ブラウザが正しくHTMLの文字コードを解釈してくれます。

また、charset= ~ はHTML5から使用されるようになった属性のため、HTML5より前は以下のように文字コードを記述をしていました。

HTML
<head>
 <title>sample</title>
 <metahttp-equiv="content-type" content="text/html; charset=UTF-8">
</head>

多くの方はHTML5を使用していると思うので、初めに紹介した<meta charset=”UTF-8″>を使用した書き方で問題ありません。


これで、HTMLファイルにおける文字化けが解消されたのではないでしょうか?
次に、なぜこの文字化けが起きてしまうのか、その理由を解説していきます。


----------------------------------------------------------------------------------------------------------------------------------

転職成功率98%の【DMM WEBCAMP】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

HTMLが文字化けする理由

「HTMLのファイルがなぜ文字化けしてしまうのか」
その理由を知るためには、コンピュータがどのようにデータを読み込むのかを理解することが重要です。

文字化けが起こる原因を説明する前に、コンピュータの仕組みと文字コードとの関係を説明していきます。

文字コードの存在

0と1だけを使った2進数

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

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

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

0〜9とA〜Fを使った16進数

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で表記した文字が正しく解釈されず文字化けとなってしまうのです。


----------------------------------------------------------------------------------------------------------------------------------

国内最大級のプログラミングスクール【DMM WEBCAMP】
手厚いキャリアサポートと高品質の学習カリキュラムで驚異の転職成功率98%!
あなたも、IT業界で輝くエンジニアになりませんか?
本気で人生を変えたい方は、ぜひ無料カウンセリングへ!

\参加者満足度99%
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

まとめ HTMLの文字化けの原因は文字コードを指定することで解決!

今回「DMM WEBCAMP」では、HTMLファイルの文字化けを解消する方法と、文字化けをしてしまう構造を解説してきました。

  • 文字化けを防ぐためには文字コードを指定する
  • ブラウザには使用している文字コードを正しく伝える

特に、「Shift_JIS」や「EUC-JP」といった日本語の文字コードを利用する場合は、HTMLファイルの文字コードと、HTML内のmetaタグの文字コード指定を一致させるように気をつけましょう。

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

他にも「DMM WEBCAMP」では、HTML学習に関する記事を公開しているので、ぜひ学習の参考にしてみてくださいね!

DMM WEBCAMPでは、自宅から質問ができる全てオンラインのプログラミング学習コースがあります!
最短1ヶ月間でプログラミングスキルを身につけることができるので、興味のある方はまず無料のオンラインカウンセリングへお申し込みください!

オンラインでプログラミング学習
DMM WEBCAMPの詳細をみる
教室利用も可能

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点