CSS Spriteとは小さなアイコンなどの画像をくっつけて一つの画像として保存し、表示する際にはCSSで位置を指定して表示するという手法だ。Googleをはじめ、膨大なアクセスのあるWebサービスで活用されている手法であり、画像を読み込むコネクション数を減らすことができる。 0
CSS Spriteを作るならぜひ使いたい
0
CSS Spriteを作成するWebサービスも存在するが、画像が追加されるたびにアップロードし直すのが面倒だった。そこでTonttuを使ってみよう。 0
今回紹介するフリーウェアはTonttu、Adobe AIR製のCSS Sprite作成ソフトウェアだ。
Tonttuの使い方は簡単だ。起動したらひとまとめにした画像ファイルをドロップして登録する。並べ方は縦または横と自由に選択できる。画像の隙間を空けたり、ドラッグして位置を入れ替えることも可能だ。自動で並べると隙間が空くので、より小さなサイズにしようと思ったら並べ替えが必要だろう。 0
生成されたファイル
作業が完了したらExportボタン押して保存するフォルダを決定する。すると画像ファイル、CSSファイル、そしてサンプルのHTMLの3つが保存される。後は自由にWebサイトに組み込めば良いだけだ。さらにプロジェクトファイルとして現在の状況を保存しておけるので、後日画像を追加するといった際にも簡単にできる。 0
CSS Spriteを作成するサイトでは更新作業はあまり想定されていない。だから追加でアイコンファイルができると、それだけは別で管理される状態になってしまっていた。だがTonttuを使えばそのような心配はない。Web開発者、デザイナーともに知っておきたいソフトウェアだ。 0
Tonttu
http://collamo.jp/Tonttu/
MOONGIFTの関連記事
このエントリーを含むTwitter
アンケート