HTMLを2カラムレイアウトに変更する方法

2014/04/19

メインコンテンツ部分を複数のカラムで区切ると、様々な情報を見やすく掲載する事ができます。
今回の修正のサンプルページを用意しましたので、記事の内容と一緒にご覧ください。

カラムとは？

カラムとはコンテンツの列の事です。「2カラムにする」という事を分かりやすく図でご説明すると、以下のようになります。上側が1カラムで下側が2カラムです。

2カラムの方が掲載できる情報が多く、他のページのコンテンツの紹介する場合などに活用できます。 それでは実際にメインコンテンツ部分を2カラムに変更してみましょう。

HTMLの修正

メインコンテンツ部分に、右側・左側のコンテンツを書くエリアを作ります。
以下のソースコードを#main内に追加してください。

<div class="two-column">
	<div class="two-column-left">
		<h2>左カラム</h2>
		左側のカラムに入るコンテンツをここに書きます。
	</div>

	<div class="two-column-right">
		<h2>右カラム</h2>
		右側のカラムに入るコンテンツをここに書きます。
	</div>
</div>

CSSの追加

次にスタイルシートを追加して、レイアウトを整えます。
ソースコードをコピーするだけでも良いですが、仕組みを理解する事ができれば、様々な箇所で応用できますので、できれば仕組みを理解するようにしましょう。

#main .two-column-left{
	width:305px;/*幅を305pxに固定*/
	float:left;/*回り込み設定*/
	padding:10px 5px 10px 5px;/*余白を設定して見やすくする*/
}
#main .two-column-right{
	width:305px;/*幅を305pxに固定*/
	float:left;/*回り込み設定*/
	padding:10px 5px 10px 5px;/*余白を設定して見やすくする*/
}

/*------------------------------------------------------------
floatの回り込みを解除
-------------------------------------------------------------*/
#main .two-column:after{
	content : '';
	display : block;
	clear : both;
	height:0;
}

左側のカラムと右側のカラムが同じ設定になっている事にお気づきでしょうか？

今回はメインコンテンツ部分の横幅の、ちょうど真ん中で左右のカラムを区切っているので同じ設定になっていますが、左側のカラムの幅を広くして右側のカラムを狭くしたいといった場合には、それぞれのカラムの幅の設定（widthのピクセル数）を変えることで対応できます。

3カラムにする事も可能です

同じ考え方でソースコードを変えると3カラムにする事も可能です。下記のソースコード例では、3つのカラムを均等に配置しています。

<div class="three-column">
	<div class="three-column-left">
		<h2>3カラム（左）</h2>
		左側のカラムに入るコンテンツをここに書きます。
	</div>

	<div class="three-column-center">
		<h2>3カラム（中央）</h2>
		中央のカラムに入るコンテンツをここに書きます。
	</div>

	<div class="three-column-right">
		<h2>3カラム（右）</h2>
		右側のカラムに入るコンテンツをここに書きます。
	</div>
</div>

#main .three-column-left{
	float:left;
	width:200px;
	padding:10px 5px 10px 5px;
}
#main .three-column-center{
	float:left;
	width:200px;
	padding:10px 5px 10px 5px;
}
#main .three-column-right{
	float:left;
	width:200px;
	padding:10px 5px 10px 5px;
}
/*------------------------------------------------------------
floatの回り込みを解除
-------------------------------------------------------------*/
#main .two-column:after,
#main .three-column:after{
	content : '';
	display : block;
	clear : both;
	height:0;
}

あまりカラム数を増やしてしまうと、ひとつひとつのカラムの横幅が狭くなりますので、かえって情報が読みにくくなってしまう事もあります。
カラムはほどほどの数に抑えて情報を掲載するようにしましょう。