| ■ 使用する画像 |
|
 ←サイトのタイトル画像 ( 115px × 30px )
 ←タブ ( 各、91px × 30px )
 ←タブ下のサブメニューの背景用画像 ( 各、5px × 5px )
|
| ■ スタイルシートファイルへの記述 |
|
 レイアウトに関する指定
* { margin: 0; padding: 0; }
#mainbody { width: 640px; margin: 10px 2% 0px; }
.header_top { width: 640px; }
.main { width: 640px; height: 300px; background: Oldlace; font-size: 14px; }
#footer { clear: both; width: 640px; }
その他の指定
td { font-size: 12px; }
.blue { background: url(blue.png); font-size: 14px; font-weight: bold; }
.red { background: url(red.png); font-size: 14px; font-weight: bold; }
.green { background: url(green.png); font-size: 14px; font-weight: bold; }
|
| 回り込みを使用しない単純な 1 カラムのレイアウトです。 |
|
| ■ HTMLファイルへの記述 |
ソース
<body>
<div id="mainbody">
<div class="header_top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><img src="title.png" alt="タブナビゲーションページの作り方タイトル" width="115" height="30"></td>
<td class="blue" width="91" height="30" align="center"><a href="index.htm"><font color="#ffffff">会社概要</font></a></td>
<td class="red" width="91" height="30" align="center"><a href="index2.htm"><font color="#ffffff">製品情報</font></a></td>
<td class="green" width="91" height="30" align="center"><a href="index3.htm"><font color="#ffffff">ご案内</font></a></td>
</tr>
<tr><td height="20" style="background:url(blue_back.png);font-weight:bold;" colspan="4">
<font color="#ffffff">■ ご挨拶 | ■ 企業理念 | ■ 沿革 |</font></td></tr>
</table>
</div>
<div class="main" style="padding-top:150px;">会社概要タブの内容</div>
<div id="footer">
<hr>
Copyright 2007 いまさらHTML,CSS講座 joke All rights reserved
</div>
</div>
</body>
|
| header_top の内容は、table 要素で、タイトル画像、タブ、タブ下のサブメニューをレイアウトします。 |
| 上記のHTMLファイルのソースを、index.htm と名前 + 拡張子をつけ保存します。 |
| 次に、赤色タブのHTMLファイルを作成します。サブメニューバーの背景を指定している画像、赤文字の blue_back.png を、red_back.png に書き換え、同じく赤色部分のテキストを、赤色タブのテキスト (企業理念) の内容に合わせて書き換え、index2.htm と名前 + 拡張子をつけ保存します。 |
| ⇒ index2.htm |
| 最後に、緑色タブのHTMLファイルを作成します。サブメニューバーの背景を指定している画像、赤文字の blue_back.png を、green_back.png に書き換え、同じく赤色部分のテキストを、緑色タブのテキスト (ご案内) の内容に合わせて書き換え、index3.htm と名前 + 拡張子をつけ保存します。 |
| ⇒ index3.htm |
| これで、サブメニューバーの背景色と、内容となるテキストが違う他、レイアウト等、全く同じ HTMLファイルが 3ファイル作成できました。 |
| 訪問者にはタブをクリックすれば、同じウィンドウで内容が切り替わるので、あたかもタブでサイトを操作しているように感じますが、実際には複数の HTMLファイルが入れ替わっています。 |
今回は、各タブの色付き画像を、セルの背景色に指定し、テキストを乗せましたが、 のように、タブを画像そのもので作成する事もできます。 |
|
|
|
|
|
|
タブナビゲーションページの作り方