「よーし、俺様のサイトをオープンしちゃうぞ！」と作ってはみたものの、どこからみてもシロートまるだし。「あれ？こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。 デザインも内容もテクニックも、めざせバージョンアップ！ 白熊　吾郎 　 GORO SHIROKUMA Web & 映像業界で生きる（モーション）グラフィックス屋。マスコミインハウスからフリーに。 ■バックナンバーへ ■ テーブルのテクニック （7） インターフェイスにはいろいろな種類がありますが、今回は「タブ」をデザインしてみます。OSにも使われるほどのオーソドックスなデザインだけあって、見やすさや誘導のしやすさで企業オフィシャルや通販系のサイトでよく見かけます。またユーザーだけでなくクリエイターにも優しく、基本的なテーブルワークだけで作れるのも嬉しいところです。 極力テーブルだけで作る 前まずは画像をあまり使わず、極力テーブルだけで作ってみます。 完成データはこちら>> １）テーブルの計画をたてる 今回は縦に並べた３つのテーブルで構成し、インターフェイス部分のテーブルに「タブ」を作ります。 各テーブルは横幅700ピクセル固定。コーナー数は４つ。各コーナーには、オレンジ、ピンク、スカイブルー、パープルのコーナーカラーを設定し、タブ、タイトル、背景色などで統一感を持たせます。 大まかなデザインプランを立てる。 ２）html作成とプロパティ設定 Dreamweaverで新規書類を作成。ページプロパティでタイトル、各カラーを設定し、「左マージン」「右マージン」「マージン幅」「マージン高さ」の４項目を「０」にします。これでブラウザの端にテーブルが寄せられます。 ３）テーブルの作成 編集画面で横幅700ピクセルのテーブルを作成します。レイアウト用の単純なテーブルなので [行数=1 / 列数=1 / 幅=700ピクセル / セル内余白=0 / セル内間隔=0 / ボーダー=0 ]です。 4）ページ全体の作成 同様にコンテンツ用とフッター用のテーブルも作成します。テーブル挿入時のパラメータは同じです。 このとき各テーブルは連続して作成し、改行は入れません。 合計３つのテーブルが挿入できたら、すべてを選択してプロパティパレットでセンタリングしておきます。 各テーブルの間にタグは不要。ここまでできたら全体をセンタリングする。 [ NEXT→]