このページでは、表示崩れや画像トラブルが何度も直らないときの考え方を分けました。
「まだ修正しないで、原因だけ調べてください」とCodexに依頼するためのプロンプト例も確認できます。
13
【重要】何度直しても戻らないときは原因調査に切り替える
Codexを使っていると、記事一覧カードや画像、レイアウトの形が何かの原因で崩れてしまうことがあります。
そのようなときに、何度も次のように指示しても、なかなか元に戻らない場合があります。
戻してください
直してください
元の形にしてください
もう一度修正してください完全初心者の場合、どのHTMLやCSSが原因で崩れているのか分からないため、同じような修正指示を何度も出してしまうことがあります。
しかし、原因が分からないまま修正を重ねると、HTML、CSS、class名、画像サイズ、カードの構造、スマホ用の設定などが少しずつ絡まり、さらに原因が分かりにくくなることがあります。
そのようなときは、いったん「修正してもらう」のを止めます。そして、Codexへの指示を「直してください」から「変更しないで、原因だけ調べてください」に切り替えます。
【1】修正を続けるより、原因調査に切り替える
何度も直そうとしても戻らないときは、さらに修正を重ねるより、まず原因を調べることが大切です。
特に、次のような場合は、原因調査に切り替えた方が安全です。
・記事一覧カードの形が崩れた
・何度戻しても元の形に戻らない
・画像サイズやカード幅がそろわない
・横並びだったものが縦になった
・CSSを直したはずなのに変化がない
・どのファイルが原因か分からない
・修正するたびに別の場所が崩れるこのような状態で修正を続けると、原因がさらに分かりにくくなることがあります。
【2】Codexには「変更しないで調査だけ」と指示する
原因調査に切り替えるときは、Codexに次のように指示します。
#指示
まだ修正しないでください。
現在、記事一覧カードの形が崩れています。
原因を調べるために、今どのHTML構造とCSSが効いているかだけ確認してください。
#確認してほしいこと
・対象の記事カードのHTML構造
・使われているclass名
・画像に効いているCSS
・カード全体に効いているCSS
・PC表示とスマホ表示で効いているCSS
・崩れの原因になっていそうな箇所
・どのファイルを確認したか
#重要
今回は調査だけです。
HTML、CSS、画像、リンク、記事本文は変更しないでください。
修正案は出してもよいですが、まだ実際の修正はしないでください。このように指示すると、Codexが勝手に直すのではなく、まず現在の状態を確認する作業に切り替えやすくなります。
【3】Codexの調査結果をChatGPTに読ませる
Codexに原因調査をしてもらったら、その結果をそのままChatGPTに貼り付けて相談します。
このとき、ChatGPTには次のように伝えると分かりやすくなります。
Codexに原因調査だけしてもらいました。
以下がCodexの調査結果です。
この内容を見て、どこが原因の可能性が高いか、
次にCodexへどのように指示すればよいかを整理してください。
まだ修正用プロンプトは作らず、
まず原因と次の作業方針を分かりやすく教えてください。Codexの調査結果をChatGPTに読ませることで、次に何をするべきかを絞り込みやすくなります。
調査する
↓
結果を整理する
↓
修正箇所を絞る
↓
必要な部分だけ修正する【4】実際に解決につながった流れ
今回のように、記事一覧カードの形が崩れ、何度も元に戻そうとしても戻らない場合がありました。
最初は、Codexに次のように繰り返し指示していました。
戻してください
元の形にしてください
直してくださいしかし、それでも元の形に戻らず、修正が重なることで、どこが原因なのか分かりにくくなっていきました。
そこで、いったん修正を止めて、Codexに次のように指示しました。
変更しないで、今どのHTMLとCSSが効いているかだけ報告してください。その結果、どのHTML構造、どのclass名、どのCSSが記事カードに関係しているのかを確認できました。
さらに、そのCodexの調査結果をChatGPTに読み込ませ、原因の可能性と次に出すべき指示を整理しました。
このように、修正を続けるのではなく、原因調査に切り替えたことで、悩んでいたトラブルを解消することができました。
【5】初心者向けの考え方
完全初心者にとって、HTMLやCSSの原因を自分だけで見つけるのは難しいです。
そのため、直らないときは無理に修正を続けるよりも、次の考え方が大切です。
直らない
↓
さらに直そうとしない
↓
原因調査だけに切り替える
↓
CodexにHTMLとCSSの状態を報告してもらう
↓
ChatGPTに調査結果を読ませる
↓
次の指示を絞るCodexは修正するだけでなく、原因を調べるためにも使えます。そして、ChatGPTはその調査結果を整理し、次に何をすればよいかを考えるために使えます。
【6】原因調査だけ依頼するプロンプト例
記事一覧カードや画像の表示が崩れたときは、次のようなプロンプトを使えます。
#指示
まだ修正しないでください。
現在、ページの表示が崩れています。
原因を調べたいので、変更は一切せず、調査だけ行ってください。
#調査してほしい内容
・対象ページのファイル名
・該当部分のHTML構造
・使われているclass名
・該当部分に効いているCSS
・PC表示に関係するCSS
・スマホ表示に関係するCSS
・画像サイズやカード幅に関係するCSS
・崩れの原因になっていそうな箇所
・修正する場合に触る必要があるファイル
#重要ルール
今回は調査だけです。
以下は変更しないでください。
・HTML
・CSS
・JavaScript
・画像
・画像パス
・リンク先
・記事本文
・記事一覧カード
・他ページ
#報告してほしい形式
以下の形式で報告してください。
1. 確認したファイル
2. 該当するHTML
3. 該当するclass名
4. 効いているCSS
5. 原因の可能性
6. 修正するなら触る場所
7. まだ修正しない方がよい理由