文字化けは、本来の文字コードをブラウザ側が誤って読み込んでしまうと発生する現象です。
この記事を読んでくださっている方の中には、「せっかく頑張ってWEBページを作ったのに文字化けしてしまった」のような経験をしたことがある方がいるんじゃないでしょうか？
せっかく頑張って作ったのに、いざWEBで表示すると訳の分からない文字が並んでいたらショックですよね。
ただ、文字化けは防ぐことができます。
文字コードを理解し、防ぎ方が分かれば文字化けは全く怖くありません。
そこで今回は、文字コードとはなにか？文字化けを防ぐ具体的な方法について解説していきます。
文字コードとは
文字コードとは、文字それぞれに指定されている特定の番号の事です。
人間は、文字を見て認識することができるのですが、コンピュータはそうはいきません。
コンピュータが文字を認識するためには、文字一つ一つに割り振られている番号を認識することで、文字を読み込むことができます。
この、文字に割り振られている番号のことを文字コードと言います。
また、文字コードにはたくさんの種類があります。
理由としては、世界には多くの言語や文字が存在しているからです。
ASCII(アスキー)といって、アルファベットや数字、記号を表示することができる文字コードが存在します。
このASCIIは全てのコンピュータやスマートフォンで同じように認識することが可能で、ASCIIを使えばアルファベットや数字、記号は文字化けが起きません。
ただ、世界にはアルファベット以外にもたくさんの言語がありますよね。
日本語、韓国語、ロシア語、アラブ語など様々です。
ASCIIだけではそれらの言語を表示できないので、様々な言語を表示できるようにたくさんの文字コードが存在するんです。
日本では主に「UTF-8」「Shift-Jis」「EUS-JP」「ISO-2022-JP」といった、日本語対応の文字コードが多く使われています。
推奨されている文字コードUTF-8
UTF-8は、世界的に使用が推奨されている文字コードです。
特徴としては、どんな言語も表すことができる万能さがあります。
一般的には、Aという言語にはA専用の文字コードが存在していて、A以外の言語は表示できないことがほとんどです。
ただ、UTF-8を使っておけば、どんな言語でも対応しているので、文字化けが起こることなく正しく表示をすることができます。
また、どんな言語も正しく表示することができるので、一つのページに複数の言語を書き込むことも可能。
どんな文字でも文字化けの心配をすることなくWEBページの開発ができるので、UTF-8は世界的に使用を推奨されているんです。
文字化けの原因
文字化けは、本来の正しい文字コードをコンピュータ側が間違って認識することで起こってしまう現象です。
文字コードを指定し忘れたり、逆に間違った文字コードを指定すると、開発者側とコンピュータ側で判断した文字コードが食い違ってしまい文字化けが発生してしまいます。
例えば、「文字化け」という言葉を文字コードのShift-Jisで表示させたいとします。
すると文字コードは、「149 182 142 154 137 187 130 175」となります。
ただこの時に、コンピュータが文字コードをUTF-8で解釈していたらどうでしょうか？
UTF-8の場合、「文字化け」の文字コードは、「230 150 135 229 173 151 229 140 150 227 129 145」となるので、Shift-Jisで表示されている文字コード「149 182 142 154 137 187 130 175」はUTF-8では「文字化け」という文字として認識されません。
「149 182 142 154 137 187 130 175」の文字コードはUTF-8で読み込まれると「譁�ｭ怜喧縺」のような訳の分からない文字になっていしまうので結果的に文字化けが起こってしまうということなんです。
また、文字化けの原因には環境依存文字が関係している場合もあります。
環境依存文字とは、特定のOSや機種でしか対応していない文字の事です。
例えば、Windowsでしか対応していない環境依存文字はMacでは表示することができません。
もちろん逆も同じで、Macの環境依存文字はWindowsではうまく表示することはできないんです。
このように環境依存文字は、対応していない機種では表示することができないので、結果的に文字化けが起こってしまう原因になります。
文字化けを防ぐ方法
文字化けは、しっかりと文字コードが指定されていれば起こることはありません。
さっき紹介したように、文字コードを指定し忘れたり間違った文字コードを指定すると、コンピュータが勝手に文字コードを決めてしまうので、結果的に文字化けが起きてしまいます。
そうならないように、開発段階でしっかりと文字コードは指定しましょう。
ここでは文字化けが起こらず、文字が正しく表示されるように各ファイルごとの文字コードを指定する方法について解説していきます。
HTMLファイルの指定方法
HTMLでは、metaタグを用いて文字コードを指定することができます。
まず、要素内にmetaタグを書き込みます。
次に、半角スペースを開けて「charset=」と入力。
「charset=」の次に使用したい文字コードを書き込めば文字コードの指定は完了です。
例としてUTF-8を使用する場合のコーディングを載せておきます。
<head>
<meta charset="UTF-8">
</head>また、UTF-8を指定して簡単な文字「ハローワールド」を表示させる場合、コーディングの全体は
<DOCTYPE! html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
</head>
<body>
<p>ハローワールド</p>
<body>
</html>このようになります。
CSSファイルの指定方法
CSSの場合はHTMLと違って、metaタグは使わずに文字コードを指定します。
また、CSSで文字コードを指定する場合は必ず、CSSの一番初めに文字コードを指定してください。
＠charset "UTF-8";
まとめ
ということで今回は、文字コードとは何か、文字化けを防ぐにはどうすればいいかについて解説してきました。
文字コードは、各文字に割り振られている特定の番号の事をいいます。
コンピュータは、人間のように文字をただ見るだけでは認識することができないので、文字コードを読み取り文字を認識、表示することが可能になるんです。
ただ、開発者側が使用したい文字コードとコンピュータ側が判断した文字コードが違っていると、文字化けが起こってしまいます。
多くの場合、文字コードを指定していなかったり、間違った文字コードを指定したことが原因でコンピュータが上手く文字コードを認識できず文字化けが起こります。
なので、文字化けを起こさないためには、しっかりと開発段階で文字コードを指定することが重要。
文字化けを発生させず、よりよいWEBページを作りましょう。
この記事が少しでも読んでくださった方の力になれたら幸いです。
最後まで見ていただきありがとうございました。
コメント