Webサイトと文字コードと文字化けの関係

レンタルサーバーで提供されている自動WordPressインストール機能でWebサイトを作成した場合はあまり問題にならないが、自分でhtmlを打ち込んでサイト作成をしていると文字コードについて最低限の知識を持っておく必要があります。

そこで今回は、Webサイトと文字コードの関係について簡単に解説してみます。

Webサイトと文字コード

日本のほとんどのWebサイトは、文字コードとしてUTF-8かシフトJISが使用されています。

まずは文字コートは何かということと、なぜ種類があるのかということについてお伝えします。

文字コードとは

コンピューターは、内部に文字とその文字の番号の対応表を持っています。

文字と文字の番号の対応表

上の図のように「1」という文字に○○番、「A」という文字に○○番、「あ」という文字に○○番と番号が振られているのです。

この対応表は「符号化文字集合」と呼ばれていて、広い意味で文字コードと呼ばれることがあります。

そして、文字をファイルに保存するときは、この番号が使用されます。

例えば「あいうえお」と保存したいなら、対応表に従ってファイル内に次のように書きだします。

1001 1002 1003 1004 1005

書き出したものがコンピューターが読み取られると、再度対応表に従って文字として認識されるのです。

1001 1002 1003 1004 1005 → あいうえお

ただし、書き出すためには「一文字を何バイトにするのか？」「できるだけ容量を少なくできないか？」などを取り決める必要があります。
また書き出したものを読み込むときは、取り決めに従って元の番号に復元する必要があります。

この取り決めは「符号化形式」と呼ばれていて、Web関連では、こちらが文字コードと呼ばれることが多いです。

文字コードは複数ある

「符号化文字集合」は、最初に英語で使用するアルファベットや数字に対して作成されました。
その後日本でコンピューターを使用するために、日本語に対応した「符号化文字集合」が作成されました。
その後日本語を含めた全世界の文字に対応した「符号化文字集合」が作成されました。

コンピューター内では複数の「符号化文字集合」が同居しています。
古い「符号化文字集合」をコンピューター上から排除してしまえばよいのですが、既に広く普及しているため今後も使用していく必要があります。

複数の符号化文字集合

新しい「符号化文字集合」は一から作成されることが多いため、上の図でいえば「あ」など同じ文字を含んでいることがあります。
ただし番号が異なり、同じ番号でも符号化文字集合ごとに別の文字が割り当てられている可能性があります。
そのため、文字をファイルに書き出す場合、番号が重なる可能性がある「符号化文字集合」を一緒にすることはできません。

その結果「符号化文字集合」ごとに、「符号化形式」が定義されることになります。

このように定義されたのが「UTF-8」や「シフトJIS」です。

実際はもっと複雑ですが、Webサイト作成ではこの程度の認識で問題ありません。
もう少し詳しく知りたい方は、次の記事をみてください。

UTF-8・16やShift-JISって何？文字コードについて説明してみる
公開日:2020/12/09 更新日:2020/12/11

Webサイトが文字化けする理由

時々、次のように文字化けしているWebサイトがあります。

文字化けした文字

これはhtmlデータの読み込むとき、保存時の「符号化形式」と異なる「符号化形式」で復元したのが原因です。

例えば「シフトJIS」で保存されているhtmlデータを、「UTF-8」で復元したとします。
「シフトJIS」と「UTF-8」では、「一文字のバイト数」や「できるだけ容量を少なくする方法」などが異なります。
そのため「シフトJIS」で保存したら「シフトJIS」で、「UTF-8」で保存したら「UTF-8」で復元しないと元の番号を取り出すことができません。

「シフトJIS」を「UTF-8」で復元すると、文字の数が変わったり、元の文字と全く異なる番号を取り出す可能性が非常に高くなります。
その結果、文字化けしてしまうのです。

ちなみに「�」は、「符号化文字集合」に定義されていないため不明な番号を指定されたことをあらわしています。

Webサイトが文字コードを認識する仕組み

ではなぜ、「シフトJIS」を「UTF-8」で復元するような間違いがおこってしまうのでしょうか。

それはWebサイトが文字コードを認識する仕組みの概要を知ることで、理解できます。

応答ヘッダーで判断

まず最初にブラウザが、サーバーにhtmlデータを送ってくるように要求します。
それに対してサーバーは、「応答ヘッダー」というものを返します。

この「応答ヘッダー」の中に、「今から送るhtmlデータの符号化形式は○○です」という情報が含まれていることがあります。
含まれている場合は、後から送られてくるhtmlデータをその形式で復元します。

このときhtmlデータの実際の符号化形式と、応答ヘッダーで指定している形式が異なると文字化けします。

WordPressは「応答ヘッダー」の中で「UTF-8」を指定しています。
作成した記事も「UTF-8」で保存されるため、文字化けすることなくWebページが表示されます。

自作htmlは、「応答ヘッダー」で符号化形式を指定している場合、それに合わせる必要があります。
ただし、レンタルサーバーの場合は符号化形式を指定していないことが多いので、あまり気にする必要はありません。
気になる場合は、この記事の応答ヘッダーの確認方法を参考にしてください。

meta要素で判断

「応答ヘッダー」で符号化形式を指定されていない場合、受け取ったhtmlデータのmeta要素で判断します。

符号化形式を指定するmeta要素は、http-equivとcontent属性を使用します。

または、次のようにcharset属性を使用します。

この内容をブラウザが読み取って、日本語部分を適切に復元してくれます。
このときhtmlデータの実際の符号化形式と、meta要素で指定している形式が異なると文字化けします。

なおmeta要素などのタグは、半角のアルファベットや数字で構成されます。
これらの番号は多くの符号化形式で共通のため、符号化形式に関係なくブラウザで読み取ることができます。

自動で判断

応答ヘッダーまたはmeta要素で符号化形式を判断できないときは、htmlデータの内容を精査して自動で判断します。

しかし、符号化形式は一部を除いて自動で判断されることを考慮していません。
そのため判断を間違えることもあります。
判断を間違えた場合、文字化けします。

応答ヘッダーの確認方法

応答ヘッダーは、ブラウザで確認することができます。

Firefoxの場合

ブラウザ上でメニューを開き、要素を調査を選択します。
表示された開発ツールでネットワークタブを選択します。
Webサイトを再表示すると、読み込んだファイルがリストされます
Webページ（通常は一番最初にリストされる）をクリックすると、ヘッダーが表示されます

このとき、応答ヘッダー欄のcontent-typeのcharsetが、符号化形式です。

Google Chromeの場合

ブラウザ上でメニューを開き、検証を選択します。
表示されたDevToolsでNetworkタブを選択します。
Webサイトを再表示すると、読み込んだファイルがリストされます
Webページ（通常は一番最初にリストされる）をクリックすると、ヘッダーが表示されます

このとき、Response Headers欄のcontent-typeのcharsetが、符号化形式です。

meta要素の確認方法

htmlデータのmeta要素は、ブラウザで確認できます。

Firefoxの場合

ブラウザ上でメニューを開き、要素を調査を選択します。
表示された開発ツールでインスペクタータブを選択します。
検索欄に「meta」と入力してリターンを押すと、metaタグが検索されます。

目的のタグではない場合、リターンを押して次のmetaタグを検索してください。

Google Chromeの場合

ブラウザ上でメニューを開き、検証を選択します。
検索欄が表示されていない場合、右上の「・・・」でメニューを表示して、searchを選択します。
検索欄に「meta」と入力してリターンを押します。

このとき外部JavaScriptなども検索されます。
結果をスクロールして、目的のデータを探してください。