スタイルシートの入門サイトです。-コンテンツ枠を作る-

スタイルシート探偵
トップページ → 2カラムレイアウト − コンテンツ枠を作る
 〜 コンテンツ枠を作る 〜
 
前の項目でヘッダーとフッターの枠が出来たので、今度はヘッダーとフッターに
挟み込まれる感じでコンテンツ枠を作ります。
 
2カラムレイアウトですから、メニューカラムと、コンテンツカラムの2列に分けます。
また、メニューとコンテンツを囲む枠を作り、余白を持たせます。
ここで注意したいのが、全体の幅が750pxですので、余白+メニュー幅+コンテンツ幅が750px以内に
ならないとレイアウトが崩れてしまいます。
 
全体幅が左余白、メニュー枠幅、中間余白、コンテンツ枠幅、右余白の合計となるので
余白を5pxにすると、5×3=15pxが全体の余白幅になります。 
全体幅750px−15px=735pxがメニューとコンテンツに割り当てれる幅となります。
ここでは、メニュー幅を185px、コンテンツ幅を550pxとします。
 
[CSSファイル]

#outline{
 width: 750px;
 border: solid 1px #ff0000;
}
.header{
 text-align: left;
}
.footer{
 text-align: center;
 font-size: 50%;
 color: lightgray;
}
.margin{
 margin:5px 5px;
}
.menu{
 width: 185px;
 float: left;
}
.contents{
 width: 550px;
 float: right;
}

[HTMLファイル]

<html>
<body>

<!-- 外枠 -->
<div id="outline">

 <!-- ヘッダー枠 -->
 <div class="header">
 </div>
 
 <div class="margin">
 
  <!-- コンテンツ枠 -->
  <div class="contents">
  </div>
  
  <!-- メニュー枠 -->
  <div class="menu">
  </div>
 
 </div>
 
 <!-- フッター枠 -->
 <div class="footer">
 </div>

</div>

</body>
</html>

 
 
Copyright 2008- CSS-TANTEI All rights reserved.