タブ編：ページと同化させる

ここではページと同化させるタブ型メニューを作成していきます。

ファイルの新規作成

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

ページと同化させるには？

まず塗りつぶしツールを使いすべて白で塗りつぶします。
そして上より半分のところを長方形選択ツールを使い選択してグラデーションをかけます。
ここでは上から下にかけて白から灰色に変化させています。

そして上の画像のように左右両方の1ピクセルの部分を灰色で塗りつぶしています。ここでの灰色はグラデーションの部分の灰色と同じです。
そして2重にグラデーションをかけるテクニックを使い白から透明に変化させるグラデーションを全体の下から上へかけます。

↓完成画像

これはこれで保存をします。

次に完成した画像を上下反転させます。
↓完成画像

ページを浮かばせる

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

ページを浮かばせる感じにするための背景を作ります。簡単に作るために高さ30ピクセルとし幅も500ピクセルとしています。
このあたりはCSSの繰り返し表示などを使うことによってもっと画像を小さくできます。
ポイントは下から3ピクセルあけたところからグラデーションをはじめているところです。これをすることでグラデーションがずれ立体感が増す感じになります。

↓完成画像

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:30px;
background:url("500×30pxの画像のパス") no-repeat;
}

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

li a{
display:block;
padding-top:3px;
width:100px;
height:27px;
text-decoration:none;
color:#000;
background:url("下に灰色がある画像のパス") no-repeat;
}

li a:hover,#here a{
color:#000;
background:url("上に灰色がある画像のパス") no-repeat;
}

結果

解説

基本的にはマウスを上にのせた時にページと同化するイメージで作成しています。
ポイントはすべてをulとli内だけで実現しているのでhtmlがシンプルですみます。

見方によってはタブというよりもボタンみたいな感じがするかも知れません。
色が白と灰色だけで構成されているのでとても組み立てやすいと思います。

▲トップ