🚀 プログラミング学習

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

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

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

📝 Flexboxのプロパティ

display: flex

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

.container {
  display: flex;
}

横方向の揃え：justify-content

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

縦方向の揃え：align-items

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

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

折り返し：flex-wrap

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

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

💻 やってみよう！

<!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>
* { 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子要素を横並びにする—
justify-content横方向の揃えcenter / space-between
align-items縦方向の揃えcenter / flex-start
flex-wrap折り返しの設定wrap
gap子要素同士の間隔16px など

🚀 次のレッスンへ

次のレッスンでは、スマートフォンでも見やすいレスポンシブデザインを学びます！

🔍 もっと調べてみよう：「CSS flexbox 使い方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
← CSSコース一覧に戻る