【完全保存版】HTMLが表示されない原因と解決方法まとめ｜初心者でも必ず直せるチェックリスト付き

HTMLを書いてブラウザで開いたのに、
「画面が真っ白」「何も表示されない」
という経験はありませんか？

HTMLを書いたのに表示されない
ファイルを開いても白い画面のまま
スマホや特定のブラウザだけ表示されない

この記事では、「html 表示されない」で検索した初心者の方に向けて、
HTMLが表示されない原因と、その解決方法を順番に解説します。

上から1つずつ確認すれば、
ほとんどのHTML表示トラブルは確実に解決できます。

HTMLが表示されないとはどういう状態か

HTMLが表示されないとは、
ブラウザでHTMLファイルを開いても、意図した内容が画面に出てこない状態です。

主に次のような症状があります。

画面が真っ白
一部だけ表示されない
テキストは出るがレイアウトが崩れている

原因は1つとは限らず、
基本的なミスが重なっているケースも多いのが特徴です。

まず最初に確認すべき最重要ポイント

HTMLが表示されないときは、
必ず次の順番で確認してください。

ファイルの開き方は正しいか
HTMLの基本構造があるか
タグの書き間違いがないか
文字コードの問題ではないか
CSSやJavaScriptが影響していないか

HTMLファイルの開き方が間違っている

意外と多いのが、
HTMLファイルを正しく開けていないケースです。

正しい開き方

ブラウザにドラッグ＆ドロップ
右クリック → ブラウザで開く

よくあるミス

エディタで開いただけ
.html ではなく .txt になっている

HTMLの基本構造が書かれていない

HTMLには、
最低限必要な基本構造があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テスト</title>
</head>
<body>
  <p>表示されるテキスト</p>
</body>
</html>

この構造がない、または壊れていると、
正しく表示されないことがあります。

body内に何も書いていない

<body>
</body>

この状態では、
当然何も表示されません。

表示したい内容は、
必ず <body> の中に書きましょう。

HTMLタグの閉じ忘れ・書き間違い

<p>テキスト
<div>内容</div>

タグの閉じ忘れや入れ子の崩れで、
それ以降の表示が壊れることがあります。

対策

開始タグと終了タグを必ずセットで書く
インデントを揃える

文字コードの問題で表示されない

日本語が表示されない場合は、
文字コードの設定を確認してください。

<meta charset="UTF-8">

また、
エディタ側も UTF-8で保存 されているか確認しましょう。

CSSの影響でHTMLが見えなくなっている

HTML自体は表示されていても、
CSSの指定で 見えなくなっている ことがあります。

body {
  display: none;
}

p {
  color: white;
  background: white;
}

この場合、
HTMLは存在していても画面には表示されません。

position指定による表示トラブル

.box {
  position: absolute;
  top: -1000px;
}

画面外に配置されてしまい、
見えなくなっているケースもあります。

JavaScriptのエラーが原因の場合

JavaScriptのエラーがあると、
HTMLの表示や動作に影響することがあります。

確認方法

ブラウザのデベロッパーツール
Consoleタブにエラーが出ていないか確認

画像や外部ファイルだけ表示されない

<img src="img/photo.jpg">

この場合は、
パス指定の間違いがよくある原因です。

チェックポイント

フォルダ構成は合っているか
大文字・小文字は一致しているか

スマホだけHTMLが表示されない場合

スマホ表示で問題がある場合は、
viewport設定を確認しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これがないと、
スマホで正しく表示されないことがあります。

キャッシュが原因のケース

HTMLやCSSが更新されているのに反映されない場合、
ブラウザキャッシュが原因のこともあります。

対処法

スーパーリロード（Ctrl + F5）
シークレットモードで確認

デベロッパーツールで確認する

Chromeなどの開発者ツールを使うと、

HTMLが読み込まれているか
CSSで非表示になっていないか
エラーが出ていないか

を簡単に確認できます。

表示されない原因特定には必須のツールです。

初心者向け最終チェックリスト

HTMLが表示されないときは、
次を順番に確認してください。

HTMLファイルを正しく開いているか
.html 形式で保存されているか
body内に内容が書かれているか
タグの書き間違いはないか
CSSで非表示にしていないか
文字コードはUTF-8か

よくある質問

HTMLはあるのに真っ白な画面になる原因は？

bodyが空
CSSでdisplay:none
JavaScriptエラー

ブラウザによって表示が違うのはなぜ？

CSSやJavaScriptの対応差
古いブラウザを使っている

まとめ

HTMLが表示されない原因の多くは、
基本的な確認不足です。

ファイルの開き方
HTML構造
タグの記述ミス
CSSやJavaScriptの影響

「html 表示されない」で検索した方は、
まず HTMLファイルを正しく開けているか を確認してください。
そこから順番にチェックすれば、必ず原因は見つかります。

【完全保存版】HTMLが表示されない原因と解決方法まとめ｜初心者でも必ず直せるチェックリスト付き