このページでわかること
CSS 404、画像404、相対パス崩れ、下層ページだけデザインが崩れる時の確認順を整理します。
結論
下層ページだけCSSが効かない場合、まずCSSのhrefが絶対パスか相対パスかを見ます。新しいCSSを作る前に、既存CSSを正しく読めているか確認します。
対象読者
CodexでHTMLページを作った後、トップは正常なのに下層ページだけデザインが崩れる人向けです。
Codexに任せやすいこと
CSS URLのHTTPステータス確認、linkタグの棚卸し、画像404確認、390px表示確認、修正前後の差分確認は任せやすいです。
人間が確認すべきこと
共通CSSを変えてよいか、他ページに影響しないか、デザインの意図が残っているかは人間が確認します。
やってはいけないこと
CSS 404の原因がパスだけなのに、共通CSSを全面改造しません。robots.txt、.htaccess、DNSで直そうとしません。
STOP条件
共通CSSの大変更が必要、複数サイトに影響、.htaccess変更が必要、原因がサーバー設定に見える場合は止めます。
FAQ
CSS 404とは何ですか？
HTMLが参照しているCSSファイルが見つからず、スタイルが読み込まれない状態です。
下層ページだけ崩れる原因は何ですか？
相対パスがずれている、CSSの場所が違う、読み込みURLが間違っているなどが考えられます。
新しいCSSを作れば直りますか？
先に既存CSSの読み込みパスを確認します。新規作成は最後の手段です。
スマホ崩れも同時に見ますか？
CSS 404が直った後、390pxで横スクロールやカード崩れを確認します。