画像表示の高速化
たくさんのアイコンを一つにまとめて、読み込み速度を上げる方法。
「CSS Sprite」
１つの画像サイズが40×40なら
縦に並べる
隙間を50px
以上準備の場合の
htmiは…
<ul>
<li><a href="#" class="one">一</a></li>
<li><a href="#" class="ten">十</a></li>
<li><a href="#" class="hund">百</a></li>
<li><a href="#" class="thous">千</a></li>
<li><a href="#" class="ten-thous">万</a></li>
</ul>
a要素にclass属性を指定。同じ画像なら同じclass指定。
CSSソースは…
/* 無くてもか */
ul { list-style:none; padding:0; margin:0; }
li { height:40px; margin-bottom:5px; overflow:hidden; }
/* 必要 */
li a {
background: url("画像.gif") no-repeat top left;
display: block;
padding-left: 45px;
padding-top: 10px;
height: 40px;
}
.one { background-position: 0 0; }
.ten { background-position: 0 -90px; }
.hund { background-position: 0 -180px; }
.thous { background-position: 0 -270px; }
.ten-thous { background-position: 0 -360px; }
以上です。
そして画像を結合してくれるサイト紹介。