Webイロハ
5)タブ用テーブルの作成
1つ目のテーブルにカーソルを入れ、タブ用テーブルを作成します。
[行数=2 / 列数=(コーナー数+3) / 幅=100% / セル内余白=0 / セル内間隔=0 / ボーダー=0 ]
今回は4コーナーなので7列にします。
capture
6)各タブの作成
タブ用テーブルが挿入されたら、すぐにプロパティパレットの「テーブル幅をピクセルに変換」ボタンをクリックします。これでテーブルが7等分(近似値ですが)されます。
capture
7)2行目のセルを連結
2行目のセルを横一列選択し、「セルの連結」を行います。ここにつっかえ棒としてスペーサーgifファイル(#33参照)を [幅=700ピクセル 高さ=10ピクセル] で挿入しておきます。
一見用途不明なこの2行目こそが、現在地を示す役割を果たすのです。
capture
8)空きセルの処理
左右両端の1セルはカラーを設定せず、代わりにスペーサーgifを [幅=100ピクセル 高さ=40ピクセル] で挿入しておきます。
capture
9)各セルに背景色とテキストを設定
1行目の各セルにコーナーのカラーを設定します。コーナーのほか、トップページへ戻るボタンにもセルの背景色をつけておきます。各セルにコーナー名を入れ、リンクを張っておきます。
また現在アクティブなコーナーには、2行目のセルの背景色にも同じカラーを入れておきます。
capture
10)他の部分にデータを挿入
コンテンツやフッターにデータを挿入します。
capture
あとは各ページを量産すれば、軽いタブインターフェイスのサイトが完成です。
今回はスペーサーgifを入れていますが、工夫すればテーブルだけで作ることももちろん可能です。軽さを重視するなら研究してみてください。
でもデザイン的にもうひとひねりしたくなったら……、次回はタブに画像を使ってみます。

【Point】 129:タブインターフェイスならテーブルだけで作れる!
テーブルのテクニック (7)  終わり
[ ←BACK ]