img要素でCSS Spriteする方法

「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。 背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。 「そういう場合、背景画像に変更するのが本来では？」というツッコミはなしでお願いします（笑）。

[tomoworks]

CSS Sprite凄い苦手なんですが、これなら使わないこともないかなぁ。んーんー。

[ysk_lucky-star]

WCAGにおいてはアウトじゃないか？

[fukken]

CSSを切った時の表示が微妙

[susi-paku]

今後の為にメモメモ ('A')っ｜RT @stocker_jp: CSSスプライト / “img要素でCSS Spriteする方法: 小粋空間”

[kns_1234]

CSSスプライト

[akira_maru]

undefined

[hiroshi_revolution]

img要素でCSS Spriteする方法: 小粋空間

[maRk]

表示が崩れたのですが、 Mac 版Chrome できちんとみられたかたいます?? /シークレットウィンドウでみられたので多分はてブ拡張があやしい ？？