タブ編：基本的なタブ型メニュー

ここではulとliでタブ型メニューを組む基本的な解説をしています。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：100px　高さ：30px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

丸角を利用しタブ型を作る

タブメニューは主にトップに引き出しのような形で配置されます。現在の位置を表すページなどで使われるので現在のページのタブとその他のページのタブの画像などは変える必要があります。

今回の画像は青を基調としたタブ風画像です。
まず背景を薄い青ですべて塗りつぶします。その後、長方形選択ツールなどを使い上の画像のように仕上げます。

上の画像は左上の丸角を大きくした画像です。
ここでの丸角は4×4ピクセルの大きさで丸角を作っていて、1ピクセルだけで構成するとぎざぎざが目立つので上と下に枠線よりも少し薄い青でそれぞれ塗りつぶしています。
これで完成となります。

↓完成画像

CSSで配置

ここではulとliを利用した場合のタブ型メニューを作ります。まず幅は500ピクセルにしています。そしてそれぞれのタブの幅は100ピクセルです。
liの要素にfloat:leftを加えることで横に並ぶようにしています。
そして、border-bottomで一番下の1ピクセルに枠線と同じ色の線を表示させタブのように作っています。

htmlです。

<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>

cssです。

ul{
margin:0;
padding:0;
list-style:none;
width:500px;
height:30px;
color:#ffffff;
border-bottom:1px solid #3F5DF1;
}

li{
float:left;
width:100px;
height:25px;
margin:0 4px 0 0;
padding:5px 0 0 0;
background:url("画像へのパス") no-repeat;
text-align:center;
}

結果

解説

今回の作成で当サイトでのタブ型の基本的な作り方がわかってもらえるとうれしいです。ポイントはliを横に並べただけです。
メニュー画像も特にこだわっているところもないので作りやすいと思います。
工夫するところはタブと連動するべき画像です。たとえば今回の場合はborder-bottomで指定している1ピクセルの線です。この線を画像に置き換え上のタブと連動させます。ページが変わるたびに色が変わるなどです。
そうすることで訪問者が今どのページにいるのか直感的にわかりやすくなると思います。

▲トップ