メニュー：基本的縦グラデーション

ここではulとliでメニューを組み背景に縦のグラデーションを使っている素材を解説しています。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
今回は横幅を縦25ピクセルとしてメニューを作ります。
幅：1px　高さ：25px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

1×25ピクセルのグラデーションの画像を作る。

前回と同様にグラデーションツールを使い今度は縦にグラデーションをかけます。注意するのはグラデーションの方向がずれないようにすることです。

次に上の1ピクセルに薄い青をさらに一番下の1ピクセルに濃い青をそれぞれ鉛筆ツールを使い塗りつぶします。
これは立体的にするためにしています。cssでborderを使えば同じことができますが何色も使う場合は画像で作ったほうが無難です。

CSSでメニューを作成

1×25ピクセルの画像なのでrepeat-xを使い横に繰り返し表示させるのがポイントです。

htmlです。

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

cssです。

ul{
margin:0;
padding:0;
list-style:none;
width:200px;
}

li{
margin:0;
padding:3px 0 0 0;
color:#fff;
background:url("画像へのパス") repeat-x;
text-align:center;
height:22px;
}

結果

解説

ulとliを使ったメニューは簡単に項目が増やせるので便利です。
メニューに画像を使う場合繰り返し表示させるのは重要なテクニックとなります。とくに横幅可変タイプの場合は重宝します。

今回のメニューは縦のグラデーション画像を使ったシンプルなものです。
縦は25ピクセルまでになっていますが横は繰り返し表示させているので自由に幅は決めることができます。

▲トップ