STEP 6：レスポンシブ対応

このステップの目的

スマートフォンやタブレットなど、画面サイズが変わっても見やすいWebページにすることを目指します。
どんなデバイスでも快適に閲覧できるよう、“レスポンシブ”な設計を学びます。

---

checklistやることリスト

• 基準となる画面幅を決める
  例：768px 以下をモバイル、480px 以下を小型スマホ用など
• メディアクエリを使って切り替える
  CSS に @media (max-width: 768px) { … } を追加
• レイアウトの変更
  横並び要素を縦並びにする
• フォントサイズや余白を調整する
  画像やテキストの大きさを調整
• 文字が小さすぎないか、画像がはみ出さないか確認

---

tips_and_updatesポイント解説

モバイルファーストかPCファーストか

• モバイルファースト：まず小さな画面用に書いてから、メディアクエリで大きな画面用のスタイルを追加していく方法。
• PCファースト：まず大きな画面用に書いてから、メディアクエリで小さな画面用のスタイルに上書きしていく方法。

初心者には「PCファースト＋メディアクエリで縮小」が取り組みやすいです。

メディアクエリの書き方例

/* PC用（デフォルト） */
.flex-row {
  display: flex;
  gap: 20px;
}

/* モバイル（768px以下）では縦並びに */
@media (max-width: 768px) {
  .flex-row {
    flex-direction: column;
    gap: 10px;
  }
}

文字サイズの調整例

@media (max-width: 480px) {
  body { font-size: 14px; }
  h1   { font-size: 1.5rem; }
}

画像の調整

img {
  max-width: 100%;
  height: auto;
}

---

warningよくある間違いと対策

メディアクエリの範囲が広すぎる

重要な切り替え幅（ブレイクポイント）を絞って設定しましょう。

レイアウトが途中で崩れる

FlexboxやGridの親要素に min-width: 0; などを指定してみましょう。

文字が小さく読めない

font-size を画面幅ごとに見直しましょう。

余白が足りず窮屈

padding や margin を狭くしすぎないように注意しましょう。

---

---