まず「本当に真っ白か」を切り分ける
一口に真っ白と言っても、状況はいくつかに分かれます。背景色だけが表示されて中身が空なのか、エラー画面が出ているのか、それとも読み込み中のまま止まっているのか。最初にこの違いを見極めると、原因の見当が一気につきやすくなります。
手早い確認方法として、ブラウザでページ上を右クリックして「ページのソースを表示」を選んでみてください。ソースにHTMLの中身が並んでいれば、ファイル自体は届いていて見た目の組み立てだけが失敗している可能性が高いと判断できます。逆にソースがほぼ空なら、そもそも目的のHTMLが読み込まれていない状態です。
次に開発者ツール（多くのブラウザでF12キー）のコンソールとネットワークのタブを開きます。赤いエラー表示や、読み込みに失敗したファイルがここに出ていれば、それが原因を指し示す最初の手がかりになります。
ファイルの場所と入口の名前を確認する
静的なサイトでは、最初に開かれる入口のファイルが決まっています。一般的には「index.html」という名前が入口として扱われるため、トップに置くファイル名がこれと違っていると、開いても中身が見つからず真っ白になることがあります。
ZIPでまとめてアップロードした場合は、フォルダ構成にも注意が必要です。ZIPを展開したときに余計な階層が一段挟まっていて、入口のファイルが奥に埋もれてしまうケースは珍しくありません。狙ったファイルが一番上の階層に来ているかを見直してください。
- 入口のファイル名が「index.html」になっているか確認する
- ZIP内に余計なフォルダ階層が挟まっていないか見直す
- ファイル名に全角文字や空白が混ざっていないか点検する
症状別チェック表
公開後にページが真っ白なときの原因と確認手順は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
パスと文字コードのつまずきを疑う
HTMLは届いているのに見た目が空、という場合に多いのがパスの書き方の問題です。自分のパソコンのドライブを直接指すような絶対パス（例として「C:」から始まる指定や、ローカルだけで通用する絶対パス）は、公開先では到達できず、CSSやJavaScriptが読み込まれません。結果としてスタイルや描画処理が動かず、真っ白に近い状態になります。
対策は、同じZIPの中にあるファイル同士を相対パスでつなぐことです。同じ階層なら「style.css」、一つ下のフォルダなら「assets/app.js」のように、公開後の構成に合わせて指定し直します。画面の組み立てをJavaScriptに頼っているページでは、そのスクリプトが読み込めないだけで全体が空白になる点にも気をつけてください。
あわせて文字コードも確認しておきましょう。保存時の文字コードとHTML側の宣言がずれていると、表示が乱れたり描画が止まったりすることがあります。UTF-8で保存し、HTMLの先頭で同じ指定をしておくと安定します。
ブラウザのキャッシュと環境差を確認する
ファイルを直したのに表示が変わらないときは、ブラウザが古い内容を覚えている可能性があります。読み込み直しても改善しない場合は、キャッシュを使わない再読み込み（多くの環境でCtrlやShiftを押しながらの更新）を試すと、最新の状態で確認できます。
それでも判断に迷うときは、別のブラウザやシークレットウィンドウ、あるいはスマートフォンから同じURLを開いてみてください。特定の環境だけ真っ白なのか、どの環境でも真っ白なのかが分かれば、問題が自分の端末側にあるのか、ファイル側にあるのかを切り分けられます。
ギガサイト便で原因を確認して直す手順
ギガサイト便は、HTMLやZIP一式を認証付きの共有URLとして公開できるサービスで、サーバーの用意やデプロイ設定なしに公開できます。公開後に真っ白になったときも、URLはそのままにファイルを差し替えられるため、原因を直して上書きする流れがそのまま使えます。
以下の手順で、入口とパスを中心に切り分けながら直していきましょう。
- 公開したURLをブラウザで開き、ソース表示と開発者ツールで状態を確認する
- 入口のファイル名が「index.html」になっているかを点検する
- CSSやJavaScriptを相対パスで指定し直し、ZIPに正しい階層で含める
- アップロード時のセキュリティスキャンの警告（外部スクリプト依存などの兆候）に目を通す
- 同じURLのまま修正版に差し替え、リンクは送り直さずに再確認する
- 別ブラウザやスマートフォンからも開き、どの環境でも表示されるか確かめる
よくある質問
HTMLを公開したらページが真っ白なのはなぜですか
多くは、入口のファイル名が「index.html」になっていない、CSSやJavaScriptのパスがローカル前提のままで読み込めない、ZIP内のフォルダ階層がずれている、のいずれかです。まずページのソース表示と開発者ツールのコンソールを確認し、HTML自体が届いているかと、読み込みに失敗したファイルがないかを切り分けると原因をしぼり込めます。
自分のパソコンでは表示できるのに公開すると真っ白になります
手元では絶対パスでも読み込めてしまうため、ローカルだけで通用する指定が残っていることが原因として考えられます。同じファイル群の中で相対パスに直し、公開後の構成に合わせて指定し直してください。文字コードのずれが描画を止めている場合もあるので、UTF-8で揃えておくと安定します。
ファイルを直したのに表示が変わりません
ブラウザが古い内容を保持している可能性があります。キャッシュを使わない再読み込みを試すか、シークレットウィンドウや別のブラウザで開き直してください。ギガサイト便なら同じURLのまま修正版に差し替えられるので、上書き後にこの方法で再確認すると変化を確かめやすくなります。
ZIPで公開したときだけ真っ白になります
ZIPを展開したときに余計なフォルダ階層が挟まり、入口のファイルが奥に埋もれているケースが典型です。入口のファイルが一番上の階層に来ているか、画像やCSSへのパスがその構成と合っているかを見直してください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。