2カラムレイアウト － サイドバーの枠を作る
メインスペース枠の作成と同様に、サイドバーの枠を作成します。こちらも枠の幅を決めるわけですが、この際、メインスペースとサイドバーの幅の合計値が外枠の幅を超えないように注意してください。
また、寄せる方向はメインスペースとは逆の方向になります。下の例ではサイドバーを右250pxで指定した場合について説明します。
HTMLの記述
<div id="wrap"> <div id="header"> タイトルなど </div><!-- /header --> <div id="inner"> <div id="mainWrap"> メインスペース </div><!-- /mainWrap --> <div id="sideWrap"> サイドバー </div><!-- /sideWrap --> </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:right; }
#sideWrap { width:250px; float:left; }
[ブラウザ上の表示]
タイトルなど
メインスペース
サイドバー
メインスペースの幅、サイドバーの幅、左右の余白を全て合計すると770pxとなり、外枠の幅780pxに10px足りない状態になりますが、この10pxはメインスペースとサイドバーの間の余白となります。
ウェブデザインをする上で、余白はとても重要で、左右中間の余白を揃えることでサイトがキレイに整理されて見えます。この余白を確保するため、「メイン＋サイド＋左右余白＋中間余白＝外枠の幅」となるよう、それぞれの幅を決めていきましょう。
例：外枠700px＝メイン510px＋サイド160px＋左右中間余白計30px
例：外枠750px＝メイン440px＋サイド250px＋左右中間余白計60px etc...