第4回：横に並べるCSS（Flexbox入門）

3月 24, 2026

授業目次

今日のゴール

  • 要素を横に並べられるようになる
  • 要素の位置を自由にコントロールできるようになる
  • Flexboxの基本を理解する
  • レイアウトが思い通りに作れるようになる

1. 軽い復習

前回は

  • classで見た目を分ける
  • CSSは誰に当たるかを意識する

ことを学びました。

今日はその続きとして

配置（レイアウト）をコントロールする

ことを学びます。

2. 最初の問題

縦に並んでしまう

HTML

<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: lightblue;
}

結果

A
B
C

疑問

横に並べたい

3. 解決

HTML

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

CSS

.container {
  display: flex;
}

結果

A B C

4. ここで理解すること

display: flex をつけた親が、子の並び方を決める

5. 次の問題

横に並んだけど、くっついている

解決

.container {
  display: flex;
  gap: 20px;
}

学ぶこと

gap

要素同士の間隔を作る

6. 次の問題

真ん中に寄せたい（横）

解決

.container {
  display: flex;
  justify-content: center;
}

学ぶこと

justify-content

横方向の配置を決める

よく使う

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;

7. 次の問題

縦の真ん中にしたい

解決

.container {
  display: flex;
  align-items: center;
}

学ぶこと

align-items

縦方向の配置を決める

8. ここで整理

Flexboxはまずこれだけ

  • display: flex
  • justify-content（横）
  • align-items（縦）

9. 次の問題

カードを横に並べたい

HTML

<div class="container">
  <div class="card">サービス</div>
  <div class="card">商品</div>
  <div class="card">お問い合わせ</div>
</div>

CSS

.container {
  display: flex;
  gap: 20px;
}
.card {
  width: 200px;
  padding: 20px;
  background: white;
  border-radius: 10px;
}

10. 次の問題

左右いっぱいに広げたい

解決

.container {
  display: flex;
  justify-content: space-between;
}

11. 次の問題

縦に並べたい

解決

.container {
  display: flex;
  flex-direction: column;
}

学ぶこと

flex-direction

並ぶ方向を変える

12. まとめ

Flexboxは

親が子の配置をコントロールする仕組み

13. 実践

HTML

<div class="container">  <div class="card">
    <h2>サービス</h2>
    <p>Web制作</p>
  </div>  <div class="card">
    <h2>商品</h2>
    <p>デザイン</p>
  </div>  <div class="card">
    <h2>お問い合わせ</h2>
    <p>お気軽に</p>
  </div></div>

CSS

body {
  background: #f0f0f0;
  font-family: sans-serif;
}.container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
}.card {
  width: 200px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  text-align: center;
}

14. 今日の本質

CSSは

「どこに配置するか」をコントロールする技術

15. 宿題

宿題1

3つのカードを横並びにする

宿題2

配置を変える

  • 左寄せ
  • 中央寄せ
  • 右寄せ

宿題3

縦並びにする

← 週一覧に戻る