2 カラムレイアウトとは

本文とサイドバーなど、ページを左右 2 つの列に分けるレイアウト。狭い画面では 1 列に切り替える。

概要

ページの中身を左右 2 つの列（カラム）に分けるレイアウトです。多くはメインの本文と、リンク一覧や関連情報を置く「サイドバー」の組み合わせで使われます。列数を増やせば 3 カラムにもなりますが、基本の考え方は同じです。スマホなどの狭い画面では 2 列を維持すると読みにくくなるため、メディアクエリで 1 列（シングルカラム）に切り替えるのが一般的です。

別名

表記ゆれ：2 カラムレイアウト、サイドバー付きレイアウト、シングルカラム / 3 カラム、two column

列の数によって「シングルカラム」「3 カラム」のように呼び方が変わりますが、複数の列に分けるという基本の仕組みは共通しています。

AI への伝え方

「2 カラムレイアウトにして」で通じます。本文とサイドバーの幅の比率（例：本文 70% ・サイドバー 30%）と、スマホ幅ではどちらを上に表示するかを伝えると仕様がぶれません。「スマホでは 1 カラムに」と伝えればレスポンシブ対応まで含めて実装してもらえます。

似たパーツとの違い

サイドバー自体の中身（メニューや広告など）は「サイドバー」という別のパーツで扱います。2 カラムレイアウトはあくまで列に分けるという骨組みの話です。画面を大きく左右半分に分ける「スプリットスクリーン」とは、本文中心のページ構成か、左右対等な構成かという点で使いどころが異なります。

デモ

本文

ここに記事の本文が入ります。デモ枠を狭めると、下のサイドバーが本文の下に回り込んで 1 カラムになります。

コード

HTML

<div class="two-column-demo">
  <main class="two-column-demo__main">
    <h3 class="two-column-demo__heading">本文</h3>
    <p>ここに記事の本文が入ります。デモ枠を狭めると、下のサイドバーが本文の下に回り込んで 1 カラムになります。</p>
  </main>
  <aside class="two-column-demo__sidebar">
    <h3 class="two-column-demo__heading">サイドバー</h3>
    <p>関連リンクなどが入ります。</p>
  </aside>
</div>

CSS

.two-column-demo {
  display: flex;
  gap: 16px;
  width: 320px;
  font-family: sans-serif;
  font-size: 13px;
  color: #333;
  line-height: 1.7;
}

.two-column-demo__main {
  flex: 7;
  min-width: 0;
}

.two-column-demo__sidebar {
  flex: 3;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.two-column-demo__heading {
  margin: 0 0 8px;
  font-size: 14px;
  color: #212121;
}

.two-column-demo p {
  margin: 0;
}

/* デモ枠が狭いときは 1 カラムに切り替える */
@media (max-width: 360px) {
  .two-column-demo {
    flex-direction: column;
  }
}