CSSスプライト用の画像とCSSを
自動で生成してくれる、という
Webツールのご紹介。作るのは
結構面倒なのでこうして自動化
してくれると楽で助かりますね。
CSSスプライトで使いたい画像を1つのフォルダにしてZIPにしてアップロードすると即座に1枚の画像にし、CSSも発行してくれます。
SpriteMachine
ZIPをドラッグ&ドロップすれば即座にCSSスプライト用の画像とCSSが入ったファイルをDLします。数によるかもしれませんけど一瞬で出来るのは凄いです。
img.spritemachine_foo { width : 450px ; height : 72px ; background : url (sprite.png) 0px 0px no-repeat ; } img.spritemachine_bar { width : 16px ; height : 16px ; background : url (sprite.png) 0px -72px no-repeat ; } img.spritemachine_hoge { width : 16px ; height : 16px ; background : url (sprite.png) -16px -72px no-repeat ; } img.spritemachine_huga { width : 16px ; height : 16px ; background : url (sprite.png) -32px -72px no-repeat ; } img.spritemachine_piyo { width : 16px ; height : 16px ; background : url (sprite.png) -48px -72px no-repeat ; } |
CSSは上記のように作られます。
機会があれば使ってみようかなと思います。