ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（６）
タブメニューの作り方（６）
画像を使用する場合をテーブルでレイアウトしてタブメニュー化する方法です。
この方法は、リスト（<ul>）をスタイルシートでタブ化するのとは違い、テーブル（<table>）と画像（<img>）を直接指定して作成します。
構造は下記の様に、各タブメニューに該当する画像をセル（<td>〜</td>）の中に４個とも入れ、それぞれの画像自体に直接リンクを作成してます。
| MENU: |     |
| ここに内容をいれます。 | |
<table>枠を表示すると
| MENU: | |
| ここに内容をいれます。 | |
解説
【考え方】
- テーブルを作成する
- タブメニューになる画像をセルの中に入れる
- 画像にリンクを作成する
上記の３つの考えで可能になりますので、それぞれの作成の仕方は
- テーブルを作成する→表を使いたい
- タブメニューになる画像をセルの中に入れる→画像を入れたい
- 画像にリンクを作成する→他のページにリンクする（画像）
を確認して下さい。
また、下記の『ここに内容をいれます。』のセル枠の色と太さの指定は、スタイルシートで設定しています。
| ここに内容をいれます。 |
全ての書き方です。
全ての書き方
.box
{
border-top:solid 10px #ff3300;
border-bottom:solid 1px #ff3300;
border-left:solid 1px #ff3300;
border-right:solid 1px #ff3300;
}
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>MENU:</td>
<td>
<a href="リンク先">
<img src="画像" border="0" width="幅" height="高" alt="">
</a>
<a href="リンク先">
<img src="画像" border="0" width="幅" height="高" alt="">
</a>
<a href="リンク先">
<img src="画像" border="0" width="幅" height="高" alt="">
</a>
<a href="リンク先">
<img src="画像" border="0" width="幅" height="高" alt="">
</a>
</td>
</tr>
<tr>
<td colspan="2" class="box">ここに内容をいれます。</td>
</tr>
</table>
ホームページ作成ＴＯＰ > メニュー > タブメニューの作り方（６） > このページのＴＯＰ ▲
