手打ち倶楽部

WEB標準への道

neko

縦３段横２列組基本形

全体のイメージ
kihon-left.gif 最もよく見受けられパターンです。徹底的にこれで作っちゃえば後はいくらでも応用がききますのでお勧めです。ナビゲーションをfloat:left;で指定する方法とposition:absolute; で指定する方法があります。因みにこのサイトはfloatで三つ横に並べています。どちらもメリットとデメリットはあるので、比較的安心感のあるサイドメニューを固定位置に指定する「position:absolute」から練習してみます。
サンプルHTML、仕上がり
CSSファイル： kihon.css

ページの箱を作る

コンテンツの配置と基本構造
kihon-body.gif #container {
margin-right: auto;
margin-left: auto;
border-width: 1px;
border-color: #959595;
border-style: solid;
position: relative;
width: 800px;
background-color: #cccccc;
}
サンプルHTML
CSSファイル： css01.css

ヘッダー（ＢＯＸ）を挿入する

高さは任意です。色々やってみましょう
kihon-header.gif #header {
height: 150px;
width: 800px;
background-color: #0065CE;
}
サンプルHTML
CSSファイル： css02.css

ナビゲーション（ＢＯＸ）を挿入する

ポジションは固定です（幅は任意）
kihon-navi.gif #navigation {
left :0;
position:absolute;
width: 170px;
top: 150px;
background-color: #FF6500;
}
サンプルHTML
CSSファイル： css03.css

コンテンツ（ＢＯＸ）を挿入する

記事の内容を表示します（幅は任意）
kihon-contents.gif #contents {
margin-left:170px;
width: 630px;
background-color: #00CFCE;
}
サンプルHTML
CSSファイル： css04.css

フッター（ＢＯＸ）を挿入する

著作権表示などを表示します（高さは任意）
kihon-left.gif #footer {
clear: both;
height: 80px;
width: 100%;
background-color: #9C9A9C;
}
サンプルHTML
CSSファイル： css05.css
Backback　next 追加予定アリ
CSSやれば出来る ワープロ的ソフトに慣れきっている方が手打ちに転向したとき、最初の壁にぶち当たるのがレイアウトです。視覚的にレイアウトを捉えられないために挫折される方が多いのですが、＋思考で考えるとCSSレイアウトを克服すれば鬼に金棒であることは間違いないですね。この関門を通り抜け、レイアウトを自在に操る事ができたなら、益々楽しくなること間違いなしです。