facebook twitter hatena line email

「Css/sprite」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==cssスプライト作成サイト== http://kuchikomi.tim.jp/yama2/CSSSprite/CSSSprite.html ==cssスプライトサンプル== <style type="text/css"> .spriteImg{back...」)
 
(cssスプライトサンプル)
 
行3: 行3:
  
 
==cssスプライトサンプル==
 
==cssスプライトサンプル==
 +
画像間隔 1 px 1 px
 
  <style type="text/css">
 
  <style type="text/css">
 
  .spriteImg{background-image:url(sprite.png);}
 
  .spriteImg{background-image:url(sprite.png);}

2015年8月30日 (日) 02:23時点における最新版

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">