レッスン10: CSSで自由自在！Flexboxの基本をマスターしよう
Flexboxを使って要素を柔軟に配置する方法を学びます。
🎯 学習目標
- Flexboxの基本的な概念と使い方を理解する
- 要素を横並びにしたり、中央揃えにする方法を身につける
- justify-contentとalign-itemsプロパティの使い分けができる
- 実践として、ナビゲーションバーやカードレイアウトを作ってみる
📚 レッスン
1. Flexboxとは何か
Flexbox（フレックスボックス）は、要素を柔軟に並べて配置するためのCSSレイアウト方法です。Flexboxを使うと驚くほど簡単に要素を並べることができます。
Flexboxでできること
- 要素を横並びにする
- 要素を中央に配置する
- 要素同士の間隔を自動調整する
- 要素の高さを揃える
- 画面サイズに応じて柔軟に配置を変える
2. Flexboxの基本構造
Flexboxを使うには、まず親要素（フレックスコンテナ）に display: flex を指定します。
.container {
display: flex;
}<div class="container">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
</div>これだけで、子要素（フレックスアイテム）が横並びになります！
デモ：基本のFlexbox
アイテム1
アイテム2
アイテム3
Flexboxの用語
| 用語 | 意味 |
|---|---|
| フレックスコンテナ | display: flex が指定された親要素 |
| フレックスアイテム | フレックスコンテナの中にある子要素 |
| 主軸（メイン軸） | 要素が並ぶ方向（初期値は横方向） |
| 交差軸（クロス軸） | 主軸に垂直な方向（初期値は縦方向） |
3. よく使うFlexboxプロパティ
justify-content: 主軸（横方向）の揃え方
要素を横方向のどこに配置するかを決めます。
.container {
display: flex;
justify-content: flex-start; /* 左寄せ（初期値） */
}A
B
C
左寄せ
.container {
display: flex;
justify-content: center; /* 中央揃え */
}A
B
C
中央揃え
.container {
display: flex;
justify-content: space-between; /* 両端揃え */
}A
B
C
両端揃え
align-items: 交差軸（縦方向）の揃え方
要素を縦方向のどこに配置するかを決めます。コンテナの高さが十分にある場合に効果が出ます。
異なる高さの要素をどのように揃えるかを見てみましょう
.container {
display: flex;
align-items: flex-start; /* 上揃え */
height: 120px;
}A
B
高さ
大
高さ
大
C
上揃え
.container {
display: flex;
align-items: center; /* 中央揃え */
height: 120px;
}A
B
高さ
大
高さ
大
C
中央揃え
.container {
display: flex;
align-items: flex-end; /* 下揃え */
height: 120px;
}A
B
高さ
大
高さ
大
C
下揃え
gap: 要素同士の間隔
要素同士の間隔を簡単に調整できます。
.container {
display: flex;
gap: 20px; /* 要素同士の間隔を20pxに */
}flex-wrap: 折り返し
子要素が親要素の幅を超えた場合の折り返し方法を指定します。特にレスポンシブデザインで重要です。
.container {
display: flex;
flex-wrap: nowrap; /* 折り返しなし（初期値） */
width: 300px;
}アイテム1
アイテム2
アイテム3
アイテム4
折り返しなし（横スクロールが発生）
.container {
display: flex;
flex-wrap: wrap; /* 折り返しあり */
width: 300px;
}アイテム1
アイテム2
アイテム3
アイテム4
折り返しあり（自動的に次の行へ）
レスポンシブデザインのポイント：
flex-wrap: wrap を使うと、画面サイズが小さくなった時に自動的に要素が折り返されるため、スマートフォンなど小さな画面でも適切に表示できます。
今日のまとめ
| プロパティ | 説明 | よく使う値 |
|---|---|---|
display: flex |
親要素に指定、Flexboxを有効にする | flex |
justify-content |
横方向の揃え方を指定 | center, space-between, space-around |
align-items |
縦方向の揃え方を指定 | center, flex-start, flex-end |
gap |
要素同士の間隔を指定 | 10px, 20px など |
flex-wrap |
要素を折り返すかどうかを指定 | wrap, nowrap |
Flexboxを使うと、並びの調整や中央揃えがとても簡単にできるように!
これからのCSS学習でも多く登場するので、ぜひ使いこなしましょう！
これからのCSS学習でも多く登場するので、ぜひ使いこなしましょう！
📚 リファレンス
このレッスンで学んだFlexboxプロパティの詳細については、リファレンスページで確認できます。
✍️ 演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。
右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。
演習1：ナビゲーションバー
横並びのナビゲーションバーを作ってみましょう。
<style>
.nav {
display: flex;
/* ここにjustify-contentを指定してみましょう */
background-color: #333;
padding: 15px;
}
.nav a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 8px 16px;
border-radius: 4px;
}
.nav a:hover {
background-color: #555;
}
</style>
<nav class="nav">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
</nav>デモ：ナビゲーションバー
やってみよう！
- 右側のエディタにサンプルコードを貼り付けて実行する
justify-contentをcenterに設定してみるjustify-contentをspace-aroundに変更してみる
ポイント：インラインエディタのLargeボタンを押すことで、エディタの横幅が広がり、確認がしやすくなります
演習2：カード型レイアウトのデザインを整えよう
カードレイアウトを整えてみましょう。
<style>
.card-container {
display: flex;
gap: 20px; /* カード同士の間隔 */
justify-content: center;
}
.card {
background-color: #f8f9fa;
padding: 20px;
width: 200px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.card h3 {
color: #333;
margin-bottom: 10px;
}
.card p {
color: #666;
line-height: 1.5;
}
</style>
<div class="card-container">
<div class="card">
<h3>カード1</h3>
<p>ここに簡単な説明文が入ります。Flexboxでキレイに並んでいます。</p>
</div>
<div class="card">
<h3>カード2</h3>
<p>2つ目のカードです。高さが自動的に揃います。</p>
</div>
<div class="card">
<h3>カード3</h3>
<p>3つ目のカードです。間隔もバッチリです。</p>
</div>
</div>デモ：カードレイアウト
カード1
ここに簡単な説明文が入ります。Flexboxでキレイに並んでいます。
カード2
2つ目のカードです。高さが自動的に揃います。
カード3
3つ目のカードです。間隔もバッチリです。
やってみよう！
- 右側のエディタにサンプルコードを貼り付けてください。横幅が狭いので崩れて表示されます
flex-wrap: wrap;を追加して、狭い画面でもレイアウトが崩れないようにしましょう
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>フレックスボックスのカードレイアウト</title>
<style>
.card-container {
display: flex;
gap: 20px; /* カード同士の間隔 */
justify-content: center;
flex-wrap: wrap; /* 画面幅が狭くなったら折り返す */
}
.card {
background-color: #f8f9fa;
padding: 20px;
width: 150px; /* 幅を小さくしてみる */
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.card h3 {
color: #333;
margin-bottom: 10px;
}
.card p {
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>カード1</h3>
<p>ここに簡単な説明文が入ります。Flexboxでキレイに並んでいます。</p>
</div>
<div class="card">
<h3>カード2</h3>
<p>2つ目のカードです。高さが自動的に揃います。</p>
</div>
<div class="card">
<h3>カード3</h3>
<p>3つ目のカードです。間隔もバッチリです。</p>
</div>
<div class="card">
<h3>カード4</h3>
<p>4つ目のカードを追加しました。画面幅が狭いとき折り返します。</p>
</div>
</div>
</body>
</html>解説
- レスポンシブなカードレイアウト：
.card-containerにdisplay: flexとflex-wrap: wrapを指定することで、画面幅が狭くなった時に自動的にカードが折り返されます- この組み合わせがレスポンシブデザインの鍵となります
- 間隔の設定：
gap: 20pxを使用して、カード間に均等な間隔を設定しています- 従来の方法（marginを使用）よりも簡潔にコードを書くことができます
- 中央揃え：
justify-content: centerによって、カードが中央に配置されます- 画面サイズが変わっても、常にコンテンツが中央に表示されます
✅ 理解度チェック
クイズに正解すると、このレッスンは「完了済み」として記録されます。
📘 次回予告
次回（レッスン11）はWebページを自在にレイアウト！CSS positionの基礎をマスターについて学びます。position プロパティを使って、要素を自由に配置する方法を身につけましょう。