CSSスプライトのCSSを自動で生成したい【縦並びメニュー編】
前回紹介したCSSスプライトのCSSを自動生成するツール。
今回は縦並びメニューの場合を作成してみました。
前回の記事：CSSスプライトのCSSを自動で生成したい【横並びメニュー編】
Contents
縦並びメニューの場合
縦並びメニューでCSSスプライトを使用するパターンではサイドメニューなどが多いのではなかろうか。
画像の高さが均等ならば迷うことはない。
「例：横幅250pxのナビゲーション、各ナビゲーションサイズは横幅：250px、縦幅70px
それぞれのナビゲーションに「sn01」から「sn05」のclassを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
aside ul { width:250px; height:350px; } aside ul li { width:250px; height:70px; } nav ul li a { display:block; width:100%; height:100%; background:url(xxxx/xxxxxxx/xxxx.jpg); } nav ul li.sn01 a {background-position:0 0;} nav ul li.sn02 a {background-position:0 -70px;} nav ul li.sn03 a {background-position:0 -140px;} nav ul li.sn04 a {background-position:0 -210px;} nav ul li.sn05 a {background-position:0 -280px;} |
ところが各ナビゲーションの高さが均等でない、端数の場合。
例：横幅256pxのナビゲーション、各ナビゲーションサイズは縦幅はさまざま
それぞれのナビゲーションに「sn01」から「sn05」のclassを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
aside ul { width:256px; height:auto; overflow:hidden; } nav ul li { width:256px; } nav ul li a { display:block; width:100%; height:100%; background:url(xxxx/xxxxxxx/xxxx.jpg); } aside ul li.mn01 {height:67px;} aside ul li.mn02 {height:71px;} aside ul li.mn03 {height:72px;} aside ul li.mn04 {height:72px;} aside ul li.mn05 {height:68px;} aside ul li01 a {background-position:0 0px;} aside ul li02 a {background-position:0 -67px;} aside ul li03 a {background-position:0 -138px;} aside ul li04 a {background-position:0 -210px;} aside ul li05 a {background-position:0 -282px;} |
それぞれのナビゲーション画像の高さを調べ、
その値を各classのheightに設定し、
それらのheightを段階的に加算した数値を、
background-positionに設定するという気の遠くなる作業。
そろばんなど習ったことのない僕は暗算などできるはずもなく、
毎回電卓を叩いて、画面で確認して、の無限ループ。
ナビゲーションの個別の幅は調べるから、
せめて上記の下半分CSSだけでも自動計算できないものか。
そこで作ってみたのが下記のジェネレーターだ。
CSSスプライトジェネレーターはこちら！！
使用方法は下記の通り
1.まず、共通部分のCSSは別途作成。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
aside ul { width:xxx; height:auto; overflow:hidden; } aside ul li { width:xxx; } nav ul li a { display:block; width:100%; height:100%; background:url(xxxx/xxxxxxx/xxxx.jpg); } |
xxxにはナビゲーションの横幅、yyyには高さ、
(xxxx/xxxxxxx/xxxx.jpg)は画像のパスとファイル名を入力。
2.Photoshopなどでスプライト用の画像を開き各ナビゲーションの始点を調べる
Photohopなどの定規を使い、各ナビゲーションの始点を調べる。
使用する画像の場合は当然、始点は「０」、次のナビゲーションは「70px」といった感じで
3.classもしくはidを設定
ジェネレーターの「class/id」にclassもしくはidを入力。
入力された値がCSSとして生成されるため、セレクタにて入力。
個別のナビゲーションには末尾01から09までのクラスが付与される。
4.各ナビゲーションの始点を入力
上部の白いボックスに各ナビゲーションの始点を入力（単位は不要）
すると下の橙色のボックスに各ナビゲーションの高さが自動計算され、
それらを含めたCSSが下部のtextareaに生成される。
5.CSSをコピーし、不要部分を削除して完了
生成されたCSSをコピーする。
作成するナビゲーションが5つの場合は「06」以下のCSSは不要となるため削除。
以上でCSSの面倒くさい部分を自動生成できた。
まとめ
以上、今回はCSSスプライトのCSSを自動で生成するツールを紹介。
ただちょっと記事を書いてみて、このジェネレータはさらに改良の余地があると確信。
バージョンアップの後、再掲載したいと思います。
