タブ編：引き出すタブ型メニュー

ここでは引き出すタブメニューを作成していきます。

ファイルの新規作成

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

立体的タブを2種類作る

上の画像のように100×50ピクセルの上より半分を下から上にかけてグラデーションをかけます。上の部分が明かりが当たっている感じにするので下から上にかけて明るくなうようにします。

そのほかの部分をグラデーションの暗い部分にあわせてすべて塗りつぶします。

次に上の角の2箇所を丸角にします。上の画像のように5×5ピクセルの大きさの丸角を作ります。
これでひとつめの画像の完成です。
これはこれで保存をしておきます。

↓完成画像

次に、前作成した画像を切り取りツールを使い切り取ります。

切り取るツールの設定は上のようにします。
幅を100px、高さを30pxとして切り取ります。一番左上からはじめればきれいにこの大きさで切り取れます。

これで完成となります。

↓完成画像

CSSで配置

今回はマウスを上にのせた時にタブを変化させるので画像を2個使います。

htmlです。

<ul>
<li id="here"><a href="URLを入れる">メニュー</a></li>
<li><a href="URLを入れる">メニュー</a></li>
<li><a href="URLを入れる">メニュー</a></li>
<li><a href="URLを入れる">メニュー</a></li>
</ul>

cssです。

ul{
margin:0;
padding:0;
list-style:none;
width:500px;
height:50px;
border-bottom:5px solid #165EE9;
}

li{
float:left;
margin:0 5px 0 0;
padding:0;
text-align:center;
}

li a{
display:block;
margin-top:20px;
padding-top:3px;
width:100px;
height:27px;
text-decoration:none;
color:#fff;
background:url("100×30pxの画像のパス") no-repeat;
}

li a:hover,#here a{
color:#fff;
margin:0;
height:47px;
background:url("100×50pxの画像のパス") no-repeat;
}

結果

解説

ポイントはマウスをタブにのせた時に上に引き出されるようにCSSで指定しているところです。
まずaをdisplay:blockでブロック要素にしています。これでwidthとheightやmargin,paddingを使えるようにしています。まず通常のリンクは30pxのほうの画像を背景に指定しています。しかしこのままだとulは50pxにしているので合いません。
そこで背景画像を調節するためにmargin-topで20px余白をあけ合計でheightが50pxになるようにしています。

次にマウスをタブの上に持ってきたときに引き出されるようにするために50pxのほうの画像をa:hoverの背景に指定しています。
ここで重要なのはmarginを0にしておくことです。これがないと前に指定しているmargin-top:20px;が効くようになりおかしくなります。

最後にid="here"を使い現時点でのページをあらわしています。現時点でのページのタブはすべて50pxのほうの画像を使いたいのでa:hoverと一緒のものを指定しています。

これで解説は終わります。これを応用すれば下に引き出したりすることができたりするので使える考え方だと思います。

▲トップ