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

１．画像を２つ用意します。

↓メニュー用の画像１

↓メニューhover用の画像２

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

メニュー１の左上の角の位置 左からの距離：ピクセル 上からの距離：ピクセル メニュー２の左上の角の位置 左からの距離：ピクセル 上からの距離：ピクセル メニュー３の左上の角の位置 左からの距離：ピクセル 上からの距離：ピクセル メニュー４の左上の角の位置 左からの距離：ピクセル 上からの距離：ピクセル

メニュー５の左上の角の位置 左からの距離：ピクセル 上からの距離：ピクセル メニュー６の左上の角の位置 左からの距離：ピクセル 上からの距離：ピクセル メニュー７の左上の角の位置 左からの距離：ピクセル 上からの距離：ピクセル メニュー８の左上の角の位置 左からの距離： ピクセル 上からの距離：ピクセル

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