メニュー：しま模様風

ここではulとliでメニューを組み背景に縞模様を使っている素材を解説しています。

ファイルの新規作成

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

しま模様を作る

今回はしま模様にするため高さを2ピクセルとしています。長方形選択ツールを使い上半分の1ピクセルを薄めの色で塗りつぶします。下半分の1ピクセルは白色で塗りつぶします。これで縦のしま模様ができます。
色は薄めですがこのあたりは各自好きな色で試してください。これで完成です。

CSSでメニューを作成

200×2ピクセルの画像なので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;
background:url("画像へのパス") repeat-y;
text-align:center;
border-top:1px solid #fff;
border-bottom:1px solid #98A0F0;
}

結果

解説

今回のメニューは縦のしま模様の画像を使ったシンプルなものです。
横幅を200ピクセルと固定し縦は繰り返し表示されています。borderを使いliの上と下にそれぞれ色をつけ立体的にしています。

▲トップ