3カラムレイアウト - 2:1の枠を作る

事前に決めた幅に従い、まずは2カラムを作る。

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

3カラムレイアウト - 2:1の枠を作る

事前に決めた幅に従い、まずは2カラムレイアウトを作ります。ここではセンター・左・右の順にHTMLを記載する場合を説明します。

まず左に寄せる枠から。ここには後でセンタースペースと左サイドバーが入ることになりますので、この2つの枠と中間の余白を足した幅を設定します。左160px、センター460px、余白10pxを合計すると、左に寄せる枠の幅は630pxになります。

右に寄せる枠は当初の予定通り120pxを指定します。

[HTMLの記述]

<div id="wrap">
	<div id="header">
		タイトルなど
	</div><!-- /header --> 
	<div id="inner">
		<div id="largeWrap">
			ここをさらに2段組に
		</div><!-- /largeWrap -->
		<div id="sideBetaWrap">
			右サイドバー
		</div><!-- /sideBetaWrap -->
		<div class="clear"><hr /></div>
	</div><!-- /inner -->
	<div id="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; }
#sideBetaWrap { float:right; width:120px; }
.clear { clear:both; }
.clear hr { display:none; }

[ブラウザ上の表示]

タイトルなど
ここをさらに2段組に
右サイドバー

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

ついつい忘れがちになるclearによる回り込みの解除指定ですが、崩れの原因となりますので必ず設置しましょう。

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