【HTML・CSS】3段組み（3カラム）レイアウトの様々なバリエーションでの作成方法について

2019年5月17日

Webページでよく見られるレイアウトについては、1カラム、2カラム、3カラムのどれかがほとんどです。

とりわけ、情報が多い場合等については3カラムレイアウトがよく用いられます。

こちらのサイトも3カラムレイアウトで作成されております。
メインコンテンツの上部に画像を埋め込み、目立つように工夫しています。

3カラムレイアウトをかなりシンプルに表すと、以下のようなイメージです。

今回は、いくつかのバリエーションを例に3カラムレイアウトを作成してみます。

1. 3カラムレイアウトの作成方法
2. 終わりに

3カラムレイアウトの作成方法

2カラムレイアウトの繰り返しで作成可能

3カラムレイアウトは、2カラムレイアウトの繰り返しで実現できます。
2カラムレイアウトは、2つの要素にそれぞれ「float:left」、「float:right」で左右で配置します。

2カラムのイメージは以下の通りです。

参考までに、上記のコードは以下の通りです。

<div id="wrapper">
	<div id="A">A</div>
	<div id="B">B</div>
</div>

#wrapper{
	width:500px;
	height:500px;
	margin:0 auto;
}
#wrapper #A{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#ffffdb;
	height:100%;
	
	float:left;/*左周り*/
	width:75%;
}
#wrapper #B{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#aae4ff;
	height:100%;
	
	float:right;/*右周り*/
	width:25%;
}

3カラムレイアウトの作成

では、実際に3カラムレイアウトを作成していきます。

下準備は、以下の通りです。

C要素を追加
AとBをひとまとめにして、名前を付ける。（A+B=Dとします）

これにより、以下のように2カラムレイアウトの繰り返しを行う事が出来ます。

POINT

「D(A+B)」と「C」の2つの要素を左右に配置
「D(A+B)」内のAとBをそれぞれ左右に配置

ではそれぞれのパターンで見ていきます。

パターン1

A⇒75%（中央）
B⇒25%（左）
C⇒25%（右）

レイアウトは以下の通りです。

コードは以下の通りです。

<div id="wrapper">
	<div id="D">
		<div id="A">A</div>
		<div id="B">B</div>
	</div>
	
	<div id="C">C</div>
	
</div>

#wrapper{
	width:500px;
	height:500px;
	margin:0 auto;
}
#D{
	height:100%;/*高さの決定*/
	
	float:left;/*左回り*/
	width:75%;/*幅の75%をA+B（残りの25%はC）*/
}
#C{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#ffe9e2;
	height:100%;
	
	float:right;/*右回り*/
	width:25%;/*Cの幅=100%-(D分の幅)=25%*/
}
#D #A{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#ffffdb;
	height:100%;
	
	float:right;/*D内で右周り*/
	width:75%;/*Aの幅=親要素Dの幅75%の内75%*/
}
#D #B{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#aae4ff;
	height:100%;
	
	float:left;/*D内で左周り*/
	width:25%;/*Bの幅=親要素Dの幅75%の内25%*/
}

パターン2

A⇒75%（左）
B⇒25%（中央）
C⇒25%（右）

レイアウトは以下の通りです。

コードは以下の通りです。

HTMLに関しては先ほどと同様なので割愛します。
また、CSSについてもそれぞれの要素のfloatの値を変えただけでそれ以外に変更点はありません。

#wrapper{
	width:500px;
	height:500px;
	margin:0 auto;
}
#D{
	height:100%;/*高さの決定*/
	
	float:left;/*左回り*/
	width:75%;/*幅の75%をA+B（残りの25%はC）*/
}
#C{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#ffe9e2;
	height:100%;
	
	float:right;/*右回り*/
	width:25%;/*Cの幅=100%-(D分の幅)=25%*/
}
#D #A{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#ffffdb;
	height:100%;
	
	float:left;/*D内で左周り*/
	width:75%;/*Aの幅=親要素Dの幅75%の内75%*/
}
#D #B{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#aae4ff;
	height:100%;
	
	float:right;/*D内で右周り*/
	width:25%;/*Bの幅=親要素Dの幅75%の内25%*/
}

パターン3

A⇒75%（右）
B⇒25%（中央）
C⇒25%（左）

レイアウトは以下の通りです。

コードは以下の通りです。先程と同様CSSのみ記載します。

#wrapper{
	width:500px;
	height:500px;
	margin:0 auto;
}
#D{
	height:100%;/*高さの決定*/
	
	float:right;/*右回り*/
	width:75%;/*幅の75%をA+B（残りの25%はC）*/
}
#C{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#ffe9e2;
	height:100%;
	
	float:left;/*左回り*/
	width:25%;/*Cの幅=100%-(D分の幅)=25%*/
}
#D #A{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#ffffdb;
	height:100%;
	
	float:right;/*D内で右周り*/
	width:75%;/*Aの幅=親要素Dの幅75%の内75%*/
}
#D #B{
	/*文字、幅及び高さ、背景色の決定*/
	text-align:center;
	font-size:18px;
	background-color:#aae4ff;
	height:100%;
	
	float:left;/*D内で左周り*/
	width:25%;/*Bの幅=親要素Dの幅75%の内25%*/
}