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

CSSデザインをパーツ別に検証 ５　【フッタ部】の設定

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

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

【フッタ部】の設定

１．著作権等の表示
　>>　例：Copyright © Hybrid design NAVI 2005 all right reserved,

２．テキストを<div　枠線設定したスタイルシートの属性値>タグで囲む
Copyright © Hybrid design NAVI 2005 all right reserved,

３．<div　枠線設定したスタイルシートの属性値>にテキスト周りの領域調整追加
Copyright © Hybrid design NAVI 2005 all right reserved,

４．テキストのセンタリングおよび背景色を指定して完成
Copyright © Hybrid design NAVI 2005 all right reserved,


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

フッタの枠線および背景色
.headwaku_back2 {
border-style:solid;border-width: 1px;border-color : #B6CADE ;
font-size:95%; text-align:center;
background-color:#F3F3F3;
margin: 0px; padding:10px;
}


【フッタ部】htmlソース表示
<div class="headwaku_back2">
Copyright © Hybrid design NAVI 2005 all right reserved,
</div>
▲Top
<<　HOME　|　next　CSSデザイン完成テンプレート　>>