トップページ  > ウェブ制作小ネタTIPS  > floatプロパティで2段組みレイアウトを作成する

★ウェブ制作小ネタTIPS

floatプロパティで2段組みレイアウトを作成する
Internet Explorer Google Chrome Safari Firefox Opera
広告

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

■使用例1

CSSソース

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;
}

HTMLソース

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

ブラウザ上の表示

  • メニュー
  • メニュー
  • メニュー

メインコンテンツ

フッター

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

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

■使用例2

CSSソース

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;
}

HTMLソース

<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>
↓↓↓

ブラウザ上の表示

  • メニュー
  • メニュー
  • メニュー

メインコンテンツ

フッター

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

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

■使用例3

CSSソース

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;
}

HTMLソース

<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などの要素を、コンテナ要素と呼ぶことがあります。 覚えておくと何かと便利な手法の一つです。

■関連項目

float …… 左または右に寄せて配置する
clear …… 回り込みを解除する
floatプロパティで2段組みレイアウトを作成する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ