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

JQ

2013/11/15

CSSspriteでWEBサイトの表示を高速化

投稿者: 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を自分で作成するのが面倒で避けていた方は、一度使ってみてはいかがでしょうか。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ