2カラムレイアウト - メインスペースの枠を作る

CSSで横幅と回り込みを指定し、メインスペースを作成。

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

2カラムレイアウト - メインスペースの枠を作る

ここからがいよいよCSSレイアウト最大のポイントとなります。メインスペースについて、幅をどのくらい取るか、左右どちらに寄せるかを決めたら、そのようにHTMLとCSSを記述していきます。下の例では横幅を470pxに固定し、右に配置した場合で説明します。

[HTMLの記述]

<div id="wrap">
	<div class="header">
		タイトルなど
	</div><!-- /header --> 
	<div id="inner">
		<div id="mainWrap">
			メインスペース
		</div><!-- /mainWrap -->
	</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; }
#mainWrap { width:500px; float:left; }

[ブラウザ上の表示]

タイトルなど
メインスペース

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

「<div id="mainWrap">~</div>」の範囲がメインスペースとなります。CSSでは「width」で横幅を500pxに、「float」で左寄せ(left)を指定しています。この「float」こそがCSSレイアウトの鍵になります。

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