Flexboxで3列レイアウト

HTML, CSS, Flexboxを用いた固定幅列と可変幅列のレイアウト

HTML
まず、基本的なHTML構造を準備します。ここでは、3つの<div>要素を使い、それぞれを固定幅列、可変幅列、そしてもう一つの固定幅列に割り当てることを想定しています。

<div class="container">
  <div class="fixed-width-left"></div>
  <div class="flexible-width-center"></div>
  <div class="fixed-width-right"></div>
</div>

CSS
次に、CSSを使用してレイアウトを定義します。Flexboxを使うことで、簡単に固定幅と可変幅の列を配置することができます。

.container {
  display: flex; /* Flexboxを使用 */
  justify-content: space-between; /* 列間にスペースを均等に配置 */
}

.fixed-width-left, .fixed-width-right {
  width: 200px; /* 固定幅を設定 */
}

.flexible-width-center {
  flex: 1; /* 残りスペースを占める */
}

解説

• .flexible-width-centerにはflex: 1;を設定することで、残りのスペースを占めるようにします。
• .fixed-width-leftと.fixed-width-rightには固定の幅を設定します。
• justify-content: space-between;は、Flexboxアイテムの間隔を均等に配置します。
• .containerにdisplay: flex;を設定することで、その子要素をFlexboxアイテムとして扱います。

ポイント

• justify-contentプロパティは、Flexboxアイテムの主軸方向（デフォルトでは水平）での配置を制御します。
• Flexboxのflexプロパティは、アイテムの成長や縮小の割合を制御します。flex: 1;は、アイテムが均等に成長または縮小することを意味します。

<div class="container">
  <div class="fixed-width-left"></div>
  <div class="flexible-width-center"></div>
  <div class="fixed-width-right"></div>
</div>

CSS

.container {
  display: flex;
  justify-content: space-between;
}

.fixed-width-left, .fixed-width-right {
  width: 200px;
}

.flexible-width-center {
  flex: 1;
}

Flexboxを用いた3列レイアウト

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1;
}

• .columnにflex: 1;を設定することで、各列が均等にスペースを占めるようにします。

Flexbox以外の方法によるレイアウト

浮動要素（Floats）

• 柔軟性はあるが、クリアリング（クリアリングフロート）が必要で、複雑になることがある。
• 要素にfloatプロパティを設定することで、要素を左右に浮かせる。
• 伝統的なレイアウト手法。

<div class="container">
  <div class="fixed-width-left float-left"></div>
  <div class="flexible-width-center"></div>
  <div class="fixed-width-right float-right"></div>
</div>

.float-left {
  float: left;
}

.float-right {
  float: right;
}

絶対位置付け（Absolute Positioning）

• 柔軟性はあるが、親要素のサイズや他の要素との関係を考慮する必要がある。
• 要素をドキュメントの任意の位置に配置。

<div class="container">
  <div class="fixed-width-left absolute-left"></div>
  <div class="flexible-width-center"></div>
  <div class="fixed-width-right absolute-right"></div>
</div>

.absolute-left {
  position: absolute;
  left: 0;
}

.absolute-right {
  position: absolute;
  right: 0;
}

テーブルレイアウト

• 柔軟性が低く、HTML構造が複雑になる。
• HTMLのテーブル要素を使用してレイアウトを定義。

<table>
  <tr>
    <td>左列</td>
    <td>中央列</td>
    <td>右列</td>
  </tr>
</table>

Gridレイアウト

• ブラウザサポートはまだ完全ではない。
• 柔軟性があり、複雑なレイアウトを簡単に実現できる。

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

比較

• Gridレイアウトは現代的な手法で、柔軟性があり、複雑なレイアウトを簡単に実現できるが、ブラウザサポートはまだ完全ではない。
• テーブルレイアウトは柔軟性が低く、HTML構造が複雑になる。
• 浮動要素は伝統的な手法で、柔軟性はあるが、クリアリングが必要で、複雑になることがある。
• Flexboxは現代的なレイアウト手法で、柔軟性があり、複雑なレイアウトを簡単に実現できる。