- 〜 コンテンツ枠を作る 〜
-
- 前の項目でヘッダーとフッターの枠が出来たので、今度はヘッダーとフッターに
- 挟み込まれる感じでコンテンツ枠を作ります。
-
- ２カラムレイアウトですから、メニューカラムと、コンテンツカラムの２列に分けます。
- また、メニューとコンテンツを囲む枠を作り、余白を持たせます。
- ここで注意したいのが、全体の幅が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>
-
-
|
