日本人「こんにちは」
外国人「？？？？」
文字化けの原因
文字化けの原因は、ブラウザがその言葉を理解できない、間違えて解釈したことで起きます。
コンピュータ上で文字を扱うには、「文字コード」という文字の表現方法があり、ウェブサイトで使われている文字コードをもっていない、または間違えた文字コードをブラウザが使う、ことで起きてしまうのです。
文字コードってなに？
「文字コード」とは、数字しか扱えないコンピュータが文字を表現するのに使う方法です。
たとえば、英語用に使われているASCIIコードという文字コードで「A」表すには65(16進の場合41)を使って表します。
ひらがなや漢字を表すために日本語用にも文字コードがあり、「Shift_JIS」「EUC-JP」などの文字コードがあります。
また、多言語対応の文字コード「UTF-8」があり、ウェブサイトではこの文字コードを使うことが主流になってきています。
文字化けが起きる理由は？
文字化けが起きる理由は、ウェブサイトで使われている文字コードをブラウザ側が解釈できない(コンピュータ側がその文字コードを持っていない)や、
ウェブサイト側で文字コードが指定されていない、または間違えて指定していることで、ブラウザ側が間違えた文字コードを使って文字を解釈した場合に起こります。
つまり、「何を言っているのかさっぱりわかりません！」や「勘違いしていました！」的な状態になっているのです。
文字化け防止方法
さて、文字化けを防止する方法は、「ブラウザ側が間違えた文字コードを使っている」場合、ウェブサイト側で正しく文字コードを指定することで正しく表示されるようになります。
「コンピュータがウェブサイトで使われている文字コードを持っていない」というのは特殊な文字コードでない限り今となってはほとんどありません。
ウェブサイトの言葉と文字コード指定方法
まず、Webサイトの言葉がいったい何語で書かれているのかを指定します。
たとえば日本語を指定する場合は、htmlタグを以下のように記載します。
次にhead要素内でtitle要素前に文字コードを指定した次のような行を入れます(UTF-8の場合)。
ちなみに「lang="ja"」のように要素に追加情報を付け加えるような情報のことを「属性」といいます。
文字化け防止サンプルソースコード
前回記事のサンプルに手を加えて文字化けしないHTMLサンプルソースコードを記載します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>タイトル</title> </head> <body> こんにちは！ </body> </html>
このサンプルソースコードをメモ帳で保存するときには必ず文字コードを「UTF-8」にして保存してください。
文字化け防止サンプルファイル
サンプルソースコードのHTMLを文字コード「UTF-8」で保存し、HTMLファイルにしたものをサンプルファイルにしてみました。
http://sample.thinkreatesoft.net/html/garbled-text/index.html
また、ファイルの文字コードを「Shift_JIS」で保存し、head要素で<meta charset="UTF-8" />を指定してわざと文字化けさせたサンプルファイルを用意しました。
http://sample.thinkreatesoft.net/html/garbled-text/error.html
(Internet Explorer 11とGoogle chrome バージョン38で確認済)
次回記事は開発環境のインストール
ここまでメモ帳でも書けるレベルのHTML文章でしたので、メモ帳で書いてきましたが、大規模なHTML文章を書くにはメモ帳では不便です。
そこで、オープンソースで無料で使えるHTMLの開発環境「Aptana Studio」の紹介とインストールを行います。
以上、当サイト管理人のAsterismでした。