3カラムレイアウト - 3カラムに仕上げる

2カラムの内部に、さらに2カラムをつくれば3段組の完成。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

3カラムレイアウト - 3カラムに仕上げる

2カラムができたら、広い方の枠内にさらに2段の枠を作成します。幅は事前に決めてありますので、ここまでの作業を確認しながら、再度2カラムレイアウトを施してください。

[HTMLの記述]

<div id="wrap">
	<div id="header">
		タイトルなど
	</div><!-- /header -->
	<div id="inner">
		<div id="largeWrap">
			<div id="mainWrap">
				メインスペース
			</div><!-- /mainWrap -->
			<div class="sideAlphaWrap">
				左サイドバー
			</div><!-- /sideAlphaWrap -->
			<div class="clear"><hr /></div>
		</div><!-- /largeWrap -->
		<div class="sideBetaWrap">
			右サイドバー
		</div><!-- /sideBetaWrap -->
		<div class="clear"><hr /></div>
	</div><!-- /inner -->
	<div class="footer">
		コピーライトなど
	</div><!-- /footer --> 
</div><!-- /wrap -->

[CSSの記述]

body { text-align:center; }
#wrap { width:780px; text-align:left; margin:0 auto; }
#inner { margin:0 10px; }
#largeWrap { float:left; width:630px; }
#mainWrap { float:right; width:460px; }
#sideAlphaWrap { float:left; width:160px; }
#sideBetaWrap { float:right; width:120px; }
.clear { clear:both; }
.clear hr { display:none; }

[ブラウザ上の表示]

タイトルなど
メインスペース
左サイドバー

右サイドバー

コピーライトなど
(分かりやすくするため、高さ、色、枠線をつけています)

以上で3カラムレイアウトは完成です。

「2度目の2カラム」を作成する際も回り込みの解除指定を忘れないよう、注意してください。

ここで使用しているCSSプロパティ