CSSスプライトのCSSを自動で生成したい【縦並びメニュー編】

   

LINEで送る
Pocket

前回紹介したCSSスプライトのCSSを自動生成するツール。
今回は縦並びメニューの場合を作成してみました。

前回の記事:CSSスプライトのCSSを自動で生成したい【横並びメニュー編】

縦並びメニューの場合

縦並びメニューでCSSスプライトを使用するパターンではサイドメニューなどが多いのではなかろうか。
画像の高さが均等ならば迷うことはない。

「例:横幅250pxのナビゲーション、各ナビゲーションサイズは横幅:250px、縦幅70px
  それぞれのナビゲーションに「sn01」から「sn05」のclassを設定

ところが各ナビゲーションの高さが均等でない、端数の場合。

例:横幅256pxのナビゲーション、各ナビゲーションサイズは縦幅はさまざま
  それぞれのナビゲーションに「sn01」から「sn05」のclassを設定

それぞれのナビゲーション画像の高さを調べ、
その値を各classのheightに設定し、
それらのheightを段階的に加算した数値を、
background-positionに設定するという気の遠くなる作業。

そろばんなど習ったことのない僕は暗算などできるはずもなく、
毎回電卓を叩いて、画面で確認して、の無限ループ。

ナビゲーションの個別の幅は調べるから、
せめて上記の下半分CSSだけでも自動計算できないものか。
そこで作ってみたのが下記のジェネレーターだ。

CSSスプライトジェネレーターはこちら!!

class/id:

Navi01
Navi02
Navi03
Navi04
Navi05
Navi06
Navi07
Navi08
Navi09
Navi10

使用方法は下記の通り

1.まず、共通部分のCSSは別途作成。

xxxにはナビゲーションの横幅、yyyには高さ、
(xxxx/xxxxxxx/xxxx.jpg)は画像のパスとファイル名を入力。

2.Photoshopなどでスプライト用の画像を開き各ナビゲーションの始点を調べる

Photohopなどの定規を使い、各ナビゲーションの始点を調べる。
使用する画像の場合は当然、始点は「0」、次のナビゲーションは「70px」といった感じで

3.classもしくはidを設定

ジェネレーターの「class/id」にclassもしくはidを入力。
入力された値がCSSとして生成されるため、セレクタにて入力。
個別のナビゲーションには末尾01から09までのクラスが付与される。

4.各ナビゲーションの始点を入力

上部の白いボックスに各ナビゲーションの始点を入力(単位は不要)
すると下の橙色のボックスに各ナビゲーションの高さが自動計算され、
それらを含めたCSSが下部のtextareaに生成される。

5.CSSをコピーし、不要部分を削除して完了

生成されたCSSをコピーする。
作成するナビゲーションが5つの場合は「06」以下のCSSは不要となるため削除。

以上でCSSの面倒くさい部分を自動生成できた。

まとめ

以上、今回はCSSスプライトのCSSを自動で生成するツールを紹介。
ただちょっと記事を書いてみて、このジェネレータはさらに改良の余地があると確信。
バージョンアップの後、再掲載したいと思います。

 - CSS野郎, 便利ツール野郎