"ハイブリッドデザイン"とCSSデザインの比較　< パーツ別検証 >

CSSデザインをパーツ別に検証 ４　【中央コンテンツ部】の設定

CSSデザイン骨格イメージ
ヘッダ （HPタイトルなど）
メニュー
メニュー
メニュー
メニュー
メニュー
メインコンテンツ
サブメニュー
サブメニュー
サブメニュー

フッタ （著作権表示など）
★注１：上記作例におけるメインコンテンツの下線とフッタの上線との隙間を無くしたいときは、メインコンテンツの下線からのmargin指定を０にし、フッタ部との間に
　br { clear : both ; } を指定。
★注２：メインコンテンツ下線からのmarginを０に指定したとき、ネットスケープはその前後のfloatによる回り込み指定の後、回り込み解除のclear:bothはmargin指定０として機能するが、IEではフッタ部にclear:bothを指定しても空間領域が発生する。
上記作例のような場合、コンテンツ内のコンテンツ本文は別途、
<div　テキストに対する余白設定をしたスタイルシートの属性値>
で囲むことで、メインコンテンツ下線からのmarginは、IEでもネットスケープでも設定どおりに表示。

【中央コンテンツ部】の設定

１．左右メニューと中央部分をそれぞれ下記のように想定
　左　>>　MENU、テーブルデザイン、CSSデザイン、xhtml1.0、xhtml1.1
　中央　>>　コンテンツ本文
　右　>>　リンク、　掲示板、　お問い合わせ

２．中央コンテンツを<div　スタイルシートの属性値>タグで囲む
MENU
テーブルデザイン
CSSデザイン
xhtml1.0
xhtml1.1
コンテンツ本文
リンク
掲示板
お問い合わせ

３．必要に応じて<div　スタイルシートの属性値>にテキストと枠線間の余白や中央コンテンツの高さを追加
MENU
テーブルデザイン
CSSデザイン
xhtml1.0xhtml1.1
コンテンツ本文
リンク
掲示板
お問い合わせ

４．設定手順３の<div　スタイルシートの属性値>に背景色を指定して完成
MENU
テーブルデザイン
CSSデザイン
xhtml1.0xhtml1.1
コンテンツ本文
リンク
掲示板
お問い合わせ


【中央コンテンツ部】スタイルシート設定内容

コンテンツ本文を囲む外枠線および背景色
.oowaku_back {
height:200px;
font-size:95%;text-align:left;
border-style:solid;border-width: 1px;border-color : #B6CADE ;
background-color:#F5F5F5;
margin:5px 4px 2px 30px;
padding:10px 20px 20px 20px;
float:left;
}


【中央コンテンツ部】htmlソース表示
<div class="oowaku_back">コンテンツ本文</div>
▲Top
<<　HOME　|　next　フッタ部　>>