Css/sprite
提供: 初心者エンジニアの簡易メモ
cssスプライト作成サイト
http://kuchikomi.tim.jp/yama2/CSSSprite/CSSSprite.html
cssスプライトサンプル
画像間隔 1 px 1 px
<style type="text/css"> .spriteImg{background-image:url(sprite.png);} .sprite_icon_facebook_36x36_png{background-position:0px 0px;width:36px;height:36px;} .sprite_icon_google_36x36_png{background-position:0px -37px;width:36px;height:36px;} .sprite_icon_hatena_36x36_png{background-position:0px -74px;width:36px;height:36px;} .sprite_icon_line_36x36_png{background-position:0px -111px;width:36px;height:36px;} .sprite_icon_mail_36x36_png{background-position:0px -148px;width:36px;height:36px;} .sprite_icon_mixi_36x36_png{background-position:0px -185px;width:36px;height:36px;} .sprite_icon_twitter_36x36_png{background-position:0px -222px;width:36px;height:36px;} </style> <-- 以下は、各行をそれぞれ画像の表示する場所へ --> <img src="d.png" class="spriteImg sprite_icon_facebook_36x36_png"> <img src="d.png" class="spriteImg sprite_icon_google_36x36_png"> <img src="d.png" class="spriteImg sprite_icon_hatena_36x36_png"> <img src="d.png" class="spriteImg sprite_icon_line_36x36_png"> <img src="d.png" class="spriteImg sprite_icon_mail_36x36_png"> <img src="d.png" class="spriteImg sprite_icon_mixi_36x36_png"> <img src="d.png" class="spriteImg sprite_icon_twitter_36x36_png">