組み込み前に必ずサンドボックス確認をする
AIが生成したHTMLコードは単体では完璧でも、既存ページに組み込むと崩れることがあります。まず別ファイル（test.html）で動作確認してから本番に組み込むのが鉄則です。
組み込み前チェックリスト
- ✅ HTMLタグが正しく開閉されているか
- ✅ クラス名・ID名が既存と重複していないか
- ✅ 追加CSSが既存スタイルを意図せず上書きしていないか
- ✅ 使用フォント・アイコンが既存ページで読み込まれているか
- ✅ JavaScript変数名・関数名が重複していないか
- ✅ $(document).ready() や DOMContentLoaded の二重定義がないか
- ✅ z-indexが既存要素と競合していないか
CSSのスコープを限定する指示
「生成するCSSは、既存スタイルに影響しないよう、すべてのセレクタに ‘.my-section’ を親クラスとしてスコープを限定してください。!important は使わないでください。」
よくある崩れパターンと対処法
- box-sizingの不一致：AIのコードに
box-sizing: border-boxを明示的に指定してもらう。 - フォントサイズの継承：
font-sizeをpxではなくremで指定してもらう。 - floatのはみ出し：最近のコードではほぼflexbox/gridで解決するが、古いコードでは clearfix を確認する。
- position の誤解釈：position: relative / absolute の親子関係をAIに事前に伝える。
💡 コツ：AIへのプロンプトに「既存のCSSリセットはNormalize.css + box-sizing: border-boxです」と環境情報を添えると、干渉リスクを大幅に減らせます。
