こんにちは！コーダーのゆうしです。
「CSSが思い通りに効かない」「レイアウトが崩れてるけど原因がわからない」という場面、コーディングをしていると結構あります。そういうときにAIに相談すると意外とすんなり解決することが多いです。ただ聞き方が曖昧だと的外れな回答が返ってくることも。この記事ではAIにCSSのバグを相談するときのプロンプトの書き方をまとめます。
曖昧な聞き方だと的外れな回答が返ってくる
まず、よくある失敗パターンから見てみます。
CSSが効きません。どうすればいいですか？
これだと情報が少なすぎてAIも回答のしようがありません。「何のCSSが」「どう効かないのか」「どんなコードを書いているのか」がわからないと的外れな一般論が返ってくるだけです。
情報を具体的に渡すほど、的確な回答が返ってきます。
基本のプロンプト構成
CSSのバグをAIに相談するときは以下の4点を伝えると精度が上がります。
- 何をしたいか（実現したいこと）
- 実際に起きていること（困っている症状）
- 書いているコード（HTMLとCSSをセットで）
- 試したこと（あれば）
【やりたいこと】
ヘッダーを画面上部に固定したい
【起きていること】
position: sticky を指定したのにスクロールしても固定されない
【コード】
HTML： …
CSS：
.header {
position: sticky;
top: 0;
}
【試したこと】
position: fixed に変えると固定されるが、コンテンツの上に被さってしまう
この形で渡すと、AIが状況を正確に把握した上で回答してくれます。
よくあるCSSバグ別のプロンプト例
レイアウトが崩れているとき
以下のCSSでFlexboxのレイアウトを組んでいますが、
SPサイズ（375px）にするとアイテムが縦並びにならず横並びのままです。
原因と修正方法を教えてください。
HTML：
＜コードをここに貼り付ける＞
CSS：
＜コードをここに貼り付ける＞
「どの画面サイズで崩れているか」を伝えるのがポイントです。PCでは正常・SPで崩れるという場合はその旨を書くと、メディアクエリ周りを中心にチェックしてくれます。
特定の要素だけスタイルが当たらないとき
以下のCSSを書いていますが、.boxの中にある.titleにだけcolor: redが当たりません。
他の要素には正常に当たっています。
セレクタの書き方に問題があるか確認してください。
HTML：
＜コードをここに貼り付ける＞
CSS：
＜コードをここに貼り付ける＞
「他の要素には当たっている」という情報を添えると、詳細度（specificity）の問題なのか・セレクタのミスなのかを絞り込んで回答してくれます。
アニメーションが動かないとき
transitionでフェードインのアニメーションをつけたいのですが、
クラスを付与しても一瞬で切り替わってアニメーションが動きません。
JavaScriptでクラスを付与しています。
コードを確認して原因を教えてください。
HTML：
＜コードをここに貼り付ける＞
CSS：
＜コードをここに貼り付ける＞
JavaScript：
＜コードをここに貼り付ける＞
アニメーション系のバグはHTML・CSS・JavaScriptが絡むことが多いです。関係するコードをまとめて渡すと原因を特定しやすくなります。
回答が微妙だったときの追加プロンプト
最初の回答が的外れだったり、修正しても直らなかったりするときは以下のように返すと精度が上がります。
修正してみたが直らなかったとき
提案の通りに修正しましたが、まだ同じ症状が出ています。
修正後のコードを貼り付けます。別の原因が考えられますか？
＜修正後のコードをここに貼り付ける＞
「直らなかった」だけでなく、修正後のコードをセットで渡すのがポイントです。どう修正したかがわかると、次の回答の精度が上がります。
回答の意味がわからなかったとき
提案してもらった方法の意味がよくわかりませんでした。
「overflow: hidden を親要素に追加する」というのは
なぜこれで解決するのか、もう少し詳しく教えてもらえますか？
わからないことはそのまま聞いてOKです。「なぜそれで解決するのか」を理解しておくと、次回同じ問題が起きたときに自分で対処できるようになります。
別の方法を知りたいとき
提案の方法で解決しましたが、他のやり方もあれば教えてください。
それぞれのメリット・デメリットも合わせて教えてもらえると助かります。
解決した後に別の方法を聞くと、知識の幅が広がります。
躓きやすいポイント
HTMLとCSSはセットで渡す
CSSだけ渡してもHTML構造がわからないと的確な回答が返ってきにくいです。CSSのバグ相談は基本的にHTMLとCSSをセットで渡す、と覚えておきましょう。
関係ない部分は省いて渡す
ファイル全体を丸ごと渡すと情報が多すぎて回答の精度が下がることがあります。問題が起きている箇所に関係するコードだけ切り出して渡すほうが的確な回答が返ってきます。
AIの回答は必ず動作確認する
AIが提案した修正コードが正しいとは限りません。適用してブラウザで動作確認するまでは正解かどうかわかりません。特に複数の修正をまとめて適用するのは避けて、一つずつ確認しながら進めましょう。
まとめ
AIへのCSSバグ相談は「何をしたいか・何が起きているか・コード・試したこと」の4点を伝えるだけで精度がぐっと上がります。曖昧な聞き方だと一般論が返ってくるだけなので、具体的な情報を渡すことを意識してみてください。回答が微妙でも諦めずに追加で聞くと解決することが多いです！
ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。
