テーブルデザインをパーツ別に検証 １ 【ヘッダ部】の設定
- テーブルデザイン骨格イメージ
-
ヘッダ （HPタイトルなど） メニュー メインコンテンツ サブメニュー メニュー サブメニュー メニュー サブメニュー メニュー ダミーセル フッタ （著作権表示など） - 【ヘッダ部】の設定
- １．サイト名称を<h1>〜</h1>タグで挟む
-
site title
- ２．<h1>〜</h1>タグを<table>タグで囲む
-
site title
- ３．テーブル幅（左右長）の設定 （例：width="450"）
-
site title
- ４．見出しのフォント変更とテーブルのborderをスタイルシートに置き換え
-
site title
- ５．テーブルと見出し（テキスト）間の余白調整
-
site title
- ６．テーブルに背景色を指定して完成
-
site title
- 【ヘッダ部】スタイルシート設定内容
- テーブルの枠線および背景色
- .headerwaku_back {
border-style:solid;border-width: 1px;border-color : #B6CADE ;
background-color:#F3F3F3; } - 見出しのフォントおよび見出しとテーブル間の余白
- .h1no3 {
font-size: 200%;
font-weight:bold;
color: #245386;
font-family:Verdana, suns serif;
height:25px;
margin:15px 0px 10px 40px;
} - 【ヘッダ部】htmlソース表示
-
<table class="headerwaku_back" width="450"
summary="タイトルをテーブルレイアウト">
<tr>
<td><h1 class="h1no3">site title</h1></td>
</tr>
</table> - 透視図（イメージ）
-
site title
<< HOME | next メニュー部（左） >>