CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター

本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。

CSSスプライト（CSS Sprites）とは

CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。
CSSスプライトの仕組み

CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。

※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見た目を変えることができるのでデバイスに合わせた幅で表示したい場合にもHTMLを変更する必要がないので便利です。

例えば、既存のサイトにCSSスプライトを適用する場合、サイト内のどの画像をCSSスプライトの対象にするか決定し、選択した画像を1 枚の画像になるように並べ、画像の一部分を表示するためのHTMLとCSSを記述します。

<広告>
Webデザイン制作,Flash制作｜リフォーム｜マンションリフォーム｜Ed Hardy(エドハーディー)｜外壁塗装｜不動産｜軽井沢不動産｜横須賀｜リフォーム 京都 大津市｜うなぎ｜東京 横浜 横須賀 中古マンションリフォーム｜Isar Getriebetechnik KG｜Special gears and gearboxes｜SE構法(工法)｜SEO対策｜ホームページ制作(作成)｜WEBデザイン,FLASH制作の簡単相互リンク｜最新SEO対策最適化ツールチェック(Yahoo,Google,Bing)｜定価制(定額制)リフォーム