ホームページを作っていたら文字化けしている！

初めてのホームページ制作でありがちなトラブルです。

ホームページで文字化けする原因とその対策についてお伝えします。

ホームページで文字化けする原因

ホームページに書かれている文章は、htmlファイルに書いて、そのhtmlファイルをブラウザで読み込んでホームページとして表示されます。

ところがhtmlファイルの文字コードをブラウザ側で別の文字コードだと解釈して読み込むとその結果として文字化けとなってしまうのです。

文字コードとは？

文字コードは文字ひとつづつについて割り当てられたコンピュータが解釈できるコード（数値やアルファベットの組み合わせなど）のことです。

そしてこの文字コードというのは１つではなくOSの種類毎などで違うものが使われています。

• ・WindowsOS・・・Shift-JIS（シフト・ジス）
• ・MacOS・・・UTF-8（ユー・ティー・エフ・エイト）など

文字化けする例

WindowsでメジャーなテキストエディタにTerapadというフリーソフトがあります。

このTerapadでhtmlファイルを作り

メタタグで文字コードを<meta charset="utf-8"/>と記述する

とブラウザでは文字化けしてしまいます。

①のhtmlファイルを保存したときの文字コードがShift-JISなのに、文字コードを<meta charset="utf-8"/>と誤った記述をしているからです。

※Terapadで作成するファイルは初期設定のままだと文字コードはShift-JISです。保存時のオプションでUTF-8など他の文字コードで保存することができます。

文字化け防止の対策

文字コードはUTF-8で作成する

現在のホームページの文字コードの主流は「UTF-8」です。ホームページに関連する様々なウェブサービスも文字コードはUTF-8で書かれています。

そのため第一にhtmlファイル、CSSスタイルシートなどホームページのファイルの文字コードはUTF-8で作成されることをおすすめします。

UTF-8が使えるソフトで

もう一つが、htmlファイルを作成するときのエディタソフト（テキストエディタやオーサリングソフト）でどの文字コードで保存しているのか確認されることです。

ホームページ制作専用のソフトであるオーサリングソフトであれば文字コードを選択することができると思います。TerapadといったフリーソフトでもUTF-8で作成することができるものが他にもあります。

参考になれば幸いです。