CSSでやってみる！レイアウトモデル

基本となるウェッブページのレイアウトをCSSで構成してみます。ナヴィゲーションと内容とが分かれた、極めて一般的なレイアウトです。CSSは、ほぼ必要最低限なものです。後は、このCSSを加工し応用すれば良いでしょう。

model1　見本のHTML

model2　Navigationを下に固定し、本文のみスクロールする

model3　Navigationを上に固定し、本文のみスクロールする

model4　Navigationを左に固定し、本文のみスクロールする

model5　Navigationを左に配置し、本文と一緒にスクロールする

navi+contents+footer

上にナヴィゲーション・真ん中に本文・下にフッターと3つに区分し、本文の背景のみを白にする配色にします。

ここで使っているCSSは、再配布するなり加工するなり、御自由にお使い下さい。

positionを使っているため、CSS2をサポートするブラウザが必要です。
○　Mozilla(Mac)、Internet Explorer 5(Mac)で確認しました。おそらく、Mozilla(Win)でも支障は無いはずです。
×　Internet Explorer 6(Win)では、model1,5以外は駄目です。