CSSスプライトを使用する上の留意点
つぎに、前ページので紹介したメリット・デメリットを留意し、使用上の重要事項をまとめます- 変更する可能性の少ない画像においてのみ使用する
- 繋げる画像間の余白をなるべく少なくする
- 頻出するような画像限定で利用する
画像のファイルサイズが大幅に大きくなるような場合は、圧縮することを推奨します。
具体的使用方法＝画像置換を例に説明
■マウスオーバーで色が変わるボタン表示
なお、ここでは、画像置換という手法で、画像そのものを背景として使用していきます。
【HTML側】
<p id="con11"><a href="question.html">今すぐ申し込む</a></p>
【CSS側】
■CSS側の記述
※マウスオーバー時(a:hover)に、見せる背景の位置指定を変更しています
このように、background-positionプロパティを用いて、表示させるものを選定していくのですが、同様に前ページのTwitterサイトにおいても、同類の手法が施されています。
表示パフォーマンスの向上が必要と感じたときは、ひとつの手法として、1度試してみてはいかがでしょうか。
