HTMLで文字化けして、「あれ？なんでこんな変な文字になってるの？」って困ったこと、ありますよね。
せっかく作ったWebページがうまく表示されないと、見る人もがっかりしてしまいます。
そこで今回は、HTMLで使われる文字コードの種類とその正しい設定方法について分かりやすく解説します。
文字コードのしくみが分かれば、ページを正しく表示させたり、他の人と安心してファイルをやりとりしたりできるようになりますので、ぜひ最後まで参考にしてみてくださいね。
文字コードとは？HTMLにおける基本知識
文字コードの定義と役割
文字コードとは、文字をコンピューターで扱うために、文字と数字（バイナリ）の対応関係を定めたルールのことです。
私たちが「A」や「あ」といった文字を見たり書いたりできるのは、この文字コードがあるからです。
コンピューターは文字そのものを理解できないため、すべての文字を数値として処理します。
例えば、アルファベットの「A」はUTF-8という文字コードでは65として扱われます。
このルールがなければ、どの文字なのか分からず、文字化けの原因になります。
つまり、文字コードは人間が読む文字とコンピューターが理解する数値をつなぐ橋のような役割を持っています。
主な文字コードの種類
文字コードにはさまざまな種類があります。
ここでは、よく使われる主な文字コードについて簡単に紹介します。
- UTF-8：世界中の文字を表現できる。現在もっとも広く使われている
- Shift_JIS：日本語向け。古くから使われているが互換性の問題がある
- EUC-JP：Unix系のシステムでよく使われる。Shift_JISよりやや専門的
- ISO-2022-JP：メールなどで使われる。表示の安定性に優れるが古い
- UTF-16：多言語対応が必要な場合に使われる。HTMLではあまり一般的でない
どの文字コードを使うかによって、文字化けが起きるかどうかや、他のソフトとの互換性が大きく変わるため、適切な選択がとても重要です。
なぜ文字コードの設定が重要なのか
文字コードを正しく設定しないと、画面に意味不明な文字（文字化け）が表示されることがあります。
これは、ファイルに保存されたデータとブラウザが読み取る方法が一致していないことが原因です。
以下のような理由から、HTMLでは正しい文字コードの設定がとても大切です。
- 文字化けを防げる
- 他の人とファイルを共有しても安心
- 検索エンジンにも正しく情報が伝わる
- スマホやPC、異なるOS間で同じ表示ができる
- プログラムやシステムとの連携で不具合が起きにくくなる
特にHTMLでは、metaタグでの設定が基本となるので、これを忘れずに行うことが大切です。
文字化けの原因と文字コードの関係
文字化けが起きる原因の多くは、設定された文字コードと実際の文字コードが一致していないことです。
たとえば、UTF-8で保存したファイルをShift_JISとして開こうとすると、文字の解釈がバラバラになってしまい、読めない文字になります。
以下のような状況で文字化けは発生しやすくなります。
- HTMLファイルのmetaタグで文字コードが指定されていない
- ファイル保存時の文字コードとmetaタグの設定が異なる
- 外部CSSやJavaScriptファイルと文字コードが一致していない
- メールやAPIなど外部とのデータ送受信で文字コードの不一致がある
- 古いソフトウェアやブラウザが最新の文字コードに対応していない
赤文字や記号ばかりのページを見たことがある人は、これが文字コードのミスによるものである可能性が高いです。
HTMLで使用される主な文字コード
現在、HTMLで最も推奨されている文字コードはUTF-8です。
UTF-8は多言語対応が可能で、世界中の文字を1つのルールで扱える点が大きなメリットです。
HTML5では標準としてUTF-8が推奨されており、新しく作るサイトは基本的にこれを使います。
以下に、HTMLで使われる代表的な文字コードを整理します。
- UTF-8：HTMLの標準。迷ったらこれでOK
- Shift_JIS：古い日本語サイトやWindowsの一部で使用
- EUC-JP：主にLinuxサーバー環境などで使用されることがある
特に初心者や初めてHTMLを書く人は、<meta charset="UTF-8">という書き方を覚えておくと良いでしょう。
HTMLと他の言語やファイル形式との違い
HTMLはWebページを作るためのマークアップ言語であり、見た目や構造を定義することが主な目的です。
そのため、文字コードはページが正しく表示されるかどうかに直結します。
他のファイル形式やプログラミング言語とは、文字コードの扱い方にいくつか違いがあります。
- HTMLはmetaタグで文字コードを明示的に設定する
- プログラミング言語はソースコードの冒頭や設定ファイルで指定する
- テキストファイルはエディタの保存形式に依存する
- WordやExcelは内部的に独自の形式で文字コードを扱う
特にWeb開発においては、HTMLとサーバー側プログラム、データベースの文字コードを統一することがとても大切です。
HTMLでの文字コードの設定方法
<meta charset>タグの基本と書き方
HTMLで文字コードを正しく指定するために最も使われるのが、<meta charset>タグです。
このタグを使うことで、ブラウザがページをどう読み取るかを伝えることができます。
書き方はとてもシンプルで、HTMLの<head>の中に次のように記述します。
<meta charset="UTF-8">
このように書くことで、ページ全体がUTF-8という文字コードで作られているとブラウザに伝えることができます。
ポイントは、必ずHTMLの最初のほうに書くことです。
これがないと、文字化けが起こる可能性が高くなります。
DOCTYPE宣言との関係
HTMLを正しく表示させるためには、文字コードの指定だけでなく、DOCTYPE宣言との組み合わせも重要です。
DOCTYPEは「このHTMLはどのバージョンのルールで書かれているか」をブラウザに伝えるものです。
以下は、HTML5で一般的なDOCTYPEと文字コードの組み合わせです。
<!DOCTYPE html>と書いてから<meta charset="UTF-8">をすぐ下に書く
この順番を守ることで、ブラウザが迷わず正しくページを表示できるようになります。
DOCTYPEがない場合、古い表示モードになることもあるので注意が必要です。
HTMLファイル保存時の注意点
文字コードはHTMLに書くだけでなく、ファイルとして保存する時の形式も一致している必要があります。
ブラウザはmetaタグを参考にしますが、ファイルそのものが違う形式で保存されていたら意味がありません。
正しく保存するには、次のようなポイントを押さえてください。
- 文字コードを「UTF-8」で保存する
- 「BOMなし」のUTF-8を選べる場合はそれを選ぶ
- 保存する時に拡張子が
.htmlになっていることを確認する
このように保存形式にも気をつけることで、文字化けを完全に防ぐことができます。
エディタ別の文字コード設定方法
HTMLを書くときに使うエディタによって、文字コードの設定方法は少しずつ違います。
エディタが間違った文字コードで保存すると、どれだけmetaタグが正しくても意味がありません。
以下に、よく使われるエディタの設定場所をまとめます。
- Visual Studio Code：右下の「UTF-8」をクリックして変更
- Sublime Text：「File」→「Save with Encoding」で選択
- Atom：設定画面から文字コードのデフォルトを変更可能
- メモ帳：保存時の「文字コード」欄でUTF-8を選ぶ
- Dreamweaver：環境設定でドキュメントのデフォルト文字コードを指定
それぞれのソフトで正しい設定をすれば、安心してHTMLファイルを作ることができます。
サーバーでの文字コード指定方法
HTMLだけでなく、サーバー側でも文字コードを指定しておくことが重要です。
サーバーから返すHTTPレスポンスに文字コードが含まれていないと、ブラウザが自動で判断して誤認識することがあります。
正しく設定する方法として、以下のような手段があります。
- Apacheの場合：
.htaccessにAddDefaultCharset UTF-8と書く - Nginxの場合：
charset utf-8;を設定ファイルに追加する - PHPなどで出力する場合：
header("Content-Type: text/html; charset=UTF-8");を使う
サーバーで文字コードを指定すれば、HTMLと一緒に正しい情報が伝わりやすくなり、文字化けのリスクもぐっと減ります。
既存HTMLの文字コードを確認・変更する方法
すでにあるHTMLファイルの文字コードが何になっているかを確認したいときは、いくつかの方法があります。
まず確認方法としては、以下の方法が一般的です。
- ブラウザでページを開いて「開発者ツール」からNetworkタブをチェック
- エディタで開いて「エンコーディング情報」を見る
- コマンドラインツール（Linuxなど）で
fileコマンドを使う
変更するには、エディタの「保存時のエンコード」を選び直すのが簡単です。
保存前にmetaタグの中もUTF-8に変更しておくことが重要です。
設定ミスによるエラー事例と対策
文字コードの設定を間違えると、見た目の崩れだけでなく、検索順位の低下やユーザー離脱にもつながります。
よくあるエラーとその対策を以下にまとめます。
- metaタグと保存形式が違う → 同じUTF-8に統一
- metaタグが
</head>より後にある → 先頭に移動 - 外部ファイル（CSS, JS）が異なる文字コード → すべてUTF-8に変更
- メールフォームや入力画面で文字化け → 送信先と受信先の文字コードを確認
これらの対策を事前にしておくことで、予期せぬエラーを未然に防ぐことができます。
トラブルを防ぐための文字コード対策
文字化けを防ぐチェックポイント
文字コードのトラブルで一番よくあるのが「文字化け」です。
これは、正しい文字が画面に出ずに、記号や変な文字が表示されてしまう現象です。
見ている人にとって非常に読みづらくなり、信頼性も下がってしまいます。
文字化けを防ぐには、事前にいくつかのポイントを確認しておくことが大切です。
以下のようなチェックポイントを意識しましょう。
- HTML内の
<meta charset="UTF-8">を確認 - HTMLファイル自体がUTF-8で保存されているか
- エディタでの保存形式をUTF-8に設定
- 外部ファイル（CSS・JS）も文字コードを統一
- サーバーからのレスポンスで文字コードが送信されているか
これらをすべて確認することで、意図しない文字化けを未然に防ぐことができます。
外部ファイルとの文字コードの統一
HTMLだけでなく、CSSファイルやJavaScriptファイルなどの外部ファイルとの文字コードが一致していないと、思わぬ不具合が起きることがあります。
特に、日本語のコメントや文字列を外部ファイル内で使用している場合には注意が必要です。
文字コードを統一するためには、次のような対策を取りましょう。
- すべてのファイルをUTF-8で保存する
- エディタの設定でデフォルト文字コードをUTF-8にする
- 外部ファイル内の日本語を最小限にする
- サーバー設定で全ファイルの文字コードをUTF-8に統一
統一することで、HTMLと連携するすべてのファイルが正しく動作するようになります。
フォーム送信時の文字コード処理
お問い合わせフォームやコメントフォームなど、ユーザーが入力する仕組みをHTMLに設置する場合、フォーム送信時の文字コード処理も重要です。
送られるデータとサーバー側の処理文字コードが一致しないと、データが文字化けしてしまいます。
以下のポイントに気をつけてフォームを設計しましょう。
<form>タグ内でaccept-charset="UTF-8"を指定- HTMLのmetaタグで
charset="UTF-8"を使用 - サーバー側（PHPなど）でも
UTF-8で処理 - データベースの文字コードも
utf8mb4などUTF系に統一
こうした対策をしておくことで、ユーザーが送った大事なデータが壊れるのを防ぐことができます。
CMS利用時の注意点
WordPressなどのCMSを使っている場合、文字コードの設定は少し複雑になります。
CMSはたくさんのテンプレートファイルやプラグインを読み込むため、それぞれの文字コードが合っていないと不具合が出る可能性があります。
CMSでの注意点としては、以下のようなものがあります。
- テーマファイルもUTF-8で保存する
- インストール時にデータベースの文字コードを確認する
- プラグインが古い文字コードを使っていないかチェックする
- functions.phpなどで
header()を使うときはUTF-8指定
CMSは便利ですが、裏側でも文字コードが統一されているかを必ず確認することが大切です。
マルチデバイス対応と文字コード
スマートフォン、タブレット、パソコンなど、さまざまな端末でWebサイトを見る時代には、どの端末でも正しく文字が表示されるようにすることが重要です。
文字コードが適切でないと、一部の端末で文字が見えなくなることもあります。
マルチデバイス対応のためには、次のような取り組みが必要です。
- 全ファイルをUTF-8で統一
- レスポンシブ対応のHTMLとCSSを使う
- 古いブラウザやOSでも表示確認を行う
- 日本語だけでなく英語や他言語も表示テストする
これにより、どんな端末でもユーザーにとって読みやすいページを提供することができます。
国際化対応における文字コード戦略
海外向けにWebサイトを展開する際には、文字コードの選定が特に重要になります。
言語が異なるだけでなく、使用する文字もまったく違うため、世界中の文字を正しく表示できるようにする必要があります。
そのための戦略としては、以下のような対応が求められます。
- 常にUTF-8を使用する（多言語対応に最適）
- 各国語ページもすべてUTF-8で保存
- Google翻訳などのツールでテスト表示を確認
- 右から左に読む言語（アラビア語など）にも対応できる設計
こうした準備を整えることで、国際的なユーザーにも正しく情報を届けることができます。
文字コードを統一するベストプラクティス
文字コードを統一することは、Webサイトの品質を守るうえで欠かせません。
あらゆるトラブルを避けるためには、日頃から意識的に取り組む必要があります。
以下に、文字コード統一のためのベストプラクティスをまとめます。
- すべてのHTMLファイルに
<meta charset="UTF-8">を記述 - エディタの保存設定をUTF-8に固定
- 外部ファイルもすべてUTF-8で統一
- サーバーやCMSもUTF-8で設定
- チーム全体でUTF-8を使用するルールを共有
このように、一貫した文字コードの管理は、Webサイトの安定性と信頼性を大きく向上させます。
まとめ
これまで、HTMLで使われる文字コードについての基本から設定方法、トラブル対策までをくわしく見てきました。
最後に、特に大切なポイントをもう一度整理しましょう。
- HTMLではUTF-8が基本
- <meta charset=”UTF-8″>をhead内に書く
- HTMLファイルもUTF-8で保存する
- 外部ファイルやフォーム送信もUTF-8に統一
- CMSやサーバーの設定もUTF-8でそろえる
これらを守るだけで、文字化けなどのトラブルをしっかり防げます。
あなたのサイトが正しく見えるように、今日から文字コードの設定を見直してみましょう。
