CSS Sprite スプライトで作るメニューのサンプル


こんな感じのCSS Sprite(スプライト)のメニューを作ります。

メニューリンク数や画像は変更できます。

 

1.画像を2つ用意します。

↓メニュー用の画像1
メニュー用画像1
↓メニューhover用の画像2
メニュー用画像2
↓メニューの背景画像(無くても構いません)
背景用画像

 

2.下記の入力フォームに画像URLを入れて下さい。

通常のメニュー用画像1の画像URLを入れて下さい。


hover状態のメニュー用画像2の画像URLを入れて下さい。


背景画像の画像URLを入れて下さい。(無くても構いません。)

画像の横幅:px 画像の高さ:px

 

3.メニュー1の四角形の辺の長さをピクセルで入力して下さい。

横幅、高さの数字を、半角数字で入れて下さい。

よく分からなければ、このままでもかまいません。

メニューの幅


例えばこの画像なら、横幅205px、高さ95pxです。
メニュー画像

横幅:ピクセル
高さ:ピクセル

 

4.背景画像を表示させる位置指定します。

各メニューに合った画像が表示される位置を指定します。

メニュー1の左上の角が、画像の何ピクセル目から開始されるかを入れます。

意味が分からなかったら、このままでも構いません。

  メニュー

メニュー1の左上の角の位置
左からの距離:ピクセル 上からの距離:ピクセル

メニュー2の左上の角の位置
左からの距離:ピクセル 上からの距離:ピクセル

メニュー3の左上の角の位置
左からの距離:ピクセル 上からの距離:ピクセル

メニュー4の左上の角の位置
左からの距離:ピクセル 上からの距離:ピクセル

 

メニュー5の左上の角の位置
左からの距離:ピクセル 上からの距離:ピクセル

メニュー6の左上の角の位置
左からの距離:ピクセル 上からの距離:ピクセル

メニュー7の左上の角の位置
左からの距離:ピクセル 上からの距離:ピクセル

メニュー8の左上の角の位置
左からの距離: ピクセル 上からの距離:ピクセル

 

5.作成するボタンを押してください。