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

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

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

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


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

3カラムレイアウト(メインコンテンツ中央)

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

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

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

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

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

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%*/
}

終わりに

今回は、大元であるwrapper要素の幅を固定幅の500pxに設定しました。

補足ですが、これを100%に設定すると画面幅の大きさにより可変となります。