技術的な導入

この記事では、三列レイアウトを実現するいくつかの方法について説明します。

1. Flexboxを使用した三列レイアウト

Flexboxは一軸方向に要素を配置するためのモデルです。以下の例でその使い方を見てみましょう。

<div class="flex-container">
  <div class="side">サイドバー</div>
  <div class="main">メインコンテンツ</div>
  <div class="extra">追加情報</div>
</div>

<style>
  .flex-container {
    display: flex;
    justify-content: space-around;
    gap: 15px;
  }
  .side, .main, .extra {
    padding: 12px;
    border: 1px solid #ddd;
  }
  .side {
    flex: 1;
  }
  .main {
    flex: 3;
  }
  .extra {
    flex: 1;
  }
</style>

• display: flex: Flexboxレイアウトを有効にし、子要素をFlexボックスとして配置します。
• justify-content: space-around: 子要素間に均等なスペースを設けます。
• gap: 子要素間のギャップを指定します。
• flex: 1とflex: 3: 各要素の伸縮率を設定します。

2. Gridを使用した三列レイアウト

Gridは二軸方向に要素を配置するための強力なツールです。

<div class="grid-container">
  <div class="nav">ナビゲーション</div>
  <div class="content">コンテンツエリア</div>
  <div class="aside">補助情報</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 18px;
  }
  .nav, .content, .aside {
    padding: 14px;
    border: 1px solid #eee;
  }
</style>

• display: grid: グリッドレイアウトを有効にします。
• grid-template-columns: 1fr 3fr 1fr: 列の幅を比率で指定します。
• gap: グリッドアイテム間のギャップを設定します。

3. Floatを使用した三列レイアウト

Floatは古い手法ですが、以下のように使用できます。

<div class="float-container">
  <div class="left-panel">左パネル</div>
  <div class="central-panel">中央パネル</div>
  <div class="right-panel">右パネル</div>
</div>

<style>
  .float-container {
    overflow: hidden;
  }
  .left-panel, .central-panel, .right-panel {
    float: left;
    padding: 15px;
    border: 1px solid #ccc;
  }
  .left-panel {
    width: 20%;
  }
  .central-panel {
    width: 60%;
  }
  .right-panel {
    width: 20%;
  }
</style>

• float: left: 要素を左側に浮動させます。
• overflow: hidden: 浮動による親コンテナの高さ崩壊を防ぎます。

4. CSS Columnsを使用した三列レイアウト（テキスト用）

CSS Columnsはテキストの分欄表示に適しています。

<div class="text-container">
  <p>ここに文章が入ります...</p>
  <p>さらに続く文章...</p>
</div>

<style>
  .text-container {
    column-count: 3;
    column-gap: 22px;
  }
</style>

• column-count: 3: テキストを3列に分割します。
• column-gap: 22px: 列間のギャップを設定します。

5. Flexboxを使った聖杯レイアウト

聖杯レイアウトはFlexboxで簡単に実装できます。

<div class="holy-grail">
  <div class="header">ヘッダー</div>
  <div class="footer">フッター</div>
  <div class="left-side">左サイド</div>
  <div class="main-area">メインエリア</div>
  <div class="right-side">右サイド</div>
</div>

<style>
  .holy-grail {
    display: flex;
    flex-direction: column;
  }
  .header, .footer {
    text-align: center;
  }
  .main-area {
    display: flex;
    justify-content: center;
  }
  .left-side, .right-side {
    width: 22%;
  }
  .main-area {
    width: 56%;
  }
</style>

6. Flexboxを使ったダブルウィングレイアウト

ダブルウィングレイアウトもFlexboxで可能です。

<div class="double-wing">
  <div class="wing-left">左ウィング</div>
  <div class="center-main">中心部</div>
  <div class="wing-right">右ウィング</div>
</div>

<style>
  .double-wing {
    display: flex;
    justify-content: space-between;
  }
  .wing-left, .wing-right {
    width: 22%;
  }
  .center-main {
    width: 56%;
  }
</style>