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

WEBサイトのナビゲーションなどで使用されるCSSスプライト。

「サーバーへのリクエスト回数を軽減する」
「画像をスライスする手間が省ける」

などのメリットもあり、多用されている。

しかしながら

「CSSのbackground設定がめんどくさい」

この一言に尽きるのではなかろうか。
ナビゲーションの大きさが均等かつ「200px」などと計算しやすい場合なら特に悩まない。
しかしコンテンツ幅によっては端数が多かったり、
サイトデザインやナビゲーション内の文字数の関係で、
ナビゲーションのサイズが均等であるとは限らない。

作成した画像を使用する際に、微妙にサイズが異なるという情けない場合もまれにあり、
並べてみるとナビゲーションが何だか変、ホバー時にずれるなどの事案も発生する。

何とか面倒くさいこのCSSをさくっとできへんものか考え、
画像のサイズを入力するだけでCSSを勝手に生成するジェネレーターを作成してみた。

横並びメニューの場合

今回はメインナビなどで使用されることが多い横並びメニューのパターン。

「例：横幅1000pxのナビゲーション、各ナビゲーションサイズは横幅：200px、縦幅50px
　　それぞれのナビゲーションに「mn01」から「mn05」のclassを設定

これくらいは実際に画面で見なくてもCSSを書くことができる。
ところがナビゲーション幅が端数の場合、各ナビゲーションの幅が均等でない場合どうだろう。

例：横幅724pxのナビゲーション、各ナビゲーションサイズは横幅はさまざま、縦幅50px
　　それぞれのナビゲーションに「mn01」から「mn05」のclassを設定

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

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

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

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

class/id：

	Navi01		Navi02		Navi03		Navi04		Navi05		Navi06		Navi07		Navi08		Navi09

使用方法は下記の通り

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

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

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

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

3.classもしくはidを設定

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

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

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

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

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

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

まとめ

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

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