WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： マークアップ >CSS

今回は最近のWEBサイトにかなり登場するようになった「CSSsprite」について書こうと思います。
CSSspriteって何？と思う方もいらっしゃると思いますが、簡単に言うと、「WEBサイトで使う画像を1つのファイルにまとめて、必要な部分だけ表示させる」技術です。

この利点は、読み込む画像の数が少ないので、WEBサイトの表示を高速化することができます。
このCSSsprite、見る側にとっては表示が早くて便利ですが、これを作成するのは、普通に画像を表示させるのに比べて手間がかかるのが難点でした。
しかし、そんな手間を一気に解消してくれるWEBサービスが最近増えてきています。
その中でも、使いやすいサイトを1つご紹介します。

Stitches – An HTML5 sprite sheet generator

使い方は非常に簡単です。

一つの画像にまとめたい複数の画像を用意したら、先ほどのサイトのウィンドウにドラッグ＆ドロップするだけです。

すると、このように複数の画像を1枚にまとめてくれます。

さらに、書くのが面倒だったCSSのbackground-positionも、自動的にサイズを計算して、作成してくれます。

あとは、CSSを少し手直しするだけで、実用可能です。
ボタンのON/OFFの切り替えの作成にも便利そうです。
このような便利なツールにも助けられながら、日々、WEB制作を行っています。

CSSspriteを自分で作成するのが面倒で避けていた方は、一度使ってみてはいかがでしょうか。