左右固定・中央可変の3カラム構成手法

网页における左右一定幅・中央自動伸展の配置を実現するための主要なCSS実装手法を紹介します。以下のDOM構造を前提としています。

<div class="grid-container">
  <div class="panel-left">左側コンテンツ</div>
  <div class="panel-center">中央可変領域</div>
  <div class="panel-right">右側コンテンツ</div>
</div>

1. positionプロパティによる座標配置

絶対配置と相対配置の組み合わせによって要素をフロー外へ移出し、中央部分に残スペースをマージンで空ける手法です。

.panel-left {
  position: absolute;
  width: 220px;
  height: 200px;
  background-color: cadetblue;
  left: 0;
  top: 0;
}
.panel-center {
  height: 200px;
  margin: 0 220px;
  background-color: yellowgreen;
  overflow: hidden;
}
.panel-right {
  position: absolute;
  width: 220px;
  height: 200px;
  background-color: bisque;
  right: 0;
  top: 0;
}

左右のパネルを親コンテナ基準で固定配置し、中央エレメントには左右のマージン値を設定することで物理的な空白帯を形成しています。high-heightが固定されている環境で効果的ですが、内部のテキスト折り返しや動的な高さ変化に対応する場合は別途考慮が必要です。

2. floatプロパティによるフロート配置

古いレンダリングエンジンでも確かな動作保証がある伝統的なアプローチです。両端要素を左右方向に浮かせ、中央要素をブロックフォーマットコンテキスト（BFC）で区切ります。

.panel-left {
  float: left;
  width: 220px;
  height: 200px;
  background-color: cadetblue;
}
.panel-center {
  height: 200px;
  margin-right: 220px;
  background-color: yellowgreen;
  overflow: hidden; /* BFC生成により他フロート要素の回り込みを遮断 */
}
.panel-right {
  float: right;
  width: 220px;
  height: 200px;
  background-color: bisque;
  margin-top: -200px; /* 初期フロー位置から上方へスライド */
}

右側パネルにネガティブマージンを与えることで、中央エリアの上縁と垂直方向を等しく整列させています。`overflow: hidden` はBFCをトリガーし、フロートによる高さ collapse を防止する役割も果たします。

3. Flexboxによる弹性レイアウト

現代フロントエンド開発の標準となる手法です。親要素に `display: flex` を付与することで、すべての子要素が弹性的な配置ルールに従って振る舞います。

.grid-container {
  display: flex;
  flex-flow: row nowrap;
  height: 200px;
}
.panel-left {
  flex: 0 0 220px;
  background-color: cadetblue;
}
.panel-center {
  flex: 1 1 0%;
  background-color: yellowgreen;
}
.panel-right {
  flex: 0 0 220px;
  background-color: bisque;
}

Flexboxに関連する重要プロパティの仕様は以下の通りです：

• flex-direction：主轴（主軸線）の方向を定義します。デフォルトは `row`（水平）。垂直配置の場合は `column` を指定します。
• flex-wrap：容器の横幅不足時に子要素を次の行へ折り返すかどうかを制御します。`nowrap` が既定値で、`wrap` に変更することで複数行対応になります。
• justify-content：主轴方向に余白が生まれた場合の配置ロジックを決定します（例：`center`, `space-between`）。
• flex：伸張・収縮・ベース幅をまとめた短縮記法です。構文は `[flex-grow] [flex-shrink] [flex-basis]` です。上記コードの `0 0 220px` は「伸張しない・収縮しない・基準幅220px」を意味し、`1 1 0%` は利用可能な全剩餘スペースを占有率100%で満たす可変幅の定義です。