目次
- HTMLが表示されないとは？まず一言で
- まず確認：本当に「表示されていない」のか？
- 最初にやるべき超重要チェック
- 原因①：.htmlで保存されていない
- 解決方法
- 原因②：ブラウザで開いていない
- 原因③：基本構造が壊れている
- 原因④：bodyが空
- 原因⑤：タグの閉じ忘れ
- 対策
- 原因⑥：CSSで消している
- 原因⑦：positionで画面外に飛んでいる
- 原因⑧：JavaScriptエラーで止まっている
- 確認方法
- 原因⑨：パス指定が間違っている
- 原因⑩：スマホだけ表示されない
- 原因⑪：キャッシュが残っている
- 対処
- DevToolsでの確認手順（実務必須）
- 実際にあった失敗談
- 横スクロールやスマホ崩れもチェック
- 最終チェックリスト
- まとめ
HTMLが表示されないとは？まず一言で
HTMLが表示されない原因の9割は「保存形式」「基本構造」「CSSで隠れている」のどれかです。
画面が真っ白。
何も出ない。
エラーも出ない。
これ、かなり焦りますよね。
でも安心してください。
順番に確認すれば必ず原因は見つかります。
まず確認：本当に「表示されていない」のか？
「表示されない」と思っても、実はこういうケースがあります。
- HTMLは読み込まれている
- でもCSSで消えている
- 画面外に飛んでいる
- 文字が白背景で見えない
まずは思い込みを外します。
最初にやるべき超重要チェック
上から順番に確認してください。
- ファイルは .html で保存されているか
- ブラウザで開いているか
<body>に内容があるか- タグの閉じ忘れはないか
- CSSで display:none になっていないか
ここで解決することが本当に多いです。
原因①：.htmlで保存されていない
一番多いミス。
index.html.txtこれ、よくあります。
エディタで保存するときに拡張子がtxtになっている。
解決方法
- ファイル名を index.html に変更
- 「すべてのファイル」で保存
原因②：ブラウザで開いていない
エディタで開いているだけでは表示されません。
正しい方法：
- ファイルをブラウザにドラッグ
- 右クリック → Chromeで開く
原因③：基本構造が壊れている
最低限必要なのはこれです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト</title>
</head>
<body>
<p>表示されるテキスト</p>
</body>
</html>headやbodyが閉じていないと、表示がおかしくなることがあります。
原因④：bodyが空
<body>
</body>当然ですが、何も表示されません。
意外とあります。
原因⑤：タグの閉じ忘れ
<p>テキスト
<div>内容</div>閉じタグがないと、その後の表示が崩れます。
対策
- インデントを整える
- VSCodeのエラー表示を見る
原因⑥：CSSで消している
これ、かなり多いです。
body {
display: none;
}.box {
opacity: 0;
}p {
color: white;
background: white;
}HTMLはある。
でも見えていないだけ。
原因⑦：positionで画面外に飛んでいる
.box {
position: absolute;
top: -1000px;
}要素が画面外に配置されているだけ。
スクロールしても見えないこともあります。
原因⑧：JavaScriptエラーで止まっている
JavaScriptがエラーを出すと、表示が崩れることがあります。
確認方法
- 右クリック → 検証
- Consoleタブを見る
- 赤いエラーが出ていないか確認
Consoleは必ず見るクセを付けましょう。
原因⑨：パス指定が間違っている
画像やCSSだけ表示されない場合。
<link rel="stylesheet" href="css/style.css">よくあるミス：
- フォルダ構成が違う
- 大文字小文字が違う
- 相対パスが間違い
サーバーでは大文字小文字が区別されます。
原因⑩：スマホだけ表示されない
viewportがないケース。
<meta name="viewport" content="width=device-width, initial-scale=1.0">これがないと、スマホ崩れが起きます。
原因⑪：キャッシュが残っている
更新したのに反映されない。
これはブラウザキャッシュの可能性。
対処
- Ctrl + F5
- シークレットモードで確認
DevToolsでの確認手順（実務必須）
- 右クリック → 検証
- Elementsタブを見る
- HTMLが存在するか確認
- Stylesタブでdisplayやvisibility確認
- Consoleでエラー確認
ここを見るだけで、原因はほぼ特定できます。
実際にあった失敗談
以前、真っ白な画面が出ました。
1時間悩みました。
原因はこれでした。
body {
display: none;
}テスト用に入れたコードを消し忘れていました。
表示されないときは、まずCSSを疑う。
これは実務で何度も経験しています。
横スクロールやスマホ崩れもチェック
HTMLは表示される。
でも：
- 横スクロールが出る
- レイアウトが崩れる
これはCSSやviewportの問題です。
特に width:100vw と overflow の組み合わせは注意。
最終チェックリスト
✔ .htmlで保存されているか
✔ ブラウザで開いているか
✔ bodyに内容があるか
✔ タグは正しく閉じているか
✔ CSSで非表示になっていないか
✔ Consoleにエラーはないか
✔ パスは正しいか
✔ viewportはあるか
上から順番に見れば、必ず見つかります。
まとめ
HTMLが表示されない原因は特別なものではありません。
- 保存形式
- 基本構造
- CSSの影響
この3つを疑う。
焦らなくて大丈夫です。
表示されないときは、
一つずつ、冷静にチェックしてください。
必ず直せます。