"ハイブリッドデザイン"と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; }

セルとセル内メニュー（テキスト）間の余白
/*右メニュー共通の設定*/
.right_td2 {
font-family:Verdana, suns serif;
width:100px; height:40px;
border-style:solid;border-width: 1px;border-color : #B6CADE ;
color:#3F3F3F;background-color:#FFCCCC;
padding:4px 10px;
}


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