"ハイブリッドデザイン"と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
コンテンツ本文
リンク
掲示板
お問い合わせ


【右メニュー部】スタイルシート設定内容

メニュー項目を囲む外枠線
.menuoowaku_r2 {
font-size:95%;text-align:left;
border-style:solid;border-width: 1px;border-color : #B6CADE ;
margin:2px 4px 2px 4px;
padding:5px 5px 0px 5px;
float:left;
}

テキストの背景色、テキストセンタリングおよびテキストと枠線の余白
.menuwaku_right {
width:120px;font-size:95%;text-align:center;
border-style:solid;border-width: 1px;border-color : #245386 ;
background-color:#FFCCCC;
margin:0px 0px 6px 0px;
}

【右メニュー部】htmlソース表示
<div class="menuoowaku_r2">
<div class="menuwaku_right">リンク</div>
<div class="menuwaku_right">掲示板</div>
<div class="menuwaku_right">お問い合わせ</div>
</div>
▲Top
<<　HOME　|　next　中央コンテンツ部　>>