CSSスプライト

こんにちは。

今回はCSSのテクニック「CSS Sprite」について紹介します。

CSSスプライトとは、

複数の画像を一つにまとめ、CSSで表示位置を変更するテクニックのことです。
 

通常、画像はボタンやアイコン等のパーツに分かれていますが、

それらをまとめて一つにすることで、画像の読み込みが１度で済みます。
 

それによって、リクエスト数を減らすことができ、

サーバへの負担が少なくなるのです。
 

また、ブラウザでリソース（画像）が再利用されるので、

ページの読み込み時間も早くなります。
 

現在「You Tube」や「Google」で使用されています。

メリット

• 　　画像ファイルをスライスする必要がない
• 　　ファイル数が少なくなり、管理が楽になる
• 　　読み込みの再に、リクエストが一回で済むので、読み込みが早い

デメリット

• 　　alt属性が使えない
• 　　背景画像のリピート表示ができない
• 　　更新する時に手間がかかる（サイズを変えるとCSSも変えなければいけないため）

以上の内容を踏まえ、用途に合わせて使えるようにしましょう。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html