Chapter 3: レイアウトとレスポンシブ対応

Web ページはスマホ・タブレット・PC などさまざまな画面サイズで閲覧されます。
この章では，レイアウトを整えるための CSS の考え方と，レスポンシブ対応の基本を学びます。

ボックスモデルを理解する

すべての要素は「箱」として扱われます。
箱は コンテンツ，パディング（内側の余白），ボーダー，マージン（外側の余白） で構成されます。

* {
  box-sizing: border-box;
}

box-sizing: border-box; を指定すると，幅や高さの計算が直感的になり，レスポンシブデザインで扱いやすくなります。

Flexbox で横並びレイアウト

Flexbox を使うと，コンテンツの並び順や比率を柔軟に調整できます。

.profile {
  display: flex;
  gap: 24px;
  align-items: center;
}

.profile img {
  width: 160px;
  border-radius: 50%;
}

HTML 例：

<section class="profile">
  <img src="images/profile.jpg" alt="メンバーの写真" />
  <div>
    <h2>山田 花子</h2>
    <p>フロントエンド担当。UI/UX の改善が得意です。</p>
  </div>
</section>

ブラウザ幅を狭めると画像とテキストが押しつぶされることが分かるはずです。次のレスポンシブ対応で調整します。

メディアクエリでレスポンシブ対応

画面幅に応じてスタイルを切り替えるにはメディアクエリを使います。

@media (max-width: 600px) {
  .profile {
    flex-direction: column;
    text-align: center;
  }

  .profile img {
    width: 120px;
  }
}

幅が 600px 以下になると縦並びに切り替わります。スマホ表示でレイアウトが崩れないか確認しましょう。

グリッドレイアウトでカードを並べる

イベント紹介など，複数のカードを並べたい場合は CSS Grid が便利です。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

HTML 例：

<section>
  <h2>イベント一覧</h2>
  <div class="cards">
    <article class="card">
      <h3>ステージライブ</h3>
      <p>学生バンドによるライブパフォーマンス。</p>
    </article>
    <article class="card">
      <h3>展示ブース</h3>
      <p>サークルの作品展示や体験コーナー。</p>
    </article>
    <article class="card">
      <h3>フードストリート</h3>
      <p>人気店とコラボした限定メニューを提供。</p>
    </article>
  </div>
</section>

auto-fit と minmax を組み合わせることで，カード数に応じて列数が自動調整されます。

練習課題

profile セクションをカードの横に並べ，PC では左右，スマホでは縦並びになるよう調整してみましょう。
cards の中に写真を追加し，高さが揃うように工夫してみましょう。（ヒント：display: flex; flex-direction: column;）
ページ全体に余白（padding）を追加し，広い画面でも中央にコンテンツが集まるようにしてみましょう。

次へ進む

レイアウトができたら，Chapter 4: コンポーネントとフォームに進み，実際に使いやすい UI 要素を作っていきます。