CSSスプライトについて

CSSスプライトとは

CSSスプライトとは複数の画像を１つにまとめ、

CSSのポジションで表示を切り替えて画像を切り替える技術のことです。

1つにまとめることで、画像へのリクエストを減らし読み込みの容量を減らすことができ、

表示速度の改善もつながりページの最適化にも良いと思います。

よくマウスオーバー時に画像を変えたりする場合

や

アイコン（Yahooでも使ってたりします）

に使っていますね

ただ、更新が手間で一つ増えるとCSSの修正が必要になったりするので

どこでも使っていいわけではなく、

何かツールがあれば使った方がいいと思います。（ちなみに僕は知りません）

僕は滅多に変わらない部分や

何度も登場する汎用的なアイコン

などには使っていいと思います

例えばグローバルナビゲーションやサイトに表示するアイコンなど

ちなみに僕は

CSSの

text-indent: 100%;

overflow: hidden;

white-space: nowrap;

で、HTMLを非表示にして

後は、調整対象を

background-position: 〇〇;

で画像の位置を調整しています。

こうして実現しています

新しく作るサイトにしか導入したことはありませんが

そこまで手間ではないので、

実装する際は検討候補にいれてみてください。

Follow me!