「よーし、俺様のサイトをオープンしちゃうぞ！」と作ってはみたものの、どこからみてもシロートまるだし。「あれ？こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。 デザインも内容もテクニックも、めざせバージョンアップ！ 白熊　吾郎 　 GORO SHIROKUMA Web & 映像業界で生きる（モーション）グラフィックス屋。マスコミインハウスからフリーに。 ■バックナンバーへ ■ テーブルのテクニック （8） タブを使ったインターフェイスの２回目です。 前回はhtmlとスペーサーgifだけで作りましたが、今回は画像を使ってみます。 前回作ったタブをベースに作りますので、htmlの作成方法は前回を参照してください。 タブに画像を使う サイト全体のテイストや、デコレーションを考えてタブに画像を使います。 透過gifにしてタブ同士の間を空けるのがコツです。 完成データはこちら>> １）ベースのサイズを作る Illustratorで新規書類を作ります。 長方形ツールで [幅：100pt　高さ：40pt　線：なし　塗り：ページの背景色] での長方形を作成します。レイヤー名を「base」にしておきます。 定型サイズを描画するときは、長方形ツールを持ったら 画面をドラッグではなくクリックして数値入力する。 このとき数値の後ろに「pt」を入力すると、通常入力単位を 「mm」「cm」などにしていてもポイント数値で指定できる。 ２）ベースをコピー 新規レイヤー「tab」を作り、１）の長方形をコピーします。このとき、長方形を選択ツールで選んで、レイヤーパレットのレイヤー名の隣にある■をoptionキーを押しながらドラッグすると、同じ位置にコピーできます。「base」レイヤーはロックしておきます。 ３）タブを描画 「tab」レイヤーに角丸長方形ツールで [幅：98pt　高さ：50pt　角丸の半径：8pt　線：なし　塗り：タブのカラー] で描画します。 4）タブのサイズ調整 角丸長方形を選択ツールで選び、オブジェクト＞アレンジ＞最背面へ　を実行し、２でコピーしてきた長方形の背面に回り込ませます。編集＞すべて選択　し、整列パレットで「水平方向中央に整列」「垂直方向上に整列」を実行します。 [ NEXT→]