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

テーブルデザインをパーツ別に検証 ２　【左メニュー部】の設定

テーブルデザイン骨格イメージ
ヘッダ （HPタイトルなど）
メニューメインコンテンツサブメニュー
メニューサブメニュー
メニューサブメニュー
メニュー
ダミーセル
フッタ （著作権表示など）


【左メニュー部】の設定

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

２．左メニュー、中央コンテンツおよび右メニューを<table>タグで囲む
左メニューにダミーセルを書き加え、中央コンテンツのテキスト行が可変したときダミーセルのheight値を調整して連動させる。
MENU中央コンテンツリンク
ハイブリッドデザイン掲示板
CSSデザインお問い合わせ
xhtml1.0
xhtml1.1
　ダミーセル

３．左メニューおよびメニュー項目の各セルをスタイルシートに置き換え
MENU中央コンテンツリンク
ハイブリッドデザイン掲示板
CSSデザインお問い合わせ
xhtml1.0
xhtml1.1
　ダミーセル


４．セルとセル内メニュー（テキスト）間の余白調整
MENU中央コンテンツリンク
ハイブリッドデザイン掲示板
CSSデザインお問い合わせ
xhtml1.0
xhtml1.1
　ダミーセル


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

セルの枠線　（ヘッダ部と共通設定）
.headerwaku {
border-style:solid;border-width: 1px;border-color : #B6CADE ;
background-color:#F3F3F3; }

セルとセル内メニュー（テキスト）間の余白
/*左メニュー項目TOPの設定*/
#left_tdtop2 { font-family:Verdana, suns serif;
width:140px; height:40px;
border-style:solid;border-width: 1px;border-color : #FFCCCC ;
color:#245386;background-color:#FFFFFF;
padding:4px 10px;
}
/*左メニュー共通の設定（TOP以外）*/
.left_td2 {
font-family:Verdana, suns serif;
width:140px; height:40px;
border-style:solid;border-width: 1px;border-color : #B6CADE ;
color:#FFFFFF;background-color:#245386;
padding:4px 10px;
}


【左メニュー部】ソース表示　赤文字表記
<table border="1" cellpadding="1" cellspacing="4"
summary="メニューをテーブルレイアウト">
<tr>
<td id="left_tdtop2">MENU</td>
<td rowspan="6">中央コンテンツ</td>
<td>リンク</td>
</tr>
<tr>
<td class="left_td2">ハイブリッドデザイン</td><td>掲示板</td>
</tr>
<tr>
<td class="left_td2">CSSデザイン</td><td>お問い合わせ</td>
</tr>
<tr>
<td class="left_td2">xhtml1.0</td>
</tr>
<tr>
<td class="left_td2">xhtml1.1</td>
</tr>
<tr>
<td>　<strong>ダミーセル</strong></td>
</tr>
</table>
▲Top
<<　HOME　|　next　メニュー部（右）　>>