Codex trouble guide

CSSが崩れた時の確認

Codex作業後にCSSが崩れた時の確認方法を整理します。CSSキャッシュ、クラス名、共通CSS、スマホ表示、差分確認、戻す対象を扱います。

このページは非公式の実務ガイドです。重要な判断は人間が行い、最新情報は提供元の情報も確認してください。

trouble-check.md

stop:
  - unclear_cause
  - risky_change
check:
  - public_url
  - changed_files
  - rollback_scope

このページで分かること

Codex作業後にCSSが崩れた時の確認方法を整理します。CSSキャッシュ、クラス名、共通CSS、スマホ表示、差分確認、戻す対象を扱います。

ヘッダーが折れる、カードが横にはみ出す、スマホ表示だけ崩れる、共通CSS変更後に複数ページの見た目が変わる状態です。

CSS崩れの原因は、ほぼ「共通CSSの変更」「クラス名のずれ」「キャッシュ」の3つに集約されます。手当たり次第に直す前に、次の順で切り分けると原因に最短で届きます。

確認	やり方	そこから分かること
崩れたページと正常なページを比べる	同じテンプレートの2ページを並べて表示	全ページ崩れ→共通CSSが原因。1ページだけ→そのページ固有の変更が原因
共通CSSを変更したか確認	直近の作業で assets/css 配下を触ったか差分を見る	共通CSSの1行が全ページに波及していないか
クラス名の追加・削除を確認	崩れた要素を開発者ツールで選択し、当たっているCSSを見る	HTML側のクラス名変更でスタイルが外れていないか
キャッシュの影響を切り分け	シークレットウィンドウ、またはCSSのURLに?v=を付けて確認	直したのに直らない場合、古いCSSが配信されているだけの可能性
スマホ390pxでも確認	開発者ツールで幅390pxに切り替え	PCだけ確認して「直った」と誤認していないか

特に「キャッシュ」は見落としの王様です。修正が反映されないと感じたら、コードを疑う前にまずシークレットウィンドウで開き直してください。それだけで解決することが本当に多くあります。

CSS崩れが出ています。崩れたページ、影響範囲、変更したCSS、クラス名、スマホ表示、戻す対象を確認し、大幅改修せず最小修正案を報告してください。

CSSの崩れは、崩れ方によって原因がかなり絞れます。闇雲に直す前に、どの範囲が崩れているかを見てください。

崩れの範囲	疑うところ	確認方法
全ページで崩れている	共通CSSファイル、またはその読み込みパス	CSSファイルのURLを直接開いて表示されるか見る
1ページだけ崩れている	そのページのHTML（タグの閉じ忘れ等）	直前に変更した箇所を見る
特定の部分だけ崩れている	その部分のclass名の変更やtypo	崩れている要素のclassが正しいか確認
スマホだけ崩れている	画面幅による切り替えの指定	PCの画面を狭めて再現するか試す
自分だけ崩れて見える	ブラウザのキャッシュ	シークレットウィンドウで開き直す

最後の行は意外と多いパターンです。直したのに変わらない、あるいは直したはずが崩れて見える時は、まずキャッシュを疑ってください。ここを確認せずに追加修正すると、実際には正常だったものを壊してしまいます。

1ページだけ崩れている場合、原因の多くはHTMLのタグの閉じ忘れです。この場合、崩れて見える場所と、原因がある場所は違います。

閉じ忘れたタグがあると、それ以降の要素がすべてその内側にあるものとして扱われます。つまり、崩れ始めている場所より前に原因があります。ページの上から順に見て、最初に崩れた箇所の手前を確認してください。

特に起きやすいのが、既存のHTMLに新しいセクションを差し込んだ時です。差し込んだ内容の閉じタグが足りないと、後続がすべて巻き込まれます。追加した部分の開始タグと終了タグが同数あるかを数えるだけで、原因が見つかることがよくあります。

共通CSSが原因なら、対象ブロックだけの調整か、直前CSS変更の差し戻しを検討します。