CSSのレイアウト基本パターンを完全ガイド！初心者でもわかる2カラム・3カラムの作り方

1. レイアウトの基本パターンとは？初心者向けにやさしく解説

1. レイアウトの基本パターンとは？初心者向けにやさしく解説

Webサイトのデザインにおいて、情報の配置を決める枠組みを「レイアウト」と呼びます。2026年現在のモダンなWebデザインでも、ユーザーが直感的に内容を理解できるよう、伝統的な「2カラム」や「3カラム」という基本構造が広く活用されています。

「カラム（Column）」とは日本語で「列」や「柱」を意味します。つまり、1つの画面を縦に何列並べて構成するか、という考え方です。例えば、ニュースサイトやブログで、メインの記事の横に「おすすめ記事一覧」や「プロフィール」が並んでいるのを見たことはありませんか？それがまさにカラムレイアウトです。

代表的な2つのパターン

• 2カラムレイアウト：画面を左右2つに分けるスタイルです。「左側にメニュー、右側に本文」といった構成が多く、シンプルで読みやすいため、個人ブログや企業のサービス紹介ページに最適です。
• 3カラムレイアウト：画面を3つの列に分けるスタイルです。「左にカテゴリ一覧、中央に本文、右に最新ニュースや広告」といった配置が可能で、ポータルサイトなどの情報量が多いサイトに向いています。

まずは、一番シンプルな「1つの箱の中に2つの列が並んでいる状態」をイメージしてみましょう。HTMLとCSSを使うと、驚くほど簡単にこの「列」を作ることができます。

<style>
    /* 2つの要素を横に並べる魔法の指示 */
    .layout-sample {
        display: flex; /* これだけで横並びになります */
        gap: 10px;    /* 要素同士のすき間 */
    }
    .column-box {
        flex: 1;       /* 同じ幅で均等に広げる */
        padding: 20px;
        background-color: #f0f0f0;
        border: 2px solid #007bff;
        text-align: center;
        border-radius: 8px;
    }
</style>

<div class="layout-sample">
    <div class="column-box">1列目（左側）</div>
    <div class="column-box">2列目（右側）</div>
</div>

このように、大きな枠組み（コンテナ）を用意して、その中に小さな箱を配置していくのがレイアウト作りの基本です。次のセクションからは、実戦で使える具体的な数値設定や、3カラムへの応用方法を詳しく見ていきましょう。

2. 2カラムレイアウトの作り方

2. 2カラムレイアウトの作り方

まずは一番シンプルな2カラムレイアウトから始めましょう。CSSで横に2つの箱を並べるだけで実現できます。

<style>
.container {
    display: flex;
}
.sidebar {
    width: 30%;
    background: lightgray;
    padding: 10px;
}
.main {
    width: 70%;
    background: white;
    padding: 10px;
}
</style>

<div class="container">
    <div class="sidebar">サイドメニュー</div>
    <div class="main">本文エリア</div>
</div>

display: flex;を使うと、子要素を横に並べることができます。左側のサイドバーに30%、右側の本文エリアに70%の幅を指定してバランスをとっています。

3. 3カラムレイアウトの作り方

3. 3カラムレイアウトの作り方

次に、3カラムレイアウトです。真ん中にメインコンテンツ、左右に補足情報やメニューを配置する形になります。

<style>
.container3 {
    display: flex;
}
.left {
    width: 20%;
    background: lightblue;
    padding: 10px;
}
.center {
    width: 60%;
    background: white;
    padding: 10px;
}
.right {
    width: 20%;
    background: lightgreen;
    padding: 10px;
}
</style>

<div class="container3">
    <div class="left">左サイドバー</div>
    <div class="center">メインコンテンツ</div>
    <div class="right">右サイドバー</div>
</div>

3カラムの場合、左右に20%ずつ、真ん中に60%を割り当てるのが基本です。バランスよく配置されるので、多くのWebサイトで採用されています。

4. レイアウトを作るときの考え方

4. レイアウトを作るときの考え方

カラムレイアウトを考えるときは、見た目だけでなく「情報の優先順位」を意識することが大切です。例えば：

• 一番見てもらいたい内容は中央に配置する
• 補足情報や広告は左右に配置する
• ナビゲーションメニューは左に置くと使いやすい

こうすることで、ユーザーが迷わず情報を見つけられるようになります。

5. 2カラムと3カラムを使い分けるポイント

5. 2カラムと3カラムを使い分けるポイント

「2カラム」と「3カラム」には、それぞれ向いている使い方があります。

2カラムはシンプルなので、ブログや企業サイトの基本ページに向いています。一方、3カラムは情報量が多いニュースサイトやポータルサイトに適しています。

また、画面の広さや見やすさも考慮して選びましょう。特にスマートフォンでは画面が狭いため、2カラムの方が適している場合が多いです。

6. 背景色や境界線で見やすくする工夫

6. 背景色や境界線で見やすくする工夫

カラムをただ並べるだけだと、どこからどこまでが区切りなのか分かりにくくなることがあります。そんなときは、背景色を変えたり、境界線をつけたりすると分かりやすくなります。

<style>
.box {
    display: flex;
}
.box div {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
}
</style>

<div class="box">
    <div>左カラム</div>
    <div>中央カラム</div>
    <div>右カラム</div>
</div>

このように、見た目を調整するだけでも「読みやすさ」が格段に上がります。

まとめ

まとめ

Webデザインの根幹を支える「カラムレイアウト」について、その基本から具体的な実装方法までを詳しく解説してきました。現代のウェブサイト制作において、CSSのFlexbox（フレックスボックス）を活用したレイアウト構築は、もはや必須のスキルと言っても過言ではありません。2カラムや3カラムといった構造を自由に操れるようになると、ユーザーにとって情報の優先順位が分かりやすく、かつ視覚的に美しいサイトを構築することが可能になります。

特に2カラムレイアウトは、ブログ記事や企業の会社概要ページなど、メインコンテンツに集中させつつ補足情報を添える際に非常に有効です。一方で3カラムレイアウトは、ポータルサイトや情報量の多いメディアサイトにおいて、複雑なナビゲーションやバナー広告、新着記事リストなどを整理して配置するのに適しています。どちらのパターンを選択するかは、サイトの目的やターゲットとするユーザー層、そして掲載するコンテンツのボリュームによって判断することが重要です。

また、ただ要素を横に並べるだけでなく、パディング（余白）の設定や背景色の使い分け、ボーダーによる境界の明確化など、細かなスタイリングを施すことで、サイト全体の完成度は飛躍的に向上します。レスポンシブデザインが当たり前となった現代では、PC表示での多カラムレイアウトをどのようにスマートフォンで最適化するか（1カラムに落とし込むなど）という視点も忘れてはいけません。

実戦で使えるレイアウトの応用例

ここでは、さらに実践的なレイアウトの組み方として、ヘッダーとフッターを含めた全体構造のサンプルコードを確認してみましょう。これにより、ページ全体のバランスをどう取るべきかのイメージがより具体化するはずです。

<style>
.site-wrapper {
	max-width: 1000px;
	margin: 0 auto;
	font-family: "Helvetica Neue", Arial, sans-serif;
}
header {
	background: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
}
.main-visual {
	background: #eee;
	padding: 40px;
	text-align: center;
	border-bottom: 2px solid #ddd;
}
.content-area {
	display: flex;
}
.side-nav {
	width: 250px;
	background: #f9f9f9;
	padding: 20px;
	border-right: 1px solid #eee;
}
.article-body {
	flex: 1;
	padding: 20px;
	line-height: 1.6;
}
footer {
	background: #444;
	color: #fff;
	text-align: center;
	padding: 15px;
	font-size: 0.8rem;
}
.sample-img {
	width: 100%;
	max-width: 150px;
	height: auto;
	margin-bottom: 10px;
}
</style>

<div class="site-wrapper">
	<header>
		<h1>デモサイトのタイトル</h1>
	</header>
	<div class="main-visual">
		<p>ここにはメインビジュアルが入ります。</p>
		<img src="/img/sample150-100.jpg" alt="サンプル" class="sample-img">
	</div>
	<div class="content-area">
		<nav class="side-nav">
			<ul style="list-style: none; padding: 0;">
				<li><a href="#">メニュー1</a></li>
				<li><a href="#">メニュー2</a></li>
				<li><a href="#">メニュー3</a></li>
			</ul>
		</nav>
		<main class="article-body">
			<h2>記事の見出し</h2>
			<p>ここにブログの本文や、製品の詳細な説明が入ります。2カラムにすることで、左側のナビゲーションから他のページへすぐに移動でき、利便性が高まります。</p>
			<img src="/img/sample120-120.jpg" alt="ミニサンプル" class="sample-img">
		</main>
	</div>
	<footer>
		&copy; 2026 Layout Guide All Rights Reserved.
	</footer>
</div>

CSSレイアウトを成功させるための3つのポイント

これから自分自身でコーディングを始めるにあたって、以下の3つのポイントを常に意識してみてください。

• ボックスモデルの理解： padding、border、marginが要素全体の幅にどう影響するか（box-sizingプロパティなど）を確認しておきましょう。
• パーセント指定の活用： 幅をpxで固定するのではなく、%で指定することで、ブラウザのサイズが変わっても崩れにくいレイアウトになります。
• 検証ツールの使用： Chromeなどのブラウザの検証ツールを使って、Flexboxが正しく適用されているか、要素がはみ出していないかをチェックする癖をつけましょう。

レイアウト作りは最初はパズルのように感じるかもしれませんが、基本を一度覚えてしまえば、どんな複雑なデザインも細かなパーツの組み合わせでできていることが理解できるようになります。まずはシンプルな2カラムから挑戦し、徐々に自分の理想とする形にブラッシュアップしていってください。