今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites(CSSスプライト)」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは? 通常、ウェブページを制作する場合、デザインファイル(psdやpngなどの画像)をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、1度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
![独学で極める “Webデザイン”の技と心:第10回 CSS Spritesでサイトを高速化|gihyo.jp … 技術評論社](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e32ec1894255cceb3427145370f120334fc70f8/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2007%2F019_ss-design.png)