2カラムレイアウト － clear指定は忘れずに

2カラムレイアウト － clear指定は忘れずに

2カラムレイアウトもおおよそ出来上がりましたが、最後の仕上げが待っています。それが「clear」による「左右の回り込みの解除」です。

この解除指定を行わない場合、外枠がうまく内枠の下まで伸びていかないなど、崩れの原因になりますので、忘れずに指定するようにしましょう。この解除指定はCSSでレイアウトした全てのページで使いますので、外部ファイルで指定しておくと便利です。

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

body { text-align:center; }
#wrap { width:780px; text-align:left; margin:0 auto; }
#inner { margin:0 10px; }
#mainWrap { width:480px; float:right; }
#sideWrap { width:260px; float:left; }
.clear { clear:both; }
.clear hr { display:none; }

ここでは、「.clear」の中にhrタグを入れ、それをdisplayで非表示（none）に指定し、問題のないHTMLの書き方で、ブラウザ上からclearしていることが分からないようにしています。

これで2カラムCSSレイアウトの作成は終了です。

もし、内枠がうまく左右に寄らない場合には、メイン・サイドのスペースを若干縮めるなど、微調整を行ってください。

また、左右の位置を入れ替えたい場合は、「#mainWrap」「#sideWrap」に指定した「float」の値「right」「left」を入れ替えるだけで簡単に変更することが可能です。

なお、このレイアウト例では、「.clear」を除いたセレクタに「id」を使用しています。これは、ヘッダー・フッター、メインスペース、サイドバーを1ページにつき1ページしか使っていないためです。（clear部分は他に使う可能性があるので「class」にしました。）

メインスペース、サイドスペースを2箇所に使いたい場合など、同一ページ内に複数回同じセレクタを指定する必要がある場合は、「id」ではなく「class」を使用してください。（詳しくは「idとclassの違い」参照）

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

• clear
• display
• float
• width
• margin
• text-align