「HTMLファイルを開いたら文字が化けた」「<や&を書いたら消えた」「コードを書いたのに画面に出ない」など、HTMLで文字が表示されない問題にはいくつかのパターンがあります。
原因によって対処法がまったく異なるため、まず症状がどのケースに当てはまるかを確認しましょう。
パターン1：文字化けが発生している（文字コードの不一致）
原因
HTMLファイルの文字コードと、ブラウザが解釈した文字コードが一致していない場合に文字化けが発生します。
たとえばファイルを「Shift_JIS」で保存したのに、<meta charset="UTF-8">と指定していると、ブラウザが誤った文字コードで解釈して文字化けします。
日本語に対応した主な文字コードは次の3種類です。
| 文字コード | 特徴 |
|---|---|
| UTF-8 | 現在のWebの標準。あらゆる言語に対応 |
| Shift_JIS | 日本語向け。一部の環境で使用される |
| EUC-JP | 主にUNIX系システムで使用されていた |
現在のWeb制作ではUTF-8が標準となっています。
対処法1：metaタグに文字コードを明記する
<head>タグの中に、以下のタグを追加します。
<meta charset="UTF-8">このタグは<head>内のできるだけ先頭（<title>より前）に置くのが正しい記述方法です。
対処法2：ファイルの保存形式をUTF-8に変更する
metaタグの指定だけでは解決しない場合、ファイル自体の文字コードが異なっている可能性があります。
Visual Studio Code（VSCode）であれば、画面右下に表示されている文字コード名をクリックして「UTF-8で保存」を選択できます。
メモ帳の場合は「名前を付けて保存」ダイアログの「文字コード」欄で「UTF-8」を選びます。
対処法3：ブラウザのキャッシュを削除して再読み込みする
ファイルを修正してもブラウザのキャッシュが残っていると、古い状態が表示されることがあります。
「Ctrl + Shift + R」（Macは「Command + Shift + R」）でキャッシュを無視した強制再読み込みを実行します。
パターン2：<や&などの記号が消える・欠ける（特殊文字の未エスケープ）
原因
HTMLでは<や>はタグの開始・終了を示す記号として解釈されます。
そのため、本文中に「<div>と書いてください」のようなコードを直接書くと、ブラウザがHTMLタグだと認識して画面に表示されません。
同様に&もHTMLの特殊表記の開始文字として扱われるため、そのまま書くと意図しない動作になります。
対処法：HTMLエンティティ（文字実体参照）を使う
表示したい文字をHTMLエンティティに置き換えることで解決できます。
| 表示したい文字 | HTMLエンティティ |
|---|---|
<（小なり） | < |
>（大なり） | > |
&（アンパサンド） | & |
"（ダブルクォート） | " |
（半角スペース連続） | |
たとえば本文中に<div>というコードを表示したい場合は、以下のように書きます。
<p><div>と書いてください</p>ブラウザはこれを「<div>と書いてください」と正しく表示します。
<自体をテキストとして表示したい場合
<を文字として表示したい場合は、先頭の&を&に置き換えます。
<!-- < と表示したい場合 -->
<p>&lt;</p>パターン3：コードを書いたのに画面に出ない（CSSによる非表示）
原因
CSSのdisplay: noneまたはvisibility: hiddenが適用されていると、HTMLに記述があっても画面に表示されません。
テンプレートやフレームワークを使っている場合、意図せず非表示設定が引き継がれることがあります。
2つのプロパティの違いは次のとおりです。
| プロパティ | 表示 | レイアウト上のスペース |
|---|---|---|
display: none | 非表示 | スペースも消える |
visibility: hidden | 非表示 | スペースは残る |
対処法：ブラウザの開発者ツールで確認する
- ページ上で右クリックし「検証」（または「Inspect」）を選びます
- 非表示になっている要素をクリックします
- 右側の「スタイル」パネルで
display: noneやvisibility: hiddenが適用されていないか確認します - 該当するCSSを修正または削除します
パターン4：拡張子が間違っていてコードがそのまま表示される
原因
HTMLファイルの拡張子が.htmlではなく.txtなどになっていると、ブラウザがHTMLとして解釈せず、コードがそのままテキストとして表示されます。
対処法
ファイル名を確認し、拡張子を.htmlまたは.htmに変更します。
Windowsの場合、拡張子が非表示になっていることがあるため、エクスプローラーの「表示」から「ファイル名拡張子」のチェックをオンにして確認します。
パターン5：フォントが対応していない文字を使っている
原因
CSSで指定したフォントが、表示しようとしている文字（特定の漢字・記号・絵文字など）に対応していない場合、文字が「□」（豆腐）や「?」で表示されたり、消えたりすることがあります。
対処法
CSSのフォント指定を見直し、日本語対応フォントをフォールバックとして指定します。
body {
font-family: "Noto Sans JP", "游ゴシック", YuGothic, sans-serif;
}Google Fontsなどのウェブフォントサービスを利用する方法も有効です。
症状から原因を探す早見表
| 症状 | 疑われる原因 | 確認箇所 |
|---|---|---|
| 全体が意味不明な文字列になる | 文字コードの不一致 | <meta charset>とファイルの保存形式 |
<や&を書くと消える・崩れる | 特殊文字の未エスケープ | HTMLエンティティへの置き換え |
| コードを書いたのに画面に出ない | CSSで非表示 | 開発者ツールのスタイル確認 |
| タグがそのままテキストで出る | 拡張子の誤り | ファイルの拡張子（.htmlか確認） |
| 一部の文字が□や?になる | フォントの未対応 | CSSのfont-family設定 |
まとめ
HTMLで文字が表示されない原因は「文字コードの不一致」「特殊文字の未エスケープ」「CSSによる非表示」「拡張子の誤り」「フォントの未対応」の5つが代表的です。
現在のWeb制作では文字コードはUTF-8に統一することが推奨されており、<meta charset="UTF-8">の記述と、ファイル保存時の文字コードをUTF-8に揃えておくだけで文字化けの大半を防げます。
それ以外の症状が出た場合は、ブラウザの開発者ツール（F12キー）を活用して原因を特定しましょう。
コメント