ホームページに文字化けが起こる理由と対処法
2016年 09月 28日
ホームページを閲覧した時に、文字が■等の記号で埋め尽くされていたり、見た事のない漢字に変換されていて読めなくなっていた事はありませんか？
これは『文字化け』という現象で、ホームページの閲覧を妨げる現象です。
他の方のホームページで文字化けが起きている場合はブラウザの設定から文字化けを対処する事も出来るのですが、もし自分の運用しているホームページで文字化けが起きていれば閲覧者に迷惑をかけてしまいますよね。
そのような事の無いように、文字化けが起きる理由とその対処法を紹介しようと思います！
なぜ文字化けが起こるのか
パソコンは本来0と1しか扱えない
文字化けの直し方の前に、文字化けが根本的になぜ起こるのかを覚えておけば対処も簡単になります。
まずパソコンが扱う事が出来るデータは、実は0と1だけなのです。これを2進数と言いますね。
分かり易く例えればスイッチのようなもので、0の時はOFF、1の時はON、のように2つの命令しかありません。
0と1しか扱えないのであれば、これでは0と1以外の文字を出力できないですよね。
なぜ他の文字を扱えるのでしょうか？
文字コードというものがある
0と1だけで文字を表示されるために『文字コード』と呼ばれるものがあります。
文字コードとは0と1を羅列する事で文字を表現するもので、例えば『01000001』と入力する事で、アルファベットの『A』が出力されます。
このように0と1だけで様々なアルファベットや記号を表現しているのですね。
この文字コードを利用する事で、パソコンは様々な文字を表す事が出来ます。
そして0と1だけの2進数では数字の羅列が長くなってしまうので、0～9の数字とA~Fのアルファベットの合わせて16文字で表す事があります。
その場合は例えばある文字コードであれば、『82A0』で平仮名の『あ』を表現する事が出来ます。
0と1で長々羅列するよりも見やすくなりましたね。
文字コードの解釈の違いで文字化けが起こる
文字コードには種類がある
さて、文字コードの仕組みについて紹介をしましたが、実はこの文字コードにはいくつか種類があります。
Shift_JIS（シフトジフ）
Windows系のOSでよく使用されており、モバイルサイトではこの文字コードが主流。
EUC-JP（イーユーシージェイピー）
UNIX系のOSでよく使われる文字コード。私はあまり使った事はありません。
UTF-8（ユーティーエフハチ・ユーティーエフエイト）
最近のホームページ制作では主流。私も基本的にはこの文字コードを使っています。
現在主流になっているのはこの3つですね。
ホームページを作る時に、どの文字コードを利用して制作するかを決める事になります。
HTMLファイルとブラウザの解釈の違い
ホームページを制作するときはHTMLファイルを作りますが、このHTMLファイルを保存するときにどの文字コードを利用するか選ぶことが出来ます。
基本的には前述の3つの文字コードから選ぶ事になると思います。
しかし、この文字コードの設定が文字化けを引き起こす原因となります。
例えば文字コードは『Shift-JIS』を選択してHTMLファイルを保存したとします。
このHTMLファイルをブラウザで開けばホームページが閲覧できるのですが、ブラウザがHTMLファイルの文字コードを『UTF-8』と勘違いして開いてしまった場合、文字コードの参照する文字がずれ、文字化けが発生するのです。
簡単に説明すればHTMLファイルとブラウザで違う文字コードを使用していると文字化けになるという事ですね。
他の方のサイトで文字化けが起こった場合の対処法
自分の調べたい情報の為に開いたホームページが文字化けを起こしていれば、そのサイトを閲覧する事が出来ませんよね。
しかしこの文字化けは、ブラウザの設定を変更する事で解消する事が出来ます。
ほとんどのブラウザでは標準機能として、エンコードを備えています。
GoogleChromeで例を挙げてみますと、ブラウザ右上のボタンをクリックしてメニューを開いたら、『その他のツール』を選択し、その後『エンコード』を選択します。
するとどの文字コード、言語で表示するかが選択できます。
ここからHTMLファイルと合った文字コードを選択してあげれば、文字化けを解消する事が出来るのですね。
ではどの文字コードを選択すれば良いのかですが……、それは分かりません！
幸い日本語に関する選べる文字コードは4種類だけですので、順番に選んでみましょう。
まずはUTF-8にしてみる事をお勧めします。初期設定でUTF-8になっていなかった場合は、それだけで解消される可能性が高いと思います。
自分のサイトで文字化けが起こった場合の対処法
他の方のサイトで文字化けが起こった場合は、ひと手間あるとは言え設定を変更すれば閲覧が出来るので、まだそこまで問題ではありません。
しかし自分のホームページで文字化けが起こっていたらどうでしょうか。
閲覧者にいちいちブラウザの設定を変えて貰うのは面倒に思われますし、そのやり方を知らない人からすれば閲覧自体を止めてしまいます。
もし自分のホームページで文字化けが起こった場合は、HTMLファイルを確認する必要があります。
まずは自分のHTMLファイルの文字コードを設定しましょう。
HTMLをメモ帳やTerapadなどのテキストエディタで開いたら、『名前を付けて保存』を選択しましょう。
するとその画面で、ファイルの文字コードを選択する事が出来ます。今回はUTF-8にしましょう。
これでこのHTMLファイルはUTF-8で保存する事が出来ました！
次はブラウザに大して『このHTMLの文字コードはUTF-8である』と伝えてあげなければいけません。
折角UTF-8でファイルを作ったのに、ブラウザがShift-JISで読み込めば結局文字化けになってしまいますからね。
ブラウザにHTMLファイルの文字コードを伝えるには、HTMLのヘッダーにタグを書く必要があります。
HTMLの<head>から</head>の間に
このようなタグを書きます。
タグの後ろの方に『charset=UTF-8』という記述がありますね。
このタグが、ブラウザに対してこのHTMLファイルはUTF-8だぞ！と伝えてくれるのですね。
もし最初からこのようなタグが記述されていたならば、charasetの中身がちゃんとUTF-8になっているか確認しましょう。
HTMLファイルはUTF-8で保存したのに、このcharasetの中身がShift-JISなど違う文字コードになっていては食い違ってしまいますからね。
HTMLファイルの文字コードとcharasetの中の文字コードを揃える事が大切です。
これでアップロードをすれば、閲覧するときに文字化けしている事は無いはずです！
文字化けを引き起こさない為に
今回は文字化けが起こる原因と対処法を説明させて頂きました。
2進数だったり文字コードの種類だったり少し難しく感じるかもしれませんが、対処法としては難しく考える必要はなく、保存の時の設定やタグを忘れなければ文字化けを引き起こす事はありません。
予めどの文字コードで書くか決めておき、コーディングをする時も文字コードはなんであるか、頭の片隅に残しておくだけで文字化けのトラブルはグンと減るでしょう。
また、文字化けになった時も慌てずにファイルや設定を見直せば修正が出来ますので、冷静な対処を心掛けましょう！