みなさま、こんにちは。

HTMLコーディング担当の佐藤です。

少しずつ暖かくなってきましたね。
私、ついに花粉症になった模様です(´ω｀。)
絶対ならないと思ってたのに。。。。
花粉と仲良く暮らしていきます。

さて今回はCSSスプライトについて書こうと思います。

まずCSSスプライトとは？
webサイトではアイコンなど多くの画像を使用しています。これら1つ1つをサーバーにリクエストすると
表示が遅く、重いサイトになってしまいます。
CSSスプライトは、使用するいくつかのアイコンを1つの画像にまとめることでリクエスト数を少なくし
サイト表示を軽くしようというテクニックです。

実装する際は、以下のCSSプロパティを使用します。
★background-image
★background-position

画像を指定して、positionで位置を指定する。

簡単ですね。

でもデメリットもあるそうな。
・背景画像をリピート出来ない
・スプライト画像を作るのに手間がかかる
・CSSファイルがbackground-positionの記述だらけになる

サイト表示の高速化をしたいときにはぜひ使いたいですね。

以上、佐藤でした。