なぜ手元と公開後で見た目が変わるのか
ローカルでファイルをダブルクリックして開くときと、URL経由で公開されたページを開くときでは、ブラウザがファイルを探しに行く場所が変わります。手元では同じフォルダ内のファイルがたまたま見つかっていただけ、というケースは少なくありません。
公開環境では、HTMLが参照しているCSS・JavaScript・画像が「正しいパスで」「正しい場所に」揃っていて初めて、見た目が再現されます。どれか一つでも読み込みに失敗すると、装飾が外れて文字だけが並んだり、要素の位置がずれたりします。
つまりレイアウト崩れの多くは、デザインそのものの問題ではなく、関連ファイルの読み込み失敗が原因です。まずは「何が読み込めていないのか」を特定するところから始めます。
まず疑うべき代表的な原因
崩れ方には傾向があります。装飾が一切効いていないならCSSの読み込み失敗、画像だけが表示されないなら画像パスの問題、動きが止まっているならJavaScriptの読み込み失敗が疑われます。崩れの種類から原因をある程度絞り込めます。
特に多いのが、パスの書き方に起因するものです。手元の特定フォルダを前提にした絶対パスや、ファイルの置き場所とずれた相対パスは、公開環境で参照先を見失いがちです。
- CSSが丸ごと効いていない: スタイルシートのパスが間違っている
- 画像だけ出ない: 画像ファイルのパスやファイル名の指定ミス
- ファイル名の大文字小文字違い: 公開環境では区別される場合がある
- 外部スクリプト依存: ネット上の部品が読み込めず崩れる
- フォントが当たらない: Web フォントの参照先に届いていない
症状別チェック表
公開後にレイアウトが崩れる原因と直し方は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
パス指定を見直す
原因の中心になりやすいのがパスです。「C:￥Users￥...」のような手元の場所を直接書いた絶対パスは、自分のパソコンの外では機能しません。公開するファイル群の中だけで完結する相対パスに書き換えるのが基本です。
相対パスは、HTMLファイルから見た位置関係で書きます。同じ階層なら「style.css」、画像をimagesフォルダにまとめているなら「images/logo.png」のように、フォルダ構成と一致させます。フォルダ名やファイル名のスペル、大文字小文字も実ファイルと厳密に合わせてください。
ZIPでまとめて公開する場合は、フォルダ構成を崩さないことも大切です。HTMLと、それが参照するCSS・画像・スクリプトの位置関係が、手元のときと同じになるよう梱包します。
公開前にブラウザの開発者ツールで確認する
崩れの原因を一番早く突き止められるのが、ブラウザの開発者ツールです。多くのブラウザでF12キーや右クリックの「検証」から開けます。難しい操作は不要で、エラーが赤字で出ている箇所を見るだけでも手がかりになります。
「Network」や「Console」のタブに、読み込みに失敗したファイルが404などのエラーとして並びます。どのファイルが、どのパスで失敗しているかが分かれば、修正すべき箇所はほぼ確定します。
- 公開URLをブラウザで開く
- F12キーまたは右クリックの「検証」で開発者ツールを出す
- 「Console」タブで赤いエラー表示を確認する
- 「Network」タブで読み込み失敗（404など）のファイルを探す
- 失敗しているパスをHTML側の記述と照合して直す
ギガサイト便で直しながら確認する手順
修正と確認を何度も往復するときに便利なのが、認証付きの共有URLとして公開できる「ギガサイト便」です。トップページにHTMLやZIP一式をドロップすれば、サーバー構築なしで実際の公開環境に近い形で表示を確かめられます。
特に役立つのが、同じURLのままファイルを差し替えられる点です。崩れを直したファイルを上げ直しても共有先のリンクは変わらないため、修正のたびにURLを送り直す手間がありません。アップロード時のセキュリティスキャンで、外部スクリプト依存など崩れの一因になりうる兆候に気づける場合もあります。
- 崩れたページのファイル一式を用意する
- トップページにHTMLまたはZIPをドロップして公開する
- 発行された共有URLを開き、開発者ツールで崩れ箇所を特定する
- パスやファイル名を直して、同じURLにファイルを差し替える
- 表示が整ったら、必要に応じて認証方式や公開期限を設定して共有する
それでも崩れるときの切り分け
ファイルパスを直しても崩れが残る場合は、もう一段絞り込みます。画像やフォントは表示されるのにレイアウトだけ崩れるなら、CSSの中身そのものや、特定の画面幅でのスタイル指定を見直します。
また、外部のネット上にあるスクリプトやフォントに依存している場合、その配信先の都合で読み込めないと崩れることがあります。可能なら必要なファイルを自分の公開物の中に同梱し、外部依存を減らすと再現性が安定します。
なお、HTMLは静的に公開されるため、サーバー側で処理する仕組みは動きません。サーバー処理を前提に作った部分があると、見た目や動作が想定どおりにならないので、静的なファイルだけで完結する作りになっているかも確認しましょう。
よくある質問
手元では崩れないのに公開すると崩れるのはなぜですか
ローカルでファイルを直接開くときと、URL経由で開くときでは、ブラウザがCSSや画像を探す場所が変わるためです。多くは関連ファイルのパス指定が公開環境で合っていないことが原因です。崩れ方の傾向から、まずどのファイルが読み込めていないかを特定しましょう。
CSSが反映されません。どこを見ればいいですか
まずHTMLが参照しているCSSのパスが、実際のファイルの置き場所と一致しているか確認します。ブラウザの開発者ツールの「Console」や「Network」で読み込み失敗が出ていれば、その失敗パスが修正の手がかりになります。ファイル名の大文字小文字のずれもよくある原因です。
画像だけが表示されないときの原因は何ですか
画像へのパスやファイル名の指定ミスが代表的な原因です。フォルダ構成と相対パスが一致しているか、拡張子やスペルが実ファイルと合っているかを確認してください。ZIPでまとめる場合は、画像フォルダの位置関係を崩さず梱包することも大切です。
修正のたびに共有URLを作り直す必要がありますか
ギガサイト便なら、同じURLのままファイルを差し替えられるので作り直しは不要です。崩れを直したファイルを上げ直しても共有先のリンクは変わらないため、レビューしてもらいながら修正を重ねる場面でも手間がかかりません。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。