文字化けについて
文字化けの原因
原因は、日本語の「文字を表示する規格」が複数あることに由来しています。この「文字を表示する規格」のことを「文字コード」といいます。簡単に言うと、方言のようなものです。
通常は、端末側のコンピュータが「文字コード」を自動的に識別しながら画面を表示しますが、しかしまれに「文字コード」を正しく識別できない場合に、画面表示に混乱が起こり、文字化けとなるのです。
日本語の文字コード
代表的な日本語文字コードには、以下のような種類があります。
| 文字コード | 備考 |
|---|---|
| UTF-8 | 別名 Unicode とも。近年普及している世界統一規格の文字コード。 世界中の言語や絵文字などの特殊文字にも対応しています。 |
| Shift JIS | 別名 SJIS とも。古い Windows で主に利用されていました。 |
| EUC | 過去にUNIX系コンピュータで多く利用されていました。 |
| JIS | 電子メールで主に利用されています。 |
要するに、日本語を表示する規格が複数あるせいで、混乱が発生して文字化けするというわけですね。
文字化けを防ぐ
文字化けを防ぐには、端末コンピュータが文字コードを的確に識別できるようにする必要があります。そのために、HTMLに特別な記載を行います。
HTML の <head>～</head> の範囲内に、以下のような行を追記して使用している文字コードを明記してください。これで閲覧者の端末に正しい文字コードを伝えられるようになり、文字化けを未然に防げます。
<meta http-equiv="Content-Type" content="text/html;charset=文字コード">
「文字コード」の部分は、使用している文字コードに応じて適切に指定します。
現在使用している文字コードが何であるかを調べる方法は、次の使用中の文字コードを調べるで説明します。
具体的には、以下のように書きます。
UTF-8を使用している場合
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
Shift JISを使用している場合
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
EUCを使用している場合
<meta http-equiv="Content-Type" content="text/html;charset=EUC-JP">
具体例
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>山田太郎のページ</title> </head> <body> <h1>はじめに</h1> こんにちは、山田です。<br> ： 以下省略 ： </body> </html>
HTML上部の<head>～</head> の範囲内に<meta ～>の記述があることが確認できます。
最近の書き方
なお、最近のHTML規格である「HTML5」では、より短い書き方も有効です。charset属性を使って以下のように表記できます。（もちろん従来の書き方でも機能します）
従来の書き方
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
新しい書き方
<meta charset="UTF-8">
最近のブラウザであればこの新しい書き方に対応しているので、古い機種への対応が必要ないのであれば、この書き方で問題ないでしょう。
使用中の文字コードを調べる
現在使われている文字コードが何か、分からないかも知れません。
その場合はサクラエディタのような、文字コードの処理が得意なテキストエディタアプリで問題の書類を開くと分かります。
こういったアプリでは、おおむねウィンドウの右下部分に使用している文字コードが表示されます。 この右下の表示を確認して、実際に使用されている文字コードを確認できます。
UTF-8 を使用している場合
※右下部に「UTF-8」と表示されています。
Shift JIS を使用している場合
※右下部に「SJIS」と表示されています。
文字化けが起きてしまう例
実際に使用している文字コードと、<meta>に記載した文字コードが異なっていると、確実に文字化けを引き起こしてしまいます！
<meta>の表記は、実際に使用している文字コードに合ったものを選びましょう。
良くない例
上のような場合、<meta>で宣言している文字コードと、実際に使用している文字コードが食い違っているので、ページを表示した時に確実に文字化けが発生します。
この問題を解決するには、文字コードの食い違いを解消しましょう。
上の例では、実際に使用している文字コードが Shift-JIS なので <meta>も以下のようにShift-JIS仕様に書き直せば文字化けが発生しなくなります。
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
あるいは
<meta charset="Shift_JIS">
もう一つの解決方法としては、実際に使用している文字コードのほうを、<meta>で設定されている文字コードに合わせて変換してしまう方法です。どうやって変換するかは次の項目で解説します。
文字コードを変更する
もし文字コードが異なっているなどして、別の文字コードに変えたくなった場合は、サクラエディタで「名前を付けて保存」を行います。（Bracketsには文字コードの変換機能は無いようです）
その際に「文字コードセット」欄で文字コードを変更できるので、希望するものを選択して保存します。 保存されたファイルは、指定した「文字コード」に変換されて保存されます。
例えばShift-JISを使用したい場合は「SJIS」を選択、UTF-8 を使用したい場合は「Unicode」を選択すると良いでしょう。
どの文字コードを選ぶべきか
どの文字コードを選ぶべきか迷う場合、最近の環境であれば、とりあえずUTF-8を選択しておけば無難です。
UTF-8はカバーできる文字の範囲が最も広く、日本語以外の言語も含めて再現性が高いです。
一方、古い規格であるShift-JISやEUC、JIS等を使用すると、一部の文字が正しく表示できない場合があります。問題が発生するのは、俗に言う「機種依存文字」と呼ばれるもので、ローマ数字（ⅠⅡⅢⅣ）、アルファベットの一部（ÄÖÏéæ）、半角カナ文字（ｱｶｻﾀﾅ）、省略文字（㈱ ㈹ ℡①②③）、絵文字（😁😆）といったものは、Shift-JIS等の文字コードで表示することができなかったり、他の文字に化けたりする問題があります。
しかし、一部特殊なケースでは、Shift-JISなどが選ばれる場合もあります。たとえば古い携帯端末のような機種でもページを閲覧できるようにしたい場合や、Shift-JISにしか対応していない場合があるので、過去の互換性のためにあえてShift-JISが選ばれるといったケースです。
つまり、とりあえずUTF-8を選択しておけば無難で、一部の特殊な場合にShift-JISなどを使う場合があるということです。
他人のページ上の文字化け
開発中のページや未熟な編集者が作成したページを閲覧していると、文字化けに遭遇する場合があります。その場合、せっかく何かが書いてあるのに読みとれないという事態におちいります。
自分の所有するページであれば、<meta>に正しい文字コードを記載するよう修正すれば文字化けを未然に防げますが、他人のページは直接修正することはできません。
その場合は、ブラウザ側で、正しい文字コードをそのつど指定すれば文字化けに対処できます。
Internet Explorerの場合
- ページ上で「右クリック」→「エンコード」で開くメニューで正しい文字コードを選択する。
多くの場合は「日本語（シフトJIS）」もしくは「Unicode（UTF-8）」を選択すれば文字化けは治るはずです。（どの文字コードが正しいかは、勘で選ぶしかありません。たいていShift-JISかUTF-8のはずです……多分）
なお根本的に修正するには、ページの製作者の方に、<meta>に正しい文字コード宣言をするよう依頼する必要があるでしょう。みなさんがページを作成する際は、このような問題を起こさないよう、正しい <meta>を記載するようにしましょう。
参考
2017年4月15日現在、Microsoft Edge ブラウザや Google Chrome ブラウザでは、ブラウザ側で文字コード設定を変更する機能が標準で搭載されていないようです。
しかし Google Chrome ブラウザであれば、「テキストエンコーディング」などの拡張機能をインストールすれば文字コード設定機能を追加できます。
