CSSレイアウトの基本 3カラム

3カラム

前回2カラムのレイアウトの解説したので、今回は

このような3カラムのレイアウトの解説をしようと思います。

…ここからが続き

CSSレイアウトのデモページ

デモページで使われてるソース

xhtml

<div id="wrapperBox">
<div id="headerBox">
<p>headerBox</p>
<!--/ #headerBox--></div>
<div id="navigationBox">
<p>navigationBox</p>
<!--/ #navigationBox--></div>

<div id="containerBox">

<div id="contentsBox">
<div id="mainBox">
<p>mainBox</p>
<!--/ #mainBox--></div>
<div id="subBox">
<p>subBox</p>
<!--/ #subBox--></div>
<!--/ #contentsBox--></div>

<div id="subNaviBox">
<p>subNaviBox</p>
<!--/ #subNaviBox--></div>

<!--/ #containerBox--></div>

<div id="footerBox">
<p>footerBox</p>
<!--/ #Box--></div>
<!--/ #wrapperBox--></div>

CSS

div#wrapperBox	{
	width: 580px;
	margin-bottom: 25px;
}
div#headerBox	{
	width: 550px;
	padding: 10px 15px;
	background: #333;
	color: #FFF;
	margin:
}
div#navigationBox	{
	width: 560px;
	padding: 3px 10px;
	background: #CCC;
}
div#containerBox	{
	width: 580px;
}
div#containerBox:after	{
	height:	0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
div#contentsBox	{
	width: 460px;
	float: right;
}
div#contentsBox:after	{
	height:	0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
div#subNaviBox	{
	width: 110px;
	float: left;
	background:#99C;
	padding: 120px 5px;
}
div#mainBox	{
	float: left;
	width: 360px;
	background: #FC9;
	padding: 120px 5px;
}
div#subBox	{
	float: right;
	width: 80px;
	background: #09F;
	padding: 120px 5px;
}
div#footerBox	{
	width: 550px;
	padding: 5px 15px;
	background: #666;
	color: #FFF;
}

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article