floatプロパティで２段組みレイアウトを作成する

div要素を２つ横に並べて、段組みレイアウトを作成してみましょう。 使用するのは、CSSの floatプロパティ・ clearプロパティです。

■使用例１

div.hidari1 {
	width:100px;
	float:left;
	background-color:#CC99CC;
}

div.migi1 {
	width:200px;
	float:left;
	background-color:#CC9999;
}

div.shita1 {
	clear:both;
	width:300px;
	background-color:#CCCC99;
}

<div class="hidari1">
	<ul>
	<li>メニュー</li>
	<li>メニュー</li>
	<li>メニュー</li>
	</ul>
</div>
<div class="migi1">
	<p>メインコンテンツ</p>
</div>
<div class="shita1">
	<small>フッター</small>
</div>

上記の使用例１でポイントとなるのは clear:both; の指定です。 左メニューボックスと右コンテンツボックスをfloatプロパティで横に並べると、後に続く要素もfloatプロパティの影響を受けてレイアウトが崩れてしまいます。 後に続く要素に clear:both; の指定をすることで、floatプロパティの影響をクリアしています。

使用例１では右コンテンツボックスの紫色の背景色が途中で途切れてしまっていることが気になるかもしれません。 この部分の背景色が途切れないようにしてみましょう。

■使用例２

div.sotowaku2 {
	width:300px;
	background-color:#CC9999;
}

div.hidari2 {
	width:100px;
	float:left;
	background-color:#CC99CC;
}

div.migi2 {
	width:200px;
	float:left;
}

div.shita2 {
	clear:both;
	width:300px;
	background-color:#CCCC99;
}

<div class="sotowaku2">
	<div class="hidari2">
		<ul>
		<li>メニュー</li>
		<li>メニュー</li>
		<li>メニュー</li>
		</ul>
	</div>
	<div class="migi2">
		<p>メインコンテンツ</p>
	</div>
	<div class="shita2">
		<small>フッター</small>
	</div>
</div>

上記の使用例２では、紫色の背景色が途切れないように全体を <div class="sotowaku2">～</div> で囲みました。 このやり方がベストどうかはケースバイケースですが、コンテンツ部分の背景を途切れさせたくない場合には選択肢のひとつとなるでしょう

全体をひとつのdiv要素にしてしまうことで、これらのボックス全体をセンタリングしやすくなります。 試しに全体をセンタリングしてみましょう。

■使用例３

div.sotowaku3 {
	width:300px;
	background-color:#CC9999;
	margin:0 auto;
}

div.hidari3 {
	width:100px;
	float:left;
	background-color:#CC99CC;
}

div.migi3 {
	width:200px;
	float:left;
}

div.shita3 {
	clear:both;
	width:300px;
	background-color:#CCCC99;
}

<div class="sotowaku3">
	<div class="hidari3">
		<ul>
		<li>メニュー</li>
		<li>メニュー</li>
		<li>メニュー</li>
		</ul>
	</div>
	<div class="migi3>
		<p>メインコンテンツ</p>
	</div>
	<div class="shita3">
		<small>フッター</small>
	</div>
</div>

全体を囲んでいるdiv要素にmargin:0 auto; を追加指定しました。 上下マージン0、左右マージンautoを指定することで、左右のマージン自動的に均等割り付けになって結果的にセンタリングされるというわけです。 仮に margin:10px auto; と指定すれば、上下が10px空けられたうえで、センタリングされることになります。

<div class="sotowaku3">～</div> で囲んだことによって全体をセンタリングできました。 このようにスタイル指定などの目的で全体を囲むdivなどの要素を、コンテナ要素と呼ぶことがあります。 覚えておくと何かと便利な手法の一つです。

■関連項目

Sponsors