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

CSSデザインをパーツ別に検証 １　【ヘッダ部】の設定

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

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

【ヘッダ部】の設定

１．サイト名称を<h1>〜</h1>タグで挟む
site title

２．<h1>〜</h1>タグを<div>タグで囲む


site title


３．site titleのフォント変更、テキストと枠線間の領域調整（上下左右）
site title

４．背景色を指定して完成
site title


【ヘッダ部】スタイルシート設定内容

ヘッダの枠線および背景色
.headerwaku_back {
border-style:solid;border-width: 1px;border-color : #B6CADE ;
background-color:#F3F3F3; }

見出しのフォントおよび見出しと枠線間の余白
.h1no3 {
height:20px;
font-family:Verdana, suns serif;
margin:10px 0px 10px 40px;
}


【ヘッダ部】htmlソース表示
<div class="headwaku_back">
<div class="h1no3">site title</div>
</div>
▲Top
<<　HOME　|　next　メニュー部（左）　>>