公開フォルダを変えたらCSSと画像が消えた原因｜パスの確認方法
サイトを別フォルダへ移した時にデザインや画像が消える原因を、古いパス・絶対パス・相対パスの順で確認します。
匿名化方針実際の対応を基に、顧客名・地域名・URL・管理画面の識別情報・個人を特定できる数値を省いて構成しています。
- テストサイトを別の公開フォルダへ移した
- HTMLは表示されるのにデザインと画像だけ消えた
- どのファイルから確認すればよいか分からない
HTMLだけ表示され、CSS・画像・リンクがまとめて壊れた時は、移動前のフォルダ名がURLに残っていないかを最初に確認します。ファイルを再アップロードする前に、ブラウザが実際に取りに行ったURLと、サーバー上の配置を比べると原因を絞れます。
- 絶対パスと相対パスの違い
- 古いフォルダ名を残さない確認順
- 公開前に画像・リンク・フォームまで点検する方法
実際の公開例：別フォルダへ移したら装飾が消えた
ページ本文は表示されましたが、CSSが読み込まれず、画像と一部リンクも開かない状態になりました。アップロード漏れだけを疑わず、HTMLに残っていた移動前のパスを確認しました。
- ブラウザの開発者ツールで、CSSと画像がどのURLへ取りに行っているかを確認しました。
- HTML、CSS、JavaScript内を検索し、移動前のフォルダ名が残る箇所を一覧にしました。
- 公開先を基準にパスを直し、トップ以外のページ、画像、フォーム、戻るリンクまで再確認しました。
結果：ファイル自体は存在しており、古い公開先を指すURLが原因でした。パスをまとめて直し、移動先でも同じ構成で表示できました。
匿名化：実際のドメイン名、フォルダ名、顧客サイト名は、例示用の名称へ置き換えています。
なぜHTMLだけ表示されるの？
ブラウザは最初にHTMLを読み、その中に書かれたURLを使ってCSS、画像、JavaScriptを別々に取得します。HTMLの場所だけ正しくても、CSSが古いURLを向いていれば文字だけのページになります。
画像が一部だけ消える場合は、HTMLだけでなくCSSの背景画像やJavaScript内のURLも確認します。
絶対パスと相対パスの違い
「/assets/style.css」のようにスラッシュから始まるURLは、ドメイン直下を基準にします。「assets/style.css」は今のページの場所を基準にします。どちらが正しいかは公開構成で変わります。
サブフォルダへ置くサイトでドメイン直下のパスを固定すると、移動先では別の場所を見に行くことがあります。反対に、階層の深いページで相対パスを使うと、ページごとに基準が変わる点に注意します。
最初に確認する3か所
表示が崩れたページを開き、CSSファイルのURLを直接開きます。404なら、HTMLに書かれたURLとサーバー上の配置が一致していません。次に画像、JavaScriptの順で同じ確認をします。
- HTMLのlink・script・imgに書かれたURL
- CSSのbackground-imageやfont-faceに書かれたURL
- JavaScript、サイトマップ、canonical、フォーム送信先に残る旧URL
一括置換だけで終わらせない
古いフォルダ名を一括置換すると早い一方、説明文や外部リンクまで変える危険があります。対象ファイルと置換前後の文字列を限定し、変更一覧を確認してから公開します。
特に「戻る」「詳しく見る」など相対リンクはトップから動いても、下層ページからは壊れることがあります。全ページを同じ入口から見るだけでなく、直接URLを開いて確認します。
直したのに変わらない時はキャッシュを確認
CSSを直しても以前のファイルがブラウザに残り、古い表示が続くことがあります。まず別のブラウザやプライベートウィンドウで確認します。
更新が多いCSSやJavaScriptは、ファイル名やURLへバージョンを付けると、新旧が混ざりにくくなります。キャッシュだけを疑う前に、本番URLのファイル内容も直接確認します。
公開前チェックは表示以外も含める
見た目が戻っても、canonicalがテストURLのまま、フォームが旧URLへ送信、サイトマップが移動前のURLということがあります。検索や問い合わせに影響するため、画面以外も確認します。
- トップと全下層ページを直接開く
- CSS・画像・JavaScriptが200で取得できる
- 内部リンクとフォーム送信先が新しい場所を向く
- canonical・OGP・サイトマップが公開URLと一致する
状況から最初の対応を決める
壊れ方から、最初に見る場所を決めます。
| 今の状況 | 最初の判断 | 確認する理由 |
|---|---|---|
| 文字だけ表示される | CSSのURLを見る | スタイルシートを取得できていない可能性が高い |
| 画像だけ一部消える | HTMLとCSSの画像URLを見る | 背景画像はCSS内に書かれることがある |
| 下層ページだけリンク切れ | 相対パスの基準を見る | ページ階層によって解決先が変わる |
| 修正後も古い表示 | 本番ファイルとキャッシュを分ける | 新しいCSSが配信済みか先に確認する |
迷ったら、この順番で進めてください
- 01壊れたファイルのURLを開く
404か、古い場所を見ているかを確認
- 02旧フォルダ名を検索する
HTML・CSS・JavaScript・設定ファイルを対象にする
- 03限定して修正する
置換内容を確認してから公開
- 04全ページを再点検する
表示、リンク、フォーム、SEO設定まで見る
よくある疑問に答えます
絶対パスと相対パスはどちらが安全ですか？
公開場所が固定なら絶対パス、移動を想定するなら相対パスが便利な場合があります。サイト構成を決め、混在させないことが大切です。
CSSを再アップロードすれば直りますか？
URLが間違っていれば、同じファイルを再送しても直りません。ブラウザが要求したURLと配置を比べます。
トップだけ見れば公開確認は十分ですか？
不十分です。階層が違う下層ページ、フォーム、canonical、サイトマップも確認します。
この記事の根拠と確認範囲
実際のWeb運用・支援で確認した流れと、各機関の公式情報を基に構成しています。管理画面や仕様は変わるため、作業前に最新の公式情報も確認してください。