[M]WEBサイトが文字化け！？知っておくと焦らずに済む、文字化けした時の表示例・原因・対処法

こんにちは！みう(@miu0512)です。サイトを更新したり、ブログを更新したり、カスタマイズをした時に、日本語がおかしなことになってしまったことはありませんか？いわゆる「文字化け」ですが、文字化けにも種類があったり、簡単になおす方法があるのです。

きっと見たことある！　文字化けってどんなもの？

日本語のメインの文字コードは3種類（Shift_JIS・EUC-JP・UTF-8）

WEBサイトやメールが文字化けをする原因は、「文字コード」に大きく関係しています。日本語をコンピュータで読み取ることが出来る言葉に変換「エンコード」しなければいけないのですが、その指示を間違えると、以下のような表示になってしまいます。

表示例：UTF-8で作られたサイトを「Shift_JIS」で見ると・・・

漢字とか記号とかでとっても大変なことになっています。

表示例：UTF-8で作られたサイトを「EUC-JP」で見ると・・・

なんだか、夜露死苦みたいなことに・・・。「Web吟ゃ」とかｗ

表示例：UTF-8で作られたサイトをその他の文字コードで見ると・・・

もはや目も当てられません・・・！全部「？」になっちゃいました。

対処法！　文字化けしたらココをチェックしてみよう！

WEBサイトを作っている時や、ブログのカスタマイズをしている時に、何故か文字化けしてしまって直せない！という時には、まず以下を確認してみましょう。

まずは確認！とりあえず自分のブラウザのエンコード設定をいじってみる

上記はChromeの画面です。IEやFirefoxでもブラウザ上で設定できるので見てみましょう。ここで違う文字コードを設定して正しく表示されれば、その文字コードが正解です。あとは以下の対処法のどちらかで修正するだけ。

対処法１：ページのソースに書かれたメタ情報をいじってみる

[HTML]

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

まずはページのソースを表示しましょう。そしてこのメタ情報に注目！「charset」の内容が文字コードの情報になっているのですが、ここが指定されていない・もしくはブラウザとは違う文字コードを指定してしまっている場合は、直してみましょう。

ソースを表示するショートカット一覧

Firefox・Win/Chrome・・・「Ctrl + U」
Mac/Chrome・・・「Alt＋Command+U」で確認できました。
IEは動作確認していないのですが「Alt+V→C」のようです！
※おそらく環境によってもまたショートカットが変わると思います。

対処法２：保存した時のファイルのエンコード情報をいじってみる

テキストエディタによっては、勝手に「UTF-8」で保存されてしまうものや、保存の際に指定しないと「Shift_JIS」になってしまうものもあります。ちなみに「秀丸」では、保存時にエンコードを指定することができるので、どうしても解消できない場合はこちらも利用してみることをおすすめします。

それでも直らない場合はもっと奥深くに原因が・・・

上記対処法でも直らない場合は、例えばデータベース内の文字コードの問題や、その他のファイルの干渉によるものが多いです。「文字化けをしたら文字コードを直す」とおぼえておきましょう。

さいごに・・・

最近、自社更新を行うクライアントさんが多く、多くの質問が「文字がおかしくなった！なんとかして欲しい」というもの。決まって他の文字コードで保存していたり、ヘッダーをどこからかコピーして使ってみたり。文字化けして焦る前に、対処法を覚えておくと便利ですよ！

最後までお付き合いいだだきありがとうございます！

これからも、みう(@miu0512)を応援していただけたら嬉しいです！