レッスン5：Flexboxでレイアウト

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

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

display: flexで子要素を横並びにできます。
justify-contentで横方向の揃え方を指定できます。
align-itemsで縦方向の揃え方を指定できます。
flex-directionで並ぶ方向を変えられます。

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

HTML要素はすべて content → padding → border → margin の4層のボックスでできている
padding は内側の余白、margin は外側の余白
box-sizing: border-box を使うと幅の計算がわかりやすくなる

📖 導入 — 横並びにするのって難しい？

CSSを使い始めると、「要素を横に並べたい」「中央に揃えたい」という場面がすぐに出てきます。Flexbox という仕組みのおかげで今はとても簡単にできます。ナビゲーションバー、カードの横並び、中央揃えのボタン…Flexboxを覚えると、こういったレイアウトがスラスラ作れるようになります！

📝 Flexboxのプロパティ

💡 親要素・子要素とは？
HTMLでは、タグの中に別のタグを入れることができます。外側のタグを「親要素」、内側のタグを「子要素」と呼びます。
例：<div class="container">（親要素）の中に <div class="item">（子要素）が入っている構造です。
display: flex は「親要素」に指定します。

親要素に指定すると、その子要素が横並びになります。

💡 用語：display: flex を指定した要素を フレックスコンテナ、その中の子要素を フレックスアイテム と呼びます。

.container {
  display: flex;
}

▶ プレビュー

⚠️ display: flex は親要素（コンテナ）に書く！

❌ よくある間違い: 横並びにしたい要素自体に flex を書いてしまう
✅ 正しい: 横並びにしたい要素を囲む親に flex を書く

子要素に display: flex を書いても横並びにはなりません。必ず親要素に書きましょう。

横方向の揃え：

値	効果
`flex-start`	左揃え（デフォルト）
`flex-end`	右揃え
`center`	中央揃え
`space-between`	両端に配置し、間を均等に空ける
`space-around`	各要素の左右に均等な余白を付ける

縦方向の揃え：

値	効果
`stretch`	親の高さに合わせて伸ばす（デフォルト）
`center`	縦方向に中央揃え
`flex-start`	上揃え
`flex-end`	下揃え

💡 justify-content: center と align-items: center を両方指定すると、要素を上下左右の中央に配置できます。

▶ プレビュー

折り返し：

flex-wrap: wrap を指定すると、幅に収まらない要素が次の行に折り返されます。

.container {
  display: flex;
  flex-wrap: wrap;
}

並ぶ方向：

デフォルトは横並び（row）ですが、column を指定すると縦並びになります。

.container {
  display: flex;
  flex-direction: row;    /* 横並び（デフォルト） */
}

.container-vertical {
  display: flex;
  flex-direction: column; /* 縦並び */
}

.container {
  display: flex;
  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">
    <title>Flexboxの練習</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav class="navbar">
      <span>ホーム</span>
      <span>プロフィール</span>
      <span>お問い合わせ</span>
    </nav>

    <div class="card-list">
      <div class="card">カード1</div>
      <div class="card">カード2</div>
      <div class="card">カード3</div>
      <div class="card">カード4</div>
    </div>
  </body>
</html>

style.css

* { box-sizing: border-box; }

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

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3a86ff;
  padding: 12px 24px;
  color: white;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
}

.card {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  padding: 24px;
  width: 200px;
  text-align: center;
}

▶ プレビュー

💡 gap は Flexbox の子要素同士の間隔を指定するプロパティです。ウィンドウの幅を狭めると、カードが折り返されるのも確認してみてください！

⚠️ よくあるミス

子要素に display: flex を書いてしまう：display: flex は横並びにしたい要素の親要素に指定します。子要素に書いても横並びになりません。
justify-content と align-items の軸を混同する：justify-content は横方向（主軸）、align-items は縦方向（交差軸）の揃え方です。「justify＝横、align＝縦」と覚えましょう。
flex-wrap を忘れて要素がはみ出す：子要素の合計幅が親要素より大きいと、はみ出して横スクロールが出ます。flex-wrap: wrap を親要素に追加すると、収まらない要素が次の行に折り返されます。

📌 まとめ

プロパティ	役割	よく使う値
`display: flex`	子要素を横並びにする	—
`justify-content`	横方向の揃え	`center` / `space-between`
`align-items`	縦方向の揃え	`center` / `flex-start`
`flex-wrap`	折り返しの設定	`wrap`
`flex-direction`	並ぶ方向	`row` / `column`
`gap`	子要素同士の間隔	`16px` など

✅ display: flex は親要素に指定する
✅ justify-content: center + align-items: center で上下左右の中央揃えができる

🎮 このレッスンで学んだ Flexbox を試してみよう！

justify-content や align-items をリアルタイムで操作できる無料ツールがあります。

Flexbox ビジュアライザー →