今回やった作業
CSS変更は、コード上では正しく見えても、実画面では余白、幅、折り返し、ボタン位置、スマホ表示の影響で悪化することがあります。今回の実践ログでは、原因未特定のままCSSを積み増さず、直前変更だけを戻した判断を一般化します。
今回の作業では、表示改善を目的にした変更でも、実画面で悪化したら止めることを重視しました。Codexに実装だけを任せるのではなく、変更差分、バックアップ、戻す範囲、公開後の確認まで整理させることで、作業を広げすぎないようにします。
作業前の状態
作業前は、カード一覧の見た目を改善し、ランキング感を強めたい状態でした。CodexにCSS調整を任せ、レイアウトや余白の変更を試しましたが、実画面では意図と違う表示になり、かえって一覧感が強く見える状態になりました。追加CSSで押し切るより、直前変更を疑う必要がありました。
表示改善系の作業は、コード差分だけでは良し悪しを判断しにくい領域です。カード幅、余白、折り返し、ボタン位置、PCとスマホの見え方が絡むため、作業前の意図と実画面の印象を分けて確認する必要があります。
作業前に問題だったこと
CSS変更は小さく見えても、ページ全体の印象を大きく変えます。特にカード一覧、ランキング、ボタン、サムネイル、スマホ表示が絡むページでは、少しの幅変更や余白変更で読みやすさが変わります。原因が分からないままCSSを重ねると、どの変更が効いているのか分かりにくくなり、さらに戻しづらくなります。
特に危ないのは、表示が悪化した時に追加修正を重ねてしまうことです。原因が分からないままCSSを足すと、あとで戻す時にどこまでが必要な変更なのか分からなくなります。まず直前変更を疑い、戻すか、範囲を小さくするかを判断する方が安全です。
Codexに任せたこと
Codexには、直前に変更したCSSファイル、変更差分、バックアップの有無、直前変更だけを戻す案、戻した後の公開URL、HTTP 200、Fatal / 500、CSS読み込み、スマホ表示の確認を任せました。修正案を積むより、戻すための確認を先に行わせたのがポイントです。
Codexには、対象ファイルの確認、差分確認、バックアップ確認、公開HTML確認、HTTP 200、Fatal / 500、CSS読み込み、PCとスマホ表示の確認を任せます。修正案を出すだけでなく、戻す案と停止条件も報告させることで、判断しやすい形にします。
人間が判断したこと
人間側では、追加CSSを重ねないこと、全体を作り直さないこと、まず直前変更だけを戻すことを判断しました。見た目より、順位表示、指標、内部リンクなど本質的な問題を優先し、CSSの良し悪しはCodex報告ではなく実画面で判断する方針にしました。
人間が見るべきなのは、作業が終わったかどうかだけではありません。目的に近づいたか、悪化していないか、影響範囲が大きすぎないか、戻す方が安全かを判断します。Codexの報告を受けても、最後は実画面で確認して決めます。
実際に使った指示文の考え方
指示文では、CSS修正だけを頼まず、戻す条件、触らないファイル、確認URL、作業後の確認項目まで入れます。DB、cron、.htaccess、robots.txt、ads.txt、AdSenseタグ、Search Console確認タグには触らないことも明記します。
うまくいった点
うまくいった点は、悪化した表示を無理に上書きせず、確認と判断を分けられたことです。戻す、比較する、上位3件だけに絞る、キャッシュを確認するという選択肢を持てると、CSS作業で迷子になりにくくなります。
詰まった点・危なかった点
- 実画面を見ずに完了扱いにする
- 原因未特定のままCSSを積み増す
- 全体を戻して正常な変更まで消す
- PCだけ見てスマホを見ない
- 戻した後のHTTP確認を省く
CSSやレイアウトの作業は、変更量が少なくても影響が大きいことがあります。特に公開中サイトでは、Fatal error、500、CSS未読込、スマホ表示崩れ、意図しない巻き戻しを避ける必要があります。
作業後に確認したこと
作業後は、対象ページがHTTP 200であること、Fatal / 500がないこと、CSSが読み込まれていること、公開HTMLの参照が正しいこと、PCとスマホで大きく崩れていないことを確認します。あわせて、canonical、robots、noindexなし、内部リンクが壊れていないことも見ます。
次から使える指示文テンプレート
以下は、CSS失敗や表示悪化が起きた時にCodexへ貼れるテンプレートです。
以下の公開中サイトで、直前のCSS変更後に実画面の表示が悪化していないか確認してください。
悪化している場合は、原因未特定のままCSSを追加しないでください。
まず直前変更ファイルとバックアップを確認し、必要なら直前変更だけを戻してください。
戻した後に、対象ページのHTTP 200、CSS読み込み、Fatal / 500なし、スマホ表示、もともと直したかった要素がどうなったかを確認してください。
DB、cron、.htaccess、robots.txt、ads.txt、広告タグ、Search Console確認タグは触らないでください。確認チェックリスト
表示改善は、作業後の確認まで含めて完了です。
- 直前変更を特定した
- バックアップを確認した
- まず戻す判断をした
- 戻した後に200確認した
- 追加CSSを重ねていない
- Fatal / 500 がない
- CSSが読み込まれている
- スマホ表示で大崩れしていない
- 本来直すべき問題が残っているか確認した
- DB / cron / .htaccess を触っていない
関連する使い方ガイド
注意書き
この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。
CSS変更やロールバックは、対象ファイルと確認項目を絞って行うことが重要です。Codexに任せる部分と、人間が実画面で判断する部分を分けることで、追加修正の積み増しや意図しない巻き戻しを避けやすくなります。