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

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

ファイルの新規作成

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

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

今回は横幅が200pxと大きいのでグラデーションツールを使いグラデーションをかけます。

描画色を濃い色にして背景色を薄くしています。

上の画像のようにプリセットの中にある描画色から背景色へを選びます。
次に200pxの左端から右端にかけてグラデーションをかけます。この場合は左端が濃い青になり右端が薄くなります。
これで完成となります。
完成画像は小さくて見にくいのでここでは省きます。

CSSでメニューを作成

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

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;
color:#fff;
background:url("画像へのパス") repeat-y;
border-bottom:1px solid #1126E8;
border-top:1px solid #99A2F0;
text-align:center;
height:25px;
}

結果

解説

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

今回のメニューはグラデーション画像を使ったシンプルなものです。立体的にするためにborderを使い上に薄い青を、下に濃い青を指定しています。
こうすることで浮き上がったボタンのような立体的なメニューとなります。

▲トップ