HTML+CSS レイアウト基礎 ─ ボックスモデル・Flexbox・Grid を理解する

HTMLとCSSを用途やパーツごとに分けて、より深く理解していきましょう。ここではレイアウトの根幹となるボックスモデルと、現代的なレイアウト手法であるFlexbox・Gridを取り上げます。

レイアウト基礎：ブロックボックスとインラインボックス

CSSにおける要素の振る舞いは、大きく「ブロックボックス」と「インラインボックス」の2種類に分かれます。

ブロックボックス（display: block / table）

ブロックボックスは上から下へ縦方向に配置されます。前後には改行が伴い、1つの段落としてレイアウトされます。

• 幅（width）や高さ（height）を指定できる
• 幅を指定しなければ親要素の幅全体に広がる

インラインボックス（display: inline / inline-block）

インラインボックスは左から右へ横方向に配置されます。前後に改行は伴わず、行内の一部としてレイアウトされます。

• 幅（width）や高さ（height）を指定できない
• 上下の margin を指定できない（例外あり）

ボックスモデル

CSSのボックスモデルは、以下の4つの領域で構成されています。

ボックスの総サイズは content + padding + border + margin の合計で算出されます。

box-sizing: border-box の活用

box-sizing: border-box; を設定すると、border と padding を width の内側に含めて計算させることができます。幅の管理が直感的になるため、多くのプロジェクトで使われています。

.box {
  width: 300px;       /* 中身の幅 */
  height: 200px;      /* 中身の高さ */
  padding: 20px;      /* 内側の余白（上下左右に 20px ずつ） */
  border: 5px solid;  /* 境界線（上下左右に 5px ずつ） */
  margin: 30px;       /* 外側の余白（上下左右に 30px ずつ） */
}

/* border を内側にする場合 */
.box-border-box {
  width: 300px;
  padding: 50px;
  border: 10px solid blue;
  box-sizing: border-box;
}

カラムレイアウト・グリッドレイアウト

複数の要素を横に並べる「カラムレイアウト」には、主に Flexbox と Grid が使われます。

Flexbox の使い方

Flexboxは親要素に display: flex; を指定することで有効になります。親（コンテナ）が子（アイテム）の並びをコントロールします。

よく使う親への命令（4つ）

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;                    /* Flexbox を有効化 */
  justify-content: space-between;   /* アイテム間を均等に配置 */
  gap: 10px;                        /* アイテム間の隙間 */
}

.flex-item {
  background-color: #f0f0f0;
  padding: 60px 20px;
  flex: 1;                          /* アイテムの幅を均等に */
  text-align: center;
}

Grid の使い方

GridはFlexboxが「1列の整列」を得意とするのに対し、縦と横の両方を同時に制御するレイアウト手法です。親要素に display: grid; を指定し、「網目（グリッド）」を作ります。

親への基本命令（網目を作る）

単位 fr（fraction） はGrid専用の単位で、残りの空間を比率で分け合います。たとえば 1fr 1fr 1fr と指定すると3列を均等に分割できます。

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列、幅を自動調整 */
  gap: 15px;                              /* グリッドの隙間 */
}

.grid-item {
  background-color: #d1e7dd;
  padding: 30px;
  text-align: center;
}

カード・タイルレイアウト

Gridレイアウトの応用として、カード・タイルレイアウトがあります。画像を敷き詰めて一覧表示するWebサイト（ポートフォリオやECサイトなど）で特に活躍するレイアウト方法です。

float による回り込み

現代のレイアウトではFlexboxやGridが主流となりましたが、テキストを画像に回り込ませるという本来の用途や、古いサイトの保守では float が登場することがあります。

img {
  float: left;  /* または right */
  margin: 0 16px 8px 0;
}

まとめ

ここではHTMLとCSSのレイアウトに関する基本的な概念を整理しました。

• ブロックボックス は縦に積み重なり、インラインボックス は横に並ぶ
• ボックスモデル は content / padding / border / margin の4層構造。box-sizing: border-box で直感的に幅管理できる
• Flexbox は1方向の整列に強く、ナビやカード列に最適
• Grid は縦横を同時に制御でき、複雑なレイアウトも統一感を持って表現できる
• float は回り込みが本来の用途。新規開発より保守や特定表現で使う

FlexboxやGridのすべてのプロパティを最初から覚える必要はありません。実際にコードを書きながら少しずつ慣れていき、わからないことはWeb検索でテクニックを調べながら実践していきましょう。