レッスン5：レイアウトの基礎——Flexboxで横並びと整列を作る

このレッスンで学ぶこと

Flexboxの基本的な仕組みを理解する
display: flex で要素を横並びにできる
justify-content と align-items で整列を制御できる
gap で要素間の余白を調整できる
横並びナビゲーションとカード並びを実習で作る

レッスン4では、ボックスモデルを学びました。各要素は四角いボックスとして並び、padding・border・marginで余白や枠線を調整できることがわかりました。このレッスンでは、それらのボックスを「並べる」「整列する」ための仕組みであるFlexboxを学びます。Flexboxは、Webページのレイアウトを組むうえで現在もっとも使われている技術です。

Flexboxとは

Flexboxは、CSSのレイアウトの仕組みのひとつで、正式名称は「Flexible Box Layout」です。「フレキシブル（柔軟）に並べられるボックス」という意味で、要素を横並び・縦並びにしたり、中央寄せにしたり、余白を均等に配分したりが、わずかなコードで実現できます。

Flexboxを使うには、並べたい要素を囲む「親要素」に display: flex を指定します。これだけで、中の子要素が横並びになります。「親要素にレイアウトの方針を書き、子要素は自動的に並ぶ」のが基本の発想です。

💡 ポイント Flexboxは「親要素にdisplay: flexを書く」ところから始まります。「flex」は親に書くもの、と覚えておくと混乱が減ります。

ステップ1：横並びを作る

実習しながら学びましょう。my-website フォルダの index.html の <body> 内に、次のHTMLを追加してください（既存の自己紹介ページの内容はそのままにし、</body> の直前に書き足します）。

<h2>横並びの練習</h2>
<div class="row">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

そして style.css の最後に、次のCSSを追加してください。

.row {
  display: flex;
}

.box {
  background-color: #2c3e50;
  color: #fff;
  padding: 20px;
  margin-right: 10px;
}

保存して再読み込みしてみてください。A・B・Cの3つの濃紺色のボックスが、横並びで表示されるはずです。display: flex を親要素 .row に指定するだけで、中の .box が自動的に横に並びます。

ためしに、.row から display: flex を一時的に外してみてください。.box は元のブロック要素に戻り、縦に積み上がって表示されます。display: flex の効果がはっきりわかります。

ステップ2：要素間の余白をgapで作る

先ほどの例では .box に margin-right: 10px を付けて余白を作りました。Flexboxには専用の余白プロパティ gap があり、こちらの方が便利です。

style.css を以下に書き換えてください。

.row {
  display: flex;
  gap: 10px;
}

.box {
  background-color: #2c3e50;
  color: #fff;
  padding: 20px;
}

.box から margin-right を削除し、代わりに .row に gap: 10px を指定しています。結果は同じく10pxの余白付きで横並びになりますが、こちらの方が記述がわかりやすく、「要素間の余白」という意図が明確に伝わります。

📝 補足 gap は要素「間」の余白だけを指定でき、最初と最後の要素の外側には余白が付きません。一方 margin-right を全要素に付けると、最後の要素の右側にも余分な余白が付いてしまいます。それを避けるための工夫が要らないのが gap の便利な点です。

主軸（main axis）と交差軸（cross axis）

Flexboxを使いこなすうえで、軸の概念を覚えておくと整理しやすくなります。Flexboxには2つの軸があります。

主軸（main axis）：要素が並ぶ方向。デフォルトでは横方向（左から右）
交差軸（cross axis）：主軸に直交する方向。デフォルトでは縦方向

主軸の整列は justify-content で、交差軸の整列は align-items で制御します。これから学ぶプロパティは、この2つのどちらかに対応しています。

🔰 初学者の方へ 最初は「justify-contentが横方向、align-itemsが縦方向」と覚えれば十分です。デフォルトの横並びの状態では、これで合っています。本格的な縦並びを使うようになったら、軸の話に立ち返ってみてください。

ステップ3：justify-contentで主軸の整列を制御する

justify-content プロパティで、主軸（横方向）の整列方法を制御できます。よく使う値を5つ紹介します。

flex-start：左寄せ（デフォルト）
center：中央寄せ
flex-end：右寄せ
space-between：両端を端に寄せ、間を均等に空ける
space-around：要素の左右に均等な余白を作る

style.css の .row に justify-content を追加してみましょう。

.row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

保存して再読み込みすると、3つのボックスが画面中央にまとまって表示されます。値を flex-end や space-between に変えて、どう変わるかを確かめてみてください。

💡 ポイント space-between は、ナビゲーションメニューでロゴを左、メニューを右に配置するときに非常によく使われます。Webサイト制作で必ず出てくるパターンです。

ステップ4：align-itemsで交差軸の整列を制御する

align-items プロパティで、交差軸（縦方向）の整列方法を制御できます。値はjustify-contentと似ています。

stretch：伸ばして揃える（デフォルト）
flex-start：上揃え
center：中央揃え
flex-end：下揃え

子要素の高さがバラバラの場合に、align-items の効果がわかりやすく出ます。試しに、HTMLを次のように書き換えてみてください。

<div class="row">
  <div class="box">A</div>
  <div class="box tall">B<br>2行</div>
  <div class="box">C</div>
</div>

.tall に高さを与える必要はありません。<br> で改行して2行にすることで、高さを増やしています。

CSSも次のように整えます。

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 200px;
  background-color: #ecf0f1;
}

.row 自体に高さ200pxと薄い背景色を付けました。中の3つのボックスが、行の中央で縦方向に揃うはずです。align-items: flex-start や flex-end に変えると、上揃え・下揃えに変わります。

ステップ5：実習①——横並びナビゲーションを作る

ここまで学んだことを使って、実用的なナビゲーションを作ってみましょう。Webサイトの上部にあるメニュー部分です。

index.html の冒頭、<body> 直後あたりに次のHTMLを追加してください。

<nav class="nav">
  <div class="nav-logo">My Website</div>
  <ul class="nav-menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">プロフィール</a></li>
    <li><a href="#">作品紹介</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

<nav> は「ナビゲーション領域」を表すセマンティックなタグです。href="#" はリンク先がまだ決まっていない仮のリンクで、レッスン7で複数ページを作るときに本物のリンクに書き換えます。

style.css の最後に次のCSSを追加してください。

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  padding: 16px 24px;
}

.nav-logo {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: #fff;
  text-decoration: none;
}

.nav-menu a:hover {
  text-decoration: underline;
}

新しいプロパティが3つ出てきました。

list-style: none：リストの中点（黒丸）を非表示にする
text-decoration: none：リンクのデフォルトの下線を消す
a:hover：マウスを乗せたときの状態を指定する疑似クラス

保存して再読み込みすると、濃紺の帯の左にロゴ、右にメニューが並んだ、Webサイトらしいナビゲーションが完成します。マウスを乗せると下線が出ることも確認してください。

ステップ6：実習②——カードを横並びにする

レッスン4で作ったカードを、3つ並べてみましょう。index.html の自己紹介の続きあたりに、次のHTMLを追加します。

<h2>趣味の紹介</h2>
<div class="card-list">
  <div class="card">
    <h3>登山</h3>
    <p>休日は近隣の山に登りに行きます。最近のお気に入りは高尾山です。</p>
  </div>
  <div class="card">
    <h3>映画鑑賞</h3>
    <p>ジャンルを問わず、月に5本ほど映画を見ます。最近はドキュメンタリーが好みです。</p>
  </div>
  <div class="card">
    <h3>パン作り</h3>
    <p>休日の朝はパンを焼きます。シンプルなフランスパンが定番です。</p>
  </div>
</div>

style.css の .card のスタイルはレッスン4で書いてあるので、新たに .card-list だけを追加します。

.card-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  min-width: 240px;
}

ここで2つの新しい要素が出てきました。

flex-wrap: wrap は、子要素が親の幅に収まらないときに自動で折り返す指定です。ウィンドウを狭くしても、3つのカードが2行や1列に折り返されて、はみ出さなくなります。

flex: 1 は子要素側に書く指定で、「親の余白を均等に分け合って、自分も柔軟に伸び縮みする」という意味です。これで3つのカードが同じ幅で並びます。

min-width: 240px は、カードがこれ以上狭くならない最小幅を指定しています。狭い画面では flex-wrap が効いて、カードが自動的に下の行に折り返されます。

💡 ポイント flex-wrap: wrap と min-width の組み合わせは、レスポンシブデザインの基本パターンです。次のレッスン6で本格的にレスポンシブを学びますが、Flexboxだけでもある程度は画面幅に対応できます。

Gridという選択肢

CSSにはFlexbox以外にも、もっと複雑な格子状のレイアウトが組める「Grid」という仕組みもあります。Flexboxが「1次元（横一列・縦一列）」のレイアウトに適しているのに対し、Gridは「2次元（行と列）」のレイアウトに適しています。

入門段階では、まずFlexboxを使いこなせるようになることを優先し、Gridはあとから学ぶ余地を残しておけば十分です。本コースではFlexboxに集中します。

📖 もっと詳しく Flexboxは「主軸方向に並べて整える」のが得意で、ナビゲーション、カード並び、フォームの入力欄、ボタン群など、ほとんどのレイアウトをカバーできます。Gridは「ダッシュボード」や「雑誌レイアウト」のような縦横の配置を細かく制御したいときに真価を発揮します。

まとめ

このレッスンでは、以下のことを学びました。

Flexboxは要素を並べて整えるためのCSSの仕組みである
親要素に display: flex を指定することから始まる
gap で要素間の余白を、justify-content で主軸の整列を、align-items で交差軸の整列を制御する
flex-wrap: wrap で要素を折り返せる
横並びナビゲーションとカード並びがFlexboxの代表的な使い方である

次のレッスンでは、メディアクエリを使って画面幅に応じてレイアウトが変わる「レスポンシブデザイン」を学びます。スマートフォンでもきれいに表示されるページに育てていきましょう。

確認クイズ

このレッスンの理解度をチェックしましょう。