スマホで見るとレイアウトが崩れる

✅ 回答

スマホ対応（レスポンシブデザイン）には3つのポイントがあります。

原因1：viewport メタタグがない

これがないと、スマホでもPC用の幅（通常980px）で表示され、文字が小さくなります。

<!-- ✅ head に必ず書く -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

原因2：幅を px で固定している

/* ❌ 固定幅だとスマホではみ出す */
.container { width: 960px; }

/* ✅ 最大幅 + 自動調整 */
.container { max-width: 960px; width: 100%; margin: 0 auto; }

原因3：メディアクエリを使っていない

画面幅に応じてスタイルを切り替えるには @media を使います。

/* スマホ用のスタイル（768px以下） */
@media (max-width: 768px) {
  .nav { flex-direction: column; }
  .card { width: 100%; }
}

確認方法

開発者ツール（F12）の左上にあるスマホアイコンをクリックすると、スマホ表示をシミュレーションできます。実機で確認する前にここでチェックしましょう。

まとめ：①viewport メタタグを書く、②幅は % や max-width を使う、③メディアクエリで画面幅に応じたスタイルを書く。この3つでスマホ対応できます。