レッスン6：レスポンシブデザイン入門

⏱ 約25分やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

viewportのmetaタグの役割を説明できます。
@mediaでメディアクエリを書けます。
スマホファーストの考え方を説明できます。

📖 前回の復習（レッスン5）

親要素に display: flex を指定すると子要素が横並びになる
justify-content で横方向、align-items で縦方向の揃え方を指定する
flex-wrap: wrap で画面幅に合わせて折り返せる

📖 導入 — スマホで見たらレイアウトが崩れた！

自分で作ったページをスマホで開いたら、文字が小さすぎて読めなかったり、横にはみ出してしまったりした経験はありませんか？画面の大きさに合わせてレイアウトを自動で調整するデザインを レスポンシブデザイン といいます。今やウェブの閲覧はスマホが主流です。このレッスンでその基本を身につけましょう！

📝 レスポンシブデザインの書き方

`}>

HTMLの <head> に必ずこの1行を書きます。これがないと、スマホでもPC用の幅でページが表示されてしまいます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

メディアクエリ：

画面の幅に応じてCSSを切り替えることができます。

/* 通常のスタイル（PC向け） */
.card {
  width: 300px;
}

/* 画面幅が 600px 以下のとき（スマホ向け） */
@media (max-width: 600px) {
  .card {
    width: 100%;
  }
}

▶ プレビュー

条件	意味
`max-width: 600px`	幅が600px以下のとき（スマホ向け）
`min-width: 768px`	幅が768px以上のとき（タブレット・PC向け）

スマホファーストの考え方

プロの現場では「スマホ向けのスタイルを先に書き、PC向けを後から追加する」スマホファーストという書き方が主流です。

よく使うブレークポイント

「画面幅がいくつで切り替えるか」の基準値をブレークポイントといいます。

ブレークポイント	対象デバイス
480px	スマホ（小さい画面）
768px	タブレット（よく使う基準）
1024px	PC

💡 迷ったら 768px を使おう！
768px はタブレットとスマホの境目として最もよく使われるブレークポイントです。まずはこの1つだけ覚えれば十分です。

PC/スマホの表示の違い

同じHTMLでも、画面幅によってレイアウトが変わります:

768px以上（PC・タブレット）: カードが横並び（flex-direction: row）
768px未満（スマホ）: カードが縦並び（flex-direction: column）

💡 flex-direction について：
flex-direction: column は要素を縦並びにするプロパティです。レッスン5で学んだ display: flex の応用です。column で縦並び、row（デフォルト）で横並びになります。

/* スマホ向け（基本スタイル） */
.card-list {
  display: flex;
  flex-direction: column;
}

/* PC向け（幅が広いときだけ横並びにする） */
@media (min-width: 768px) {
  .card-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

▶ プレビュー

💻 やってみよう！

VS Codeで my-practice フォルダの index.html と style.css を開き、以下のように書き換えてください。書き終えたら index.html をダブルクリックしてブラウザで確認しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブの練習</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header class="header">
      <h1>わたしのプロフィール</h1>
    </header>

    <div class="card-list">
      <div class="card">趣味：ゲーム</div>
      <div class="card">好きな食べ物：ラーメン</div>
      <div class="card">好きな教科：数学</div>
    </div>
  </body>
</html>

style.css

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f5f5f5;
}

.header {
  background-color: #3a86ff;
  color: white;
  padding: 16px 24px;
  text-align: center;
}

/* スマホ向け：縦並び */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.card {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  padding: 20px;
}

/* PC向け：横並び */
@media (min-width: 768px) {
  .card-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card {
    width: calc(33% - 12px);
  }
}

▶ プレビュー

ブラウザのウィンドウ幅を広げたり狭めたりして、カードの並び方が変わることを確認しましょう。

📱 開発者ツールでスマホ表示を確認する方法:
1. F12 を押して開発者ツールを開く
2. 左上の「デバイスツールバー」アイコン（📱スマホ+タブレットの形）をクリック
3. 上部のドロップダウンから「iPhone」「Pixel」などのデバイスを選択
4. 幅を手動で変えて、ブレークポイント（768px）前後の動作を確認

💡 これでスマホを持っていなくても、スマホでの見え方を確認できます！

✅ 確認方法：
・ウィンドウ幅が 768px 以上：カードが横並びになります
・ウィンドウ幅が 768px 未満：カードが縦並びになります
ウィンドウを半分くらいの幅に縮めると変化が確認できます。

💡 calc() について：
コード例の width: calc(33% - 12px) は「33%から12pxを引いた幅」という意味です。calc() はCSSで計算式を書く関数です。

⚠️ よくあるミス

viewport の meta タグを書き忘れる：<meta name="viewport" content="width=device-width, initial-scale=1.0"> がないと、スマホでもPC用の幅で表示されてしまいます。HTMLの <head> に必ず書きましょう。
@media の括弧やコロンを書き間違える：@media (max-width: 600px) { } の形を正確に書きましょう。括弧やコロンが抜けるとスタイルが効きません。
max-width と min-width を逆に使う：max-width: 600px は「600px以下」、min-width: 768px は「768px以上」です。スマホ向けに書きたいのにPC向けになっていないか確認しましょう。