第6章：モダンなレイアウトを実現するFlexbox

かつてのWeb制作では、要素を横に並べるために「float」というプロパティを使っていましたが、今やその手法は不要です。現代の標準は、より直感的で強力な「Flexbox」。これを使えば、複雑なレイアウトも数行のコードで実現できます。

Flexboxの基本概念：コンテナとアイテム

Flexboxを使いこなすための第一歩は、親子関係を理解することです。Flexboxは、以下の2つの要素で構成されます。

Flexコンテナ（親要素）： 外側の箱。ここに「並べ方」の命令を出します。
Flexアイテム（子要素）： 中身の箱。親の命令に従って並びます。

1. コンテナとアイテム：親子関係のルール（クリックで詳細を表示）

CSS（特にFlexboxやGrid）では、要素を「親」と「子」の関係で捉えることが非常に重要です。

コンテナ（親要素）

役割： 中身をまとめる「外枠」や「箱」です。
命令： 「中身を横に並べなさい」「真ん中に寄せなさい」といった、並び方のルールを決めます。
例： display: flex; を指定するのはこのコンテナ側です。

アイテム（子要素）

役割： コンテナの中に入っている「中身」や「具材」です。
命令： 親の決めたルールに従って並びますが、「自分だけ少し大きくしたい」といった個別の調整も可能です。
条件： コンテナのすぐ内側にある要素（直系の子）だけが「アイテム」としての力を発揮します。

🍱 たとえ話：お弁当箱

コンテナ： お弁当箱そのもの。「おかずをどう詰めるか」という枠組み。

アイテム： 卵焼きや唐揚げなどのおかず。箱のルールに従って並びます。

スイッチを入れる魔法の1行

Flexboxを有効にするのは驚くほど簡単です。親要素（Flexコンテナ）に対して、以下のプロパティを指定するだけです。

.container {
  display: flex; /* これでFlexboxがスタート！ */
}

これだけで、縦に並んでいた子要素たちが自動的に横一列に整列します。

2. なぜ .container と「.」を書くのか（クリックで詳細を表示）

CSSにおいて、名前の前の記号は「その名前が何を指しているか」をブラウザに伝えるための合図（セレクタ）です。

「.」は「クラス名」のしるし

.container のように「.（ドット）」で始まる名前は、「HTMLの中で class="..." と書いた場所を探してね」という命令になります。これをクラスセレクタと呼びます。

CSSでの書き方	指しているもの	HTMLでの書き方	特徴
`.`container	クラス (Class)	`<div class="container">`	何度でも使える。最もよく使う。
`#`container	ID	`<div id="container">`	1ページに1回だけ。特別な場所用。
container (記号なし)	タグ名	`<container>`	HTMLタグそのもの。（通常はdivやp）

なぜ記号が必要なのか？

もし記号がないと、ブラウザはそれが「HTMLに最初からあるタグ（divやpなど）」なのか、「あなたが自分で名付けたオリジナルの名前」なのか区別がつきません。

// 記号なしの場合
container { ... }
→ ブラウザは「<container>という名前のタグを探そう」としますが、そんなタグは存在しないため無視されます。
// ドットありの場合
.container { ... }
→ ブラウザは「OK、class="container"と書かれた場所すべてに適用するよ！」と正しく理解してくれます。

自由自在に整列させる

親コンテナにプロパティを追加するだけで、アイテムを右に寄せたり、中央に置いたり、均等に並べたりできます。特によく使う2つのプロパティを覚えましょう。

1. 左右の配置：justify-content

主軸（横方向）の配置を決めます。

center：中央揃え
space-between：両端に寄せて、間を均等に空ける
flex-end：右寄せ（終点寄せ）

.container {
  display: flex;
  justify-content: center; /* 簡単に中央揃えができる！ */
}

3. display: flex; と justify-content の関係（クリックで詳細を表示）

1. display: flex; は「スイッチ」

親要素に display: flex; と書いた瞬間、その箱は「Flexコンテナ」に切り替わり、以下のデフォルトの物理法則（初期値）が自動的に適用されます。

並ぶ向き： 横一列になる（flex-direction: row）
詰める方向： 左端に寄る（justify-content: flex-start）
高さの扱い： 親の高さに合わせて目一杯広がる（align-items: stretch）

例えば、縦に並んでいた3つの要素が、これ1行で「左詰めの横並び」に変わります。この劇的な変化こそが、スイッチが入った証拠です。

2. justify-content などは「コントローラー」

display: flex; で始動したレイアウトを、自分の思い通りに微調整するのが justify-content などの役割です。

プロパティ	役割（主軸方向の制御）
`justify-content: center;`	中央に集める
`justify-content: space-between;`	両端に寄せて、間を均等に空ける
`justify-content: flex-end;`	右端（終点）に寄せる

なぜ「セット」だと思われるのか

ブログでよくある「ボタンを真ん中に置きたい」「メニューを等間隔に並べたい」という要望は、デフォルト（左詰め）のままでは叶いません。そのため、実務上は必ずと言っていいほどセットで使用されるのです。

2. 上下の配置：align-items

交差軸（縦方向）の配置を決めます。高さがバラバラな要素も一瞬で揃えられます。

center：上下中央揃え
stretch：親の高さに合わせて引き伸ばす（デフォルト）

実践：3つの要素を横に並べて左に寄せる（コードと図解）

「親要素（コンテナ）に命令を出し、3つの子要素（アイテム）を左側に整列させる」最も基本的なパターンです。

【ブラウザでの表示イメージ】

アイテム 1

アイテム 2

アイテム 3

※点線が親要素（コンテナ）、中の青いボックスが子要素（アイテム）です。

【使用するコード】

HTML:

<div class="flex-container">
  <div class="item">アイテム 1</div>
  <div class="item">アイテム 2</div>
  <div class="item">アイテム 3</div>
</div>

CSS:

.flex-container {
  display: flex;               /* Flexboxを有効にする */
  justify-content: flex-start; /* 左端（始点）に寄せる ※デフォルト設定 */
  gap: 10px;                   /* アイテム同士の隙間を10pxあける */
  
  /* 以下は見やすくするための装飾 */
  background-color: #f3f4f6;
  padding: 15px;
  border: 2px dashed #9ca3af;
}

.item {
  background-color: #4f46e5;
  color: white;
  padding: 20px;
  border-radius: 4px;
}

🔬 月影の分析ポイント

justify-content: flex-start; は、実は書かなくてもデフォルトで適用されます。しかし、明示的に書くことで「あえて左に寄せているんだな」とコードの意図が明確になります。ここを center に書き換えるだけで、3つの箱がセットで中央に移動します。

月影

日々の雑感

【CSS入門】Flexboxの使い方を完全解説！display: flex;の仕組みと具体例