Webサイトの制作、運用に関わっている方のほとんどが「文字化け」に遭遇したことがあるのではないでしょうか。「文字化け」については、発生する原因と対応方法をしっかりと把握しておくことで、落ち着いて対応することができます。当記事では、文字化けが発生する理由や、回避のためのチェックポイントをご紹介します。

文字化けが発生する理由

回避策だけを知るよりも、根本的なところから知っておく方がより理解できるはずです。まずは、なぜ文字化けが発生するのか、その基本&理由をざっくりと説明していきます。

文字コードの存在

日本で扱われているテキストのほとんどがASCII互換の文字コード(※1)、Shift_JIS, EUC-JP, UTF-8などという文字コードがよく使われています。PC上で文字を表現しているかというと、コンピュータで理解できる情報(バイト表現)を、人間が理解できる文字と対応させることで表しています。このバイト表現が文字コードであり、Shift_JIS文字コードでは、[ 82A0 ]が[ あ ]として表示されます。

文字コード(※1)
文字集合を定義し、その集合の各文字に対応するビット組み合わせを一意に定めたものを文字コードという。文字コード – wikipedia

Shift_JISで[ 82A0 ]を用いて表示される[ あ ]という文字は、EUC-JPなら[ A4A2 ]、UTF-8なら[ E38182 ]、UTF-16なら[ 3042 ]、JISなら、[ 2422 ]でそれぞれ表示させることができます。

文字化けは文字コードの解釈違いが原因

文字化けが発生する原因は、「HTMLファイル自体の文字コードと、ブラウザが解釈した文字コードが異なるとき」に発生します。例えば、Shift_JISで保存されたHTMLファイルを、ブラウザがUTF-8だと認識して、UTF-8で表示してしまうと文字化けが発生するということです。

通常Webブラウザは、サーバーへリクエストを送った後、サーバからHTMLを受け取り、レスポンスヘッダやHTMLを分析した上で、「文字コードはこれだろう」と解釈して、ページを表示します。正しくWebページが作られていれば、たいていはWebブラウザが正しく解釈してくれるので、文字化けが発生しません。しかし、制作する時に文字コードを指定することを忘れていた場合や、異なった文字コードを設定していた場合、Webブラウザによって誤って解釈される(または解釈させてしまう)ことがあるのです。

文字化け対策として気を付けなければならないことは、「正しく文字コードを指定し、正しくWebブラウザに文字コードを解釈してもらう」ということです。ここではこれ以上の説明は省略させていただきますが、もっと詳細の知識を学びたい方は知識を深めていくと面白い分野かもしれません。

現在の文字コード選択はUTF-8一択

様々な文法チェッカーではUTF-8でない文書に対して警告を出していることもあったり、オーサリングツール(※2)も UTF-8 をデフォルトとする事を求めている背景がありますので、UTF-8に設定してそれで文字化けしないように確認をする。ということでよいでしょう。UTF-8を選択することでどの国の文字も表示することが可能です。あとはブラウザに実装されているフォントを指定している限り、大きな問題が起こることはないでしょう。

オーサリングツール(※2)
オーサリングツールとは、デジタルコンテンツやマルチメディアデータなどを制作するために用いられるソフトウェアの総称。ウェブのオーサリングツールは、一般的に、HTMLの編集機能や、Webページのレイアウトを視覚的に調整できる機能、Webページのディレクトリ構造の管理、といった機能を提供する。主な製品の例としては「Adobe Dreamweaver」などがある。

UTF-8はBOMなしで保存でOK


BOM(Byte Order Mark)は、UTF-16, UTF-32でバイトの並び順を示すものですので本来UTF-8においては必要がない選択なのですが、UTF-8にBOMは本来関係ないが、「UTF-8」であることを示すマークとして使われています。

BOM付きUTF-8は、ファイルの先頭に3バイト(「EF BB BF」)が付与されるのですが、ファイルの先頭にBOMが付くことを想定していないソフトウェアの場合、予期しない結果がおこることがあります。ホームページなどのWebサイト、Webシステムで使用されるファイルの場合は、UTF-8はBOMなしで保存する。ということで統一して問題ないと思います。もしUTF-8のBOMありで保存していて不具合が出ていた場合はBOMなしに変更して保存をしなおしてみましょう。※UTF-8BOMなしは、エディタによっては「UTF-8N」と表記されていることもあります。

Unicode, UTF-8, UTF-16の違いメモ
Unicodeは「符号化文字集合」という規格のこと
UTF-8, UTF-16はUnicodeを実装した「符号化方式」
UTF-8は8bit単位でASCII互換
UTF-16は16bit単位で、非ASCII互換
WEBでの使用はUTF-8(BOMなし)でOK

文字コードの指定方法

WEBでよく使われるファイルへの文字コード記載方法に触れておきます。

HTMLファイルのmeta指定を行う。

HTMLファイル内で、文字コードを指定するタグを入れることで、ブラウザに利用の文字コードを伝達することができます。文字コードの指定は、metaタグで行います。metaタグは、要素の中に記述します。UTF-8を指定する場合は、下記の通りです。charset=の後に、指定する文字コードを記述します。この文字コードが、HTMLファイル自体の文字コードと同じになっていれば、ブラウザが正しくHTMLの文字コードを解釈してくれます。

  • <head>
  •   <meta charset="UTF-8">
  • </head>

注意点として、htaccessファイルなどを用いたHTTPヘッダーによる指定の方が文書内でのmeta指定よりも優先度が高いため、ページ製作者は既にHTTPヘッダーで文字エンコーディングが指定されているかどうかについて常に頭の中に入れておきましょう。meteタグの変更で反映されないとなると疑うポイントになります。

CSSファイル

  • @charset "UTF-8";

この規則はスタイルシートの最初の要素でなければならず、これより先に一切文字を記述してはいけません。

XMLファイル

  • <?xml version="1.0" encoding="UTF-8" ?>

その他、気にすべき文字コードについて

ダウンロードしたファイルが文字化けしていたというように。ホームページ内のコンテンツだけでなく、WEBを介してやりとりをする可能性があるファイルについても文字化けの可能性はついてまわります。

ファイル名を名付ける時

OSに依存する部分であるがファイル名はASCII(アスキーコード:半角英数字のみ)が望ましいでしょう。

ダウンロードファイルの文字コード(ファイル名だけでなくコンテンツ内も)

HTTPヘッダのContent-Dispositionに影響を受けてしまいますので、ファイル名と同じくASCII(アスキーコード:半角英数字のみ)が望ましいでしょう。

公開後のホームページで文字化けが発生している


前出の項目については抜かりなく確認しているのに文字化けしている。ということがあります。その原因はFTPソフトの設定にあることが多いようです。FTP転送時に改行コードを変更する指定にしてあることで発生しています。FTPで転送するときは「バイナリモード」に設定して転送することでこちらが原因の文字化けは対応可能です。
※それぞれのFTPソフトのマニュアルで変更方法についてはご確認ください。

まとめ

HTMLでの文字化けを防ぐためには、ブラウザに使用しているHTMLの文字コードを正しく伝えることが重要です。特に、旧来の運用ルールに影響を受けた「Shift_JIS」や「EUC-JP」といった日本語の文字コードを利用されている場合など、HTMLファイルの文字コードと、HTML内のmetaタグの文字コード指定を一致させるように気をつけましょう。

ファイル名なども含め、基本的には多言語コードunicodeの利用(半角英数字~unicodeに登録のある漢字)で統一することが好ましいと思います。多くのエディタでデフォルトで設定されているので、よほど特別な理由が無い限りunicodeを使っておけば、問題は起こりにくい…はずです。またどうしてもという場合を除いてASCII(アスキーコード:半角英数字のみ)で構成をしておく方が無難であるといえるでしょう。日本語で名付けられたファイルを取り扱うことがある場合は意識的に半角英数字に変更してサーバーへのアップを行うようにしましょう。トラブルの可能性は予め対応しておくことをおススメします。

文字化けが起こってしまった場合は、今回紹介した内容を思い出して、落ち着いて確認をしてみてください。複数人で管理をする社内案件などの場合はファイルの取り扱い、命名方法などから文字化けが起きないように、文字コードの設定にはルールを定めた運用を取り入れることも効果的だと思います。