レスポンシブ対応はAIの得意分野
メディアクエリ・flexbox・CSS Gridの組み合わせによるレスポンシブ設計は、AIが非常に得意とする領域です。ブレイクポイントと列数を伝えるだけで、正確なレスポンシブCSSが生成されます。
プロンプト例（グリッドレイアウト）
「以下のカードレイアウトをレスポンシブ対応にしてください。
・PC（1024px以上）：4カラム
・タブレット（768px〜1023px）：2カラム
・スマホ（767px以下）：1カラム
・CSS Gridを使ってください
・モバイルファースト（min-width指定）で書いてください
・既存のクラス名は変更しないでください」
レスポンシブ対応の依頼パターン集
- ナビゲーション：「PC：横並びナビ、スマホ：ハンバーガーメニューに切り替え。」
- テーブル：「スマホでテーブルが横スクロールになるよう対応。scroll-snapも付けてください。」
- フォント：「PC：18px・タブレット：16px・スマホ：14px のレスポンシブフォントサイズ。」
- 画像レイアウト：「PC：画像左＋テキスト右の横並び、スマホ：縦積みレイアウトに切り替え。」
- 余白：「セクションの上下パディングをPC：80px、スマホ：40pxに変更。」
モバイルファーストで依頼するコツ
「モバイルファーストのアプローチで実装してください。
min-width のメディアクエリを使ってください。
ブレイクポイントは 768px と 1024px の2点で設定してください。
ブレイクポイントはCSS変数で管理してください。」💡 コツ：ブラウザの開発者ツールでデバイスをシミュレーションしながら「スマホ375px幅でナビが崩れます」と具体的なサイズを伝えると、ピンポイントで修正できます。
