Flexboxで2カラムレイアウトを作る方法｜HTML・CSSコード例付きで丁寧に解説

2026年07月07日

Flexboxを使った2カラムレイアウトは、Web制作で非常によく使われる基本パターンです。たとえば、ブログ記事の本文とサイドバー、サービス紹介ページの画像と説明文、ECサイトの商品画像と購入情報、管理画面のメニューとメイン画面など、さまざまな場面で2カラム構成が使われます。

以前は float や display: table を使って2カラムを作ることもありましたが、現在では display: flex; を使う方法が分かりやすく、保守もしやすいです。Flexboxを使えば、親要素に指定を加えるだけで子要素を横並びにでき、カラム間の余白、幅の調整、スマートフォンでの縦並び切り替えもシンプルに実装できます。

この記事では、Flexboxで2カラムレイアウトを作る方法を、HTMLとCSSのコード例付きで丁寧に解説します。各コード例には、h4見出しで「ファイル名」「言語」「用途」を明記しているため、どのファイルに何を書くべきか分かりやすい構成になっています。

1. Flexboxの2カラムレイアウトとは

Flexboxの2カラムレイアウトとは、親要素に display: flex; を指定し、その中にある2つの子要素を横並びに配置するレイアウト方法です。左側にメインコンテンツ、右側にサイドバーを置く構成が代表的ですが、画像とテキストを横に並べるようなデザインにも使えます。

2カラムレイアウトは、情報を整理して見せたいときに便利です。本文だけを1列で表示するよりも、補足情報や関連リンクを横に置くことで、ユーザーが必要な情報へアクセスしやすくなります。ただし、スマートフォンでは横幅が狭いため、PCでは2カラム、スマートフォンでは1カラムに切り替える設計が重要です。

1.1 2カラムレイアウトが使われる場面

2カラムレイアウトは、ブログ、オウンドメディア、コーポレートサイト、ランディングページ、管理画面などでよく使われます。特にブログ記事では、本文をメインカラムに置き、プロフィール、カテゴリー、関連記事、広告などをサイドバーに配置する構成が一般的です。

サービス紹介ページでは、左に画像、右に説明文を置くことで、視覚的に分かりやすい構成を作れます。Flexboxを使えば、このような横並びレイアウトを少ないCSSで実装できます。

1.2 Flexboxを使うメリット

Flexboxの大きなメリットは、横並びレイアウトを直感的に作れることです。親要素に display: flex; を指定するだけで、子要素が横方向に並びます。さらに、gap を使えばカラム間の余白も簡単に指定できます。

また、flex: 1; や flex-basis を使うことで、片方のカラムを可変幅にしたり、サイドバーを固定幅にしたりできます。レスポンシブ対応も flex-direction: column; に切り替えるだけで実装できるため、実務でも扱いやすいレイアウト方法です。

1.3 基本の考え方

Flexboxで2カラムを作るときは、まず親要素を用意し、その中に2つの子要素を入れます。親要素には display: flex; を指定し、子要素には必要に応じて幅や余白を指定します。

たとえば、親要素を .layout、左カラムを .main、右カラムを .sidebar とすると分かりやすくなります。この命名にしておくと、HTMLを見たときにどこが本文で、どこが補足情報なのか判断しやすくなります。

2. 基本の2カラムレイアウトを作る

まずは、最も基本的な2カラムレイアウトを作ります。左側にメインコンテンツ、右側にサイドバーを配置し、全体を中央寄せにします。この基本形を理解しておけば、ブログ、LP、管理画面などに応用できます。

ここでは、HTMLで構造を作り、CSSでFlexboxの指定を行います。コード例では、ファイル名、言語、用途をh4見出しで明記します。

2.1 HTMLで2つのカラムを作る

HTMLでは、全体を囲む .layout を作り、その中に .main と .sidebar を入れます。本文には main、補足情報には aside を使うと、HTMLの意味としても自然です。

SEO記事やブログ記事では、検索エンジンや支援技術にとっても、どこが本文でどこが補足情報なのか分かりやすい構造が大切です。見た目だけでなく、意味のあるHTMLを書くことが重要です。

ファイル名: index.html｜言語: HTML｜用途: 基本の2カラム構造

2.2 CSSで横並びにする

CSSでは、親要素である .layout に display: flex; を指定します。これにより、直下の .main と .sidebar が横並びになります。

.main には flex: 1; を指定して、残りの幅を自動的に使わせます。.sidebar には width: 300px; を指定して、サイドバーの幅を固定します。この組み合わせは、記事本文を広く取りつつ、補足情報を右側に置くレイアウトでよく使われます。

ファイル名: style.css｜言語: CSS｜用途: Flexboxで基本の2カラムを作る

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: sans-serif;
line-height: 1.7;
background: #f5f5f5;
color: #222;
}

.layout {
display: flex;
gap: 24px;
max-width: 1080px;
margin: 40px auto;
padding: 0 20px;
}

.main {
flex: 1;
background: #ffffff;
padding: 32px;
}

.sidebar {
width: 300px;
background: #ffffff;
padding: 24px;
}

2.3 基本コードのポイント

このコードの重要なポイントは、親要素の .layout に display: flex; を指定していることです。Flexboxでは、親要素がフレックスコンテナになり、その直下の子要素がフレックスアイテムとして並びます。

また、gap: 24px; を使うことで、メインカラムとサイドバーの間に余白を作っています。昔のCSSでは片方のカラムに margin-left や margin-right を指定することが多かったですが、Flexboxでは gap を使う方がシンプルで保守しやすいです。

3. メインカラムとサイドバーの幅を調整する

2カラムレイアウトでは、左右の幅バランスが非常に重要です。本文を読みやすくするには、メインカラムを広く取り、サイドバーは補足情報として適度な幅に抑えるのが基本です。

Flexboxでは、サイドバーを固定幅にする方法、左右を比率で分ける方法、flex-basis を使って基準幅を指定する方法があります。ページの目的に合わせて選ぶことが大切です。

3.1 サイドバーを固定幅にする

サイドバーを固定幅にする方法は、ブログやメディアサイトでよく使われます。サイドバーの幅を300px程度に固定し、メインカラムは残りの幅を使うようにします。

この方法では、画面が広くなってもサイドバーの幅は変わらず、メインカラムだけが広がります。プロフィール、カテゴリー、関連記事など、補足情報の表示幅を安定させたい場合に向いています。

ファイル名: style.css｜言語: CSS｜用途: サイドバーを固定幅にする

.layout {
display: flex;
gap: 32px;
max-width: 1120px;
margin: 40px auto;
padding: 0 20px;
}

.main {
flex: 1;
min-width: 0;
}

.sidebar {
flex: 0 0 300px;
}

3.2 flex-basisで基準幅を指定する

flex-basis は、Flexboxの中で要素の基本サイズを指定するプロパティです。flex: 0 0 300px; と書くと、伸びず、縮まず、基準幅を300pxにするという意味になります。

単純に width: 300px; と書いても似たような見た目になりますが、Flexboxの中で幅を制御していることを明確にしたい場合は flex-basis を使うと分かりやすいです。サイドバーの幅を安定させたい場合に便利です。

ファイル名: style.css｜言語: CSS｜用途: flex-basisでサイドバー幅を管理する

.sidebar {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}

3.3 左右を比率で分ける

左右を固定幅ではなく、比率で分けたい場合は、両方のカラムに flex を指定します。たとえば、メインカラムに flex: 2;、サイドバーに flex: 1; を指定すると、全体を3分割したうち、メインが2、サイドバーが1の割合になります。

この方法は、画面幅に応じて両方のカラムを柔軟に変化させたい場合に向いています。ただし、画面幅が狭いとサイドバーも小さくなりすぎることがあるため、必要に応じて min-width やメディアクエリを組み合わせます。

ファイル名: style.css｜言語: CSS｜用途: 2カラムを比率で分ける

.layout {
display: flex;
gap: 24px;
}

.main {
flex: 2;
}

.sidebar {
flex: 1;
}

4. スマートフォンでは1カラムに切り替える

PCでは2カラムが見やすくても、スマートフォンでは横幅が足りません。そのため、スマートフォンではメインカラムとサイドバーを縦並びにするのが基本です。

Flexboxでは、メディアクエリを使って flex-direction: column; に切り替えるだけで、PCの2カラムをスマートフォンの1カラムに変更できます。

4.1 レスポンシブ対応が必要な理由

2カラムレイアウトをスマートフォンでそのまま表示すると、本文の幅が狭くなりすぎて読みにくくなります。さらに、サイドバーの固定幅が残っていると、画面からはみ出して横スクロールが発生する場合があります。

SEO記事やブログ記事では、スマートフォンで本文が読みやすいことが非常に重要です。PCでは2カラム、スマートフォンでは1カラムに切り替えることで、どの端末でも自然に読めるページになります。

4.2 メディアクエリで1カラムにする

メディアクエリを使うと、画面幅が一定以下になったときだけCSSを変更できます。ここでは、画面幅が768px以下になったら .layout を縦並びにします。

サイドバーに固定幅を指定している場合は、スマートフォン表示でその幅を解除します。これにより、サイドバーも画面幅に合わせて表示されます。

ファイル名: style.css｜言語: CSS｜用途: スマートフォンで1カラムに切り替える

@media (max-width: 768px) {
.layout {
flex-direction: column;
}

.sidebar {
width: auto;
flex-basis: auto;
}
}

4.3 スマートフォンで本文を先に表示する

スマートフォンでは、本文が先に表示される構成が読みやすいです。サイドバーが先に表示されると、読者が本文にたどり着くまでに余計なスクロールが必要になります。

そのため、HTMLでは基本的に main を先に書き、その後に aside を書くのがおすすめです。CSSの order で見た目だけ順番を変えることもできますが、読み上げ順やキーボード操作順とずれる可能性があるため注意が必要です。

ファイル名: index.html｜言語: HTML｜用途: 本文を先に表示するHTML構造

<div class="layout">
<main class="main">
  <h1>記事タイトル</h1>
  <p>ここに本文を入れます。</p>
</main>

<aside class="sidebar">
  <h2>関連記事</h2>
  <p>ここに補足情報を入れます。</p>
</aside>
</div>

5. gapでカラム間の余白を管理する

2カラムレイアウトでは、左右のカラムが近すぎると窮屈に見えます。Flexboxでは gap を使うことで、カラム間の余白を簡単に指定できます。

gap を使うと、子要素に個別の margin を付ける必要がありません。親要素側で余白をまとめて管理できるため、CSSが読みやすくなり、レスポンシブ対応もしやすくなります。

5.1 gapを使うメリット

gap のメリットは、要素同士の間隔を親要素で管理できることです。もし margin-right で余白を作ると、最後の要素だけ余白を消すなどの調整が必要になる場合があります。

gap なら、子要素同士の間にだけ余白が入ります。2カラムだけでなく、カード一覧、ナビゲーション、ボタンリストなどにも応用できます。

ファイル名: style.css｜言語: CSS｜用途: gapでカラム間の余白を指定する

.layout {
display: flex;
gap: 32px;
}

5.2 marginで余白を作る場合との違い

margin でもカラム間の余白は作れます。しかし、左右どちらのカラムに余白を付けるかを決める必要があり、HTMLの順番やレイアウトの変更に弱くなる場合があります。

gap を使うと、要素同士の間隔として余白を指定できます。Flexboxでレイアウトを作る場合は、基本的に gap を使う方が自然で保守しやすいです。

5.3 画面幅に応じてgapを変える

PCでは広めの余白、スマートフォンでは狭めの余白にしたい場合があります。その場合は、メディアクエリ内で gap の値を変更します。

スマートフォンで flex-direction: column; にすると、gap は上下の余白として働きます。メインコンテンツとサイドバーの間に自然な間隔を作れるため、1カラム表示でも見やすくなります。

ファイル名: style.css｜言語: CSS｜用途: レスポンシブ時にgapを調整する

.layout {
display: flex;
gap: 32px;
}

@media (max-width: 768px) {
.layout {
flex-direction: column;
gap: 20px;
}
}

6. min-width: 0でレイアウト崩れを防ぐ

Flexboxの2カラムレイアウトでは、長い文字列、URL、コード、表、画像などが原因で、メインカラムが親要素からはみ出すことがあります。この問題を防ぐために重要なのが min-width: 0; です。

特に、記事本文や技術ブログのように長いコードやURLを含むページでは、min-width: 0; を指定しておくとレイアウト崩れを防ぎやすくなります。

6.1 なぜ横にはみ出すのか

Flexboxの子要素は、内容に応じた最小幅を持つことがあります。たとえば、長いURLや折り返しにくい英単語があると、カラムがそれ以上縮めなくなり、親要素を押し広げてしまうことがあります。

その結果、横スクロールが発生したり、サイドバーが画面外に押し出されたりします。Flexboxの2カラムではよく起きる問題なので、最初から対策しておくと安全です。

6.2 mainにmin-width: 0を入れる

メインカラムに min-width: 0; を指定すると、Flexbox内で適切に縮むことができます。これにより、長いコンテンツがあっても、カラムが親要素の幅に収まりやすくなります。

実務では、flex: 1; を指定するメインカラムに min-width: 0; をセットで書くことが多いです。特に記事本文、カード、テーブルを含むレイアウトでは有効です。

ファイル名: style.css｜言語: CSS｜用途: メインカラムのはみ出しを防ぐ

.main {
flex: 1;
min-width: 0;
}

6.3 画像のはみ出しも防ぐ

画像が親要素より大きい場合も、レイアウト崩れの原因になります。画像には max-width: 100%; と height: auto; を指定して、親要素の幅に収まるようにします。

この指定は、2カラムレイアウトに限らず、ほとんどのWebページで使える基本設定です。記事内画像、商品画像、バナー画像などに指定しておくと安心です。

ファイル名: style.css｜言語: CSS｜用途: 画像がカラムからはみ出すのを防ぐ

img {
max-width: 100%;
height: auto;
display: block;
}

7. サイドバー付きブログレイアウトを作る

ここでは、実際のブログ記事ページを想定した2カラムレイアウトを作ります。左側に記事本文、右側にプロフィール、カテゴリー、関連記事を表示する構成です。

このパターンは、SEO記事、オウンドメディア、個人ブログ、技術ブログなどでよく使われます。HTMLの意味構造も意識すると、検索エンジンにもユーザーにも分かりやすいページになります。

7.1 ブログ用HTMLを作る

ブログ記事では、本文全体に article を使うと自然です。サイドバーには aside を使い、その中にプロフィール、カテゴリー、関連記事などのウィジェットを入れます。

article は独立した記事コンテンツを示し、aside は本文に関連する補足情報を示します。見た目だけでなく、HTMLの意味を正しく使うことがSEO記事では大切です。

ファイル名: index.html｜言語: HTML｜用途: ブログ記事用の2カラム構造

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブログ記事の2カラムレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="page">
  <article class="article">
  <h1>Flexboxで作るブログ記事レイアウト</h1>
  <p>
この記事では、Flexboxを使って本文とサイドバーを横並びにする方法を解説します。
  </p>

  <h2>記事本文の見出し</h2>
  <p>
メインカラムには、読者が最も知りたい本文コンテンツを配置します。
  </p>
  </article>

  <aside class="sidebar">
  <section class="widget">
  <h2>プロフィール</h2>
  <p>Web制作とCSSについて発信しています。</p>
  </section>

  <section class="widget">
  <h2>カテゴリー</h2>
  <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Flexbox</li>
  </ul>
  </section>

  <section class="widget">
  <h2>関連記事</h2>
  <ul>
  <li><a href="#">CSS Gridの基本</a></li>
  <li><a href="#">レスポンシブデザイン入門</a></li>
  <li><a href="#">カードレイアウトの作り方</a></li>
  </ul>
  </section>
  </aside>
</div>

</body>
</html>

7.2 ブログ用CSSを作る

CSSでは、.page をFlexboxの親要素にして、記事本文とサイドバーを横並びにします。本文は flex: 1; で可変幅にし、サイドバーは flex: 0 0 300px; で固定幅にします。

サイドバー内の .widget には背景と余白を付けて、情報のまとまりを分かりやすくします。本文とサイドバーの役割を見た目でも区別できるようにすると、読みやすいページになります。

ファイル名: style.css｜言語: CSS｜用途: ブログ記事の2カラムデザイン

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: sans-serif;
line-height: 1.8;
background: #f3f4f6;
color: #222;
}

.page {
display: flex;
gap: 32px;
max-width: 1120px;
margin: 48px auto;
padding: 0 20px;
}

.article {
flex: 1;
min-width: 0;
background: #ffffff;
padding: 40px;
}

.sidebar {
flex: 0 0 300px;
}

.widget {
background: #ffffff;
padding: 24px;
margin-bottom: 24px;
}

.widget h2 {
margin-top: 0;
font-size: 20px;
}

.widget ul {
padding-left: 1.2em;
margin-bottom: 0;
}

7.3 ブログ用のスマートフォン対応

スマートフォンでは、.page を縦並びにします。サイドバーの固定幅も解除し、画面幅いっぱいに表示できるようにします。

本文の余白もPCより少し小さくすると、スマートフォンで読みやすくなります。PCと同じ余白のままだと、本文エリアが狭くなりすぎることがあります。

ファイル名: style.css｜言語: CSS｜用途: ブログレイアウトのスマートフォン対応

@media (max-width: 768px) {
.page {
flex-direction: column;
gap: 24px;
margin: 24px auto;
}

.article {
padding: 24px;
}

.sidebar {
flex-basis: auto;
}
}

8. 画像とテキストの2カラムレイアウト

2カラムレイアウトは、ブログの本文とサイドバーだけでなく、画像とテキストを横並びにするデザインにも使えます。サービス紹介ページやランディングページでは、左に画像、右に説明文を置く構成がよく使われます。

Flexboxを使うと、画像とテキストの高さをそろえたり、上下中央に揃えたりしやすくなります。ここでは、LPのセクションとして使いやすい画像テキスト型の2カラムを作ります。

8.1 画像とテキストのHTML構造

HTMLでは、画像エリアとテキストエリアを分けて作ります。画像側には .feature-image、文章側には .feature-text のようなクラス名を付けると、CSSで扱いやすくなります。

テキストエリアには、見出し、説明文、ボタンを入れます。この構成は、サービスの特徴紹介、商品紹介、会社紹介などに使いやすいです。

ファイル名: index.html｜言語: HTML｜用途: 画像とテキストの2カラム構造

<section class="feature">
<div class="feature-image">
  <img src="sample.jpg" alt="サービス画面のサンプル">
</div>

<div class="feature-text">
  <h2>Flexboxで作る見やすい2カラム</h2>
  <p>
画像とテキストを横並びにすることで、サービスの特徴を分かりやすく伝えられます。
  </p>
  <a href="#" class="button">詳しく見る</a>
</div>
</section>

8.2 CSSで画像とテキストを横並びにする

.feature に display: flex; を指定し、画像とテキストを横並びにします。align-items: center; を使うと、画像とテキストを上下中央に揃えられます。

画像エリアとテキストエリアには、それぞれ flex: 1; を指定します。これにより、左右のカラムが同じ比率で並びます。カラム間の余白は gap で管理します。

ファイル名: style.css｜言語: CSS｜用途: 画像とテキストをFlexboxで横並びにする

.feature {
display: flex;
align-items: center;
gap: 40px;
max-width: 1080px;
margin: 80px auto;
padding: 0 20px;
}

.feature-image,
.feature-text {
flex: 1;
min-width: 0;
}

.feature-image img {
width: 100%;
height: auto;
display: block;
}

.button {
display: inline-block;
margin-top: 16px;
padding: 12px 24px;
text-decoration: none;
background: #222;
color: #fff;
}

8.3 スマートフォンでは縦並びにする

スマートフォンでは、画像とテキストを縦並びにします。画像を上、テキストを下にすると、自然な読み順になります。

LPでは、セクションごとに画像と文章の順番を変えることもありますが、スマートフォンでは読み順が分かりやすいことを優先します。flex-direction: column; を使えば簡単に縦並びにできます。

ファイル名: style.css｜言語: CSS｜用途: 画像テキスト型2カラムのスマートフォン対応

@media (max-width: 768px) {
.feature {
flex-direction: column;
gap: 24px;
margin: 48px auto;
}
}

9. 左右を入れ替える2カラムレイアウト

Webページでは、セクションごとに画像とテキストの左右を交互に入れ替えるデザインがよく使われます。Flexboxでは、flex-direction: row-reverse; を使うことで、左右を簡単に反転できます。

ただし、左右の見た目だけを変えると、HTML上の順番と視覚的な順番がずれることがあります。読み上げソフトやキーボード操作の順番にも関係するため、使いどころを考える必要があります。

9.1 row-reverseで左右を反転する

row-reverse を指定すると、Flexboxの子要素の表示順が左右反転します。HTMLでは画像が先、テキストが後でも、見た目ではテキストが先、画像が後に表示されます。

装飾的なセクションでは便利ですが、重要な情報の読み順を変える場合は注意が必要です。ユーザーにとって自然な順番かどうかを確認しながら使います。

ファイル名: style.css｜言語: CSS｜用途: 2カラムの左右を反転する

.feature.reverse {
flex-direction: row-reverse;
}

9.2 HTMLでreverseクラスを付ける

左右を入れ替えたいセクションにだけ .reverse クラスを付けます。同じCSSを使い回しながら、一部のセクションだけレイアウトを反転できます。

この方法は、ランディングページでよく使われます。画像とテキストを交互に配置することで、ページ全体が単調になりにくく、視覚的なリズムを作れます。

ファイル名: index.html｜言語: HTML｜用途: 左右反転するセクションのHTML

<section class="feature reverse">
<div class="feature-image">
  <img src="sample-2.jpg" alt="機能紹介のサンプル">
</div>

<div class="feature-text">
  <h2>左右を入れ替えた2カラム</h2>
  <p>
セクションごとに配置を変えることで、単調になりにくいページを作れます。
  </p>
</div>
</section>

9.3 スマートフォンでは通常の縦並びに戻す

PCでは左右を反転しても、スマートフォンでは縦並びになるため、順番を統一した方が読みやすい場合があります。row-reverse の影響を残したままだと、スマートフォンで意図しない表示順になることがあります。

メディアクエリで .feature と .feature.reverse の両方に flex-direction: column; を指定すれば、スマートフォンでは通常の縦並びになります。

ファイル名: style.css｜言語: CSS｜用途: 左右反転レイアウトをスマートフォンで縦並びに戻す

@media (max-width: 768px) {
.feature,
.feature.reverse {
flex-direction: column;
}
}

10. よくある失敗と対策

Flexboxの2カラムレイアウトは便利ですが、いくつかの失敗パターンがあります。特に、横スクロール、サイドバーの崩れ、画像のはみ出し、スマートフォン対応漏れは実務でよく起こります。

原因と対策を知っておくと、レイアウトが崩れたときに素早く修正できます。ここでは、初心者がつまずきやすいポイントを整理します。

10.1 横スクロールが出る

横スクロールが出る原因は、固定幅の合計が画面幅を超えていることです。サイドバーの固定幅、カラム間の gap、左右の padding、画像や長いURLなどが重なると、親要素を超えてしまうことがあります。

対策として、全体に box-sizing: border-box; を指定し、メインカラムには min-width: 0; を入れます。また、スマートフォンでは必ず1カラムに切り替えることが重要です。

ファイル名: style.css｜言語: CSS｜用途: 横スクロールを防ぐ基本対策

* {
box-sizing: border-box;
}

.main {
min-width: 0;
}

@media (max-width: 768px) {
.layout {
flex-direction: column;
}
}

10.2 サイドバーが狭くなりすぎる

サイドバーに flex: 1; を指定すると、画面幅によっては狭くなりすぎることがあります。サイドバー内の文字が何度も折り返されたり、ボタンやリストが読みにくくなったりします。

サイドバーの幅を安定させたい場合は、flex: 0 0 300px; のように指定します。スマートフォンでは、メディアクエリで flex-basis を解除します。

ファイル名: style.css｜言語: CSS｜用途: サイドバーの幅を安定させる

.sidebar {
flex: 0 0 300px;
}

@media (max-width: 768px) {
.sidebar {
flex-basis: auto;
}
}

10.3 画像が親要素からはみ出す

画像に何も指定していない場合、画像本来のサイズが親要素より大きいと、カラムからはみ出します。これは記事内画像や商品画像でよく起こる問題です。

画像には max-width: 100%; を指定して、親要素の幅に収まるようにします。height: auto; も指定して、縦横比が崩れないようにします。

ファイル名: style.css｜言語: CSS｜用途: 画像のはみ出しを防ぐ共通設定

img {
max-width: 100%;
height: auto;
display: block;
}

10.4 gapではなくmarginで複雑にしてしまう

2カラム間の余白を margin で作ると、表示順を変えたときやレスポンシブ対応をしたときに調整が増えることがあります。片方のカラムにだけ余白を付けるため、CSSの責任も分かりにくくなります。

Flexboxでは、基本的に gap を使う方が安全です。親要素に余白管理を任せることで、子要素のCSSをシンプルにできます。

ファイル名: style.css｜言語: CSS｜用途: gapで余白管理を簡潔にする

.layout {
display: flex;
gap: 24px;
}

10.5 スマートフォン確認を忘れる

PCではきれいに見えても、スマートフォンでは本文が狭すぎたり、横スクロールが出たりすることがあります。2カラムレイアウトでは、スマートフォン確認が必須です。

特に、固定幅のサイドバー、横長画像、長いURL、表、コードブロックは注意が必要です。幅が狭い画面では、1カラムに切り替える設計を基本にしましょう。

ファイル名: style.css｜言語: CSS｜用途: スマートフォンで安全に1カラム化する

@media (max-width: 768px) {
.layout {
flex-direction: column;
}

.main,
.sidebar {
width: 100%;
}
}

11. SEOを意識した2カラムレイアウト

2カラムレイアウトは、見た目だけの問題ではありません。SEOを意識する場合、HTMLの意味構造、本文の読みやすさ、スマートフォンでの表示、ページ速度、内部リンクの配置も重要です。

Flexboxで整った2カラムを作っても、本文が読みにくかったり、スマートフォンで崩れていたりすると、ユーザー体験が悪くなります。検索流入を狙う記事では、レイアウトの使いやすさも大切です。

11.1 mainとasideを正しく使う

本文には main や article、補足情報には aside を使うと、HTML構造が分かりやすくなります。検索エンジンや支援技術にとっても、どこが主要コンテンツなのか理解しやすくなります。

サイドバーには関連記事、カテゴリー、プロフィール、CTAなどを置けます。ただし、サイドバーが本文より目立ちすぎると、読者の集中を妨げる場合があります。主役はあくまで本文です。

ファイル名: index.html｜言語: HTML｜用途: SEOを意識した本文と補足情報の分離

<main class="main">
<article>
  <h1>記事タイトル</h1>
  <p>記事本文がここに入ります。</p>
</article>
</main>

<aside class="sidebar">
<h2>関連記事</h2>
<ul>
  <li><a href="#">関連記事1</a></li>
  <li><a href="#">関連記事2</a></li>
</ul>
</aside>

11.2 スマートフォンでは本文を優先する

スマートフォンでは、本文が先に表示される構成が重要です。サイドバーや広告が先に表示されると、読者が本文にたどり着くまでに時間がかかり、離脱の原因になることがあります。

HTML上で本文を先に書き、スマートフォンでもその順番で表示されるようにしましょう。CSSの order を使って見た目だけを変える場合は、読み上げ順との違いに注意が必要です。

11.3 本文幅を読みやすくする

PCでメインカラムが広すぎると、1行が長くなりすぎて読みにくくなります。2カラムレイアウトではサイドバーがあることで本文幅を自然に制限できますが、大きな画面では全体の最大幅も設定する必要があります。

max-width を指定してコンテナ全体を中央寄せにすると、大きなモニターでも読みやすい本文幅を保てます。SEO記事では、読者がストレスなく読み進められるレイアウトが重要です。

ファイル名: style.css｜言語: CSS｜用途: 本文が広がりすぎないように最大幅を設定する

.page {
max-width: 1120px;
margin: 0 auto;
padding: 0 20px;
}

12. 完成版コード

ここでは、ブログ記事やSEO記事に使いやすい完成版の2カラムレイアウトをまとめます。PCでは本文とサイドバーを横並びにし、スマートフォンでは縦並びに切り替えます。

この完成版は、記事ページの土台として使いやすい構成です。必要に応じて、色、余白、幅、フォント、サイドバーの内容を変更してください。

12.1 完成版HTML

HTMLでは、本文を .main、サイドバーを .sidebar として分けます。サイドバーにはプロフィール、カテゴリー、関連記事などを入れます。

h1はページのメインタイトルとして本文側に置きます。サイドバー内の見出しはh2にして、補足情報のまとまりを分かりやすくします。

ファイル名: index.html｜言語: HTML｜用途: 完成版の2カラムHTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexboxで作る2カラムレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="page">
  <article class="main">
  <h1>Flexboxで作る2カラムレイアウト</h1>
  <p>
Flexboxを使うと、本文とサイドバーを横並びにした2カラムレイアウトを簡単に作れます。
  </p>

  <h2>本文の見出し</h2>
  <p>
メインカラムには、記事本文やサービス説明など、ページの中心となる情報を配置します。
  </p>

  <h2>さらに詳しい内容</h2>
  <p>
余白、幅、レスポンシブ対応を調整することで、PCでもスマートフォンでも読みやすいレイアウトになります。
  </p>
  </article>

  <aside class="sidebar">
  <section class="widget">
  <h2>プロフィール</h2>
  <p>Web制作とCSSについて発信しています。</p>
  </section>

  <section class="widget">
  <h2>カテゴリー</h2>
  <ul>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Flexbox</a></li>
  </ul>
  </section>

  <section class="widget">
  <h2>関連記事</h2>
  <ul>
  <li><a href="#">CSS Gridの基本</a></li>
  <li><a href="#">レスポンシブデザイン入門</a></li>
  <li><a href="#">カードレイアウトの作り方</a></li>
  </ul>
  </section>
  </aside>
</div>

</body>
</html>

12.2 完成版CSS

CSSでは、display: flex;、gap、flex: 1;、flex-basis、min-width: 0; を使って2カラムを作ります。スマートフォンでは、メディアクエリで flex-direction: column; に切り替えます。

この完成版では、横スクロールを防ぐために box-sizing: border-box; を全体に指定し、画像がはみ出さないように img の基本指定も入れています。

ファイル名: style.css｜言語: CSS｜用途: 完成版の2カラムCSS

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: sans-serif;
line-height: 1.8;
background: #f5f5f5;
color: #222;
}

a {
color: inherit;
}

img {
max-width: 100%;
height: auto;
display: block;
}

.page {
display: flex;
gap: 32px;
max-width: 1120px;
margin: 48px auto;
padding: 0 20px;
}

.main {
flex: 1;
min-width: 0;
background: #ffffff;
padding: 40px;
}

.main h1 {
margin-top: 0;
font-size: 32px;
line-height: 1.4;
}

.main h2 {
margin-top: 40px;
font-size: 24px;
}

.sidebar {
flex: 0 0 300px;
}

.widget {
background: #ffffff;
padding: 24px;
margin-bottom: 24px;
}

.widget h2 {
margin-top: 0;
font-size: 20px;
}

.widget ul {
padding-left: 1.2em;
margin-bottom: 0;
}

@media (max-width: 768px) {
.page {
flex-direction: column;
gap: 24px;
margin: 24px auto;
}

.main {
padding: 24px;
}

.main h1 {
font-size: 26px;
}

.sidebar {
flex-basis: auto;
}
}

13. 2カラムレイアウトの使い分け

Flexboxの2カラムレイアウトには、いくつかの作り方があります。サイドバー固定型、比率分割型、画像テキスト型など、ページの目的によって使い分けるとよいです。

どの方法を選ぶかは、コンテンツの重要度、画面幅、スマートフォン表示、更新頻度によって変わります。ブログ記事ならサイドバー固定型、ランディングページなら画像テキスト型が使いやすいです。

13.1 サイドバー固定型

サイドバー固定型は、本文を広く取りながら、サイドバーを一定幅で表示する方法です。ブログ、メディア、ドキュメントサイトに向いています。

本文が主役で、サイドバーは補足情報という関係が明確になります。SEO記事では、この構成が最も使いやすいです。

13.2 比率分割型

比率分割型は、左右のカラムを flex: 2; と flex: 1; のように分ける方法です。画面幅に応じて両方のカラムが伸び縮みします。

柔軟性は高いですが、狭い画面ではサイドバーが小さくなりすぎる場合があります。必要に応じて、最小幅やメディアクエリを組み合わせる必要があります。

13.3 画像テキスト型

画像テキスト型は、左に画像、右に文章を置くレイアウトです。商品紹介、サービス紹介、会社紹介、LPの特徴紹介セクションなどに向いています。

見た目にインパクトを出しやすく、情報も整理しやすい構成です。スマートフォンでは画像と文章を縦並びにして、読みやすさを優先します。

14. 実装前に確認したいチェックポイント

Flexboxで2カラムレイアウトを作るときは、単に横並びになっていれば完成ではありません。PC、スマートフォン、長い文章、画像、サイドバーの幅まで確認する必要があります。

以下のポイントを確認しておくと、実務でも崩れにくい2カラムレイアウトになります。

14.1 Flexboxの基本指定を確認する

親要素に display: flex; が指定されているか確認します。カラム間の余白には gap を使い、メインカラムには flex: 1; と min-width: 0; を指定すると安定します。

サイドバーを固定幅にしたい場合は、flex: 0 0 300px; のように指定します。単純な width でも表示はできますが、Flexbox内の幅指定としては flex-basis を使うと意図が明確になります。

14.2 スマートフォン表示を確認する

スマートフォンでは、本文が先に表示されるか確認します。サイドバーが先に出ると、ユーザーが本文にたどり着きにくくなります。

また、固定幅が残っていると横スクロールの原因になります。サイドバーの width や flex-basis は、スマートフォンで解除するようにしましょう。

14.3 画像と長い文字列を確認する

画像が親要素からはみ出していないか、長いURLやコードが横スクロールを発生させていないか確認します。記事ページでは、想定外に長い文字列が入ることもあります。

画像には max-width: 100%;、メインカラムには min-width: 0; を指定しておくと、崩れを防ぎやすくなります。

15. Flexbox 2カラムレイアウトのまとめ

Flexboxを使えば、2カラムレイアウトはシンプルなHTMLとCSSで作れます。親要素に display: flex; を指定し、メインカラムに flex: 1;、サイドバーに固定幅や flex-basis を指定すれば、基本的なサイドバー付きレイアウトが完成します。

重要なのは、PCだけでなくスマートフォン表示まで考えることです。画面幅が狭くなったら flex-direction: column; で1カラムに切り替え、本文を読みやすく表示します。また、gap、min-width: 0;、box-sizing: border-box;、画像の max-width: 100%; を組み合わせることで、よくある崩れを防げます。

15.1 最初に覚えるべきコード

最初に覚えるべきなのは、親要素の display: flex;、カラム間の gap、メインカラムの flex: 1;、サイドバーの flex: 0 0 300px; です。

この4つを理解すれば、基本的な2カラムレイアウトは作れるようになります。あとはスマートフォン対応として、メディアクエリで flex-direction: column; に切り替えます。

ファイル名: style.css｜言語: CSS｜用途: 最小構成の2カラムレイアウト

.layout {
display: flex;
gap: 24px;
}

.main {
flex: 1;
min-width: 0;
}

.sidebar {
flex: 0 0 300px;
}

@media (max-width: 768px) {
.layout {
flex-direction: column;
}

.sidebar {
flex-basis: auto;
}
}

15.2 実務で意識したいこと

実務では、見た目が横並びになっているだけでは不十分です。本文が読みやすいか、サイドバーが邪魔になっていないか、スマートフォンで自然に表示されるか、横スクロールが出ていないかを確認する必要があります。

SEO記事やブログでは、メインコンテンツが最も重要です。サイドバーは補足情報として使い、本文を読みにくくしないように設計しましょう。

おわりに

Flexboxの2カラムレイアウトは、Web制作の基本でありながら、実務で非常によく使う重要な技術です。親要素に display: flex; を指定し、メインカラムとサイドバーの幅を調整するだけで、PC向けの見やすい横並びレイアウトを作れます。

ただし、2カラムレイアウトではスマートフォン対応が欠かせません。PCでは横並び、スマートフォンでは縦並びに切り替えることで、どの端末でも読みやすいページになります。特にSEO記事では、スマートフォンで本文が先に表示される構成を意識することが大切です。

まずは、基本の .layout、.main、.sidebar の構造から始めましょう。そこに gap、flex-basis、min-width: 0;、メディアクエリを加えていけば、ブログ、サービス紹介、LP、管理画面など、さまざまな2カラムレイアウトに応用できます。