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

４．設定手順２の<div　スタイルシートの属性値>のレイアウト、バランス調整。メニュー項目の左端に空間およびフォント色、背景色を指定して完成
MENU
テーブルデザイン
CSSデザイン
xhtml1.0
xhtml1.1
コンテンツ本文
リンク
掲示板
お問い合わせ

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

メニュー項目を囲む外枠線
.menuoowaku2 {
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;
}

メニューごとの枠線・フォント色・背景色、テキストと枠線の余白および左空間
メニュー項目TOP
.menuwaku_top3 {
width:120px;
font-size:95%;text-align:left;
border-style:solid;border-width: 1px;border-color : #FFCCCC ;
margin:0px 0px 6px 0px;
padding-left:10px;
}
TOP以外のメニュー項目
.menuwaku3 {
width:120px;
font-size:95%;text-align:left;color:#FFFFFF;
border-style:solid;border-width: 1px;border-color : #B6CADE ;
background-color:#245386;
margin:6px 0px;
padding-left:10px;
} }

【左メニュー部】htmlソース表示
<div class="menuoowaku2">
<div class="menuwaku_top3">MENU</div>
<div class="menuwaku3">テーブルデザイン</div>
<div class="menuwaku3">CSSデザイン</div>
<div class="menuwaku3">xhtml1.0</div>
<div class="menuwaku3">xhtml1.1</div>
</div>
▲Top
<<　HOME　|　next　メニュー部（右）　>>