ホームページ作成(メニューを作る)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > メニュー > タブメニューの作り方(6)

タブメニューの作り方(6)

画像を使用する場合をテーブルでレイアウトしてタブメニュー化する方法です。

この方法は、リスト(<ul>)をスタイルシートでタブ化するのとは違い、テーブル(<table>)と画像(<img>)を直接指定して作成します。

構造は下記の様に、各タブメニューに該当する画像をセル(<td>〜</td>)の中に4個とも入れ、それぞれの画像自体に直接リンクを作成してます。

MENU:
ここに内容をいれます。

 <table>枠を表示すると

MENU:
ここに内容をいれます。

解説 

【考え方】

  1. テーブルを作成する
  2. タブメニューになる画像をセルの中に入れる
  3. 画像にリンクを作成する

上記の3つの考えで可能になりますので、それぞれの作成の仕方は

  1. テーブルを作成する→表を使いたい
  2. タブメニューになる画像をセルの中に入れる→画像を入れたい
  3. 画像にリンクを作成する→他のページにリンクする(画像)

を確認して下さい。

また、下記の『ここに内容をいれます。』のセル枠の色と太さの指定は、スタイルシートで設定しています。

ここに内容をいれます。

全ての書き方です。
全ての書き方

.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>

ホームページ作成TOP > メニュー > タブメニューの作り方(6) > このページのTOP ▲