🚀 プログラミング学習

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

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

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

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

<meta name="viewport">

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

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

メディアクエリ：@media

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

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

/* 画面幅が 600px 以下のとき（スマホ向け） */
@media (max-width: 600px) {
  .card {
    width: 100%;
  }
}
条件意味
max-width: 600px幅が600px以下のとき（スマホ向け）
min-width: 768px幅が768px以上のとき（タブレット・PC向け）

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

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

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

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

💻 やってみよう！

<!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>
* { 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);
  }
}

ブラウザのウィンドウ幅を広げたり狭めたりして、カードの並び方が変わることを確認しましょう。スマホ表示は開発者ツール（F12）の「デバイスモード」ボタンで確認できます！

📌 まとめ

🚀 次のコースへ

CSSコースはこれで完了です！次はJavaScriptコースで、ページに動きをつける方法を学びましょう！ 🎉

🎉 CSSコース完了！次は JavaScript でページに動きをつけよう。JavaScriptコースへ →
🔍 もっと調べてみよう：「CSS レスポンシブ メディアクエリ」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
JavaScriptコースを始める →
← CSSコース一覧に戻る