ボタンやアイコンやロールオーバー画像など、1枚のウェブページを構成するために沢山の画像ファイルを使うことになる。細かいアイコンやボタンの類は、一つ一つは軽量なものだが、数が多いというだけでロードに時間がかかったりする。そこで、複数の画像を1枚にまとめて、CSSで特定の部分だけを表示して使うテクニックを使うと、表示速度を向上させることができる。
今日は三つ良く使う方法を紹介します。
①backgroundで指定する
htmlコード：
<div class=”box”></div>
<div class=”box”></div>
CSSコード：
<style>
.box {
width: 23px;
height: 23px;
border: 1px solid #000;
background: url(images/bg2.jpg) -127px -100px;
}
</style>
②background-positionで指定する
HTMLコード：
<div class=”box2 btn1″></div>
<div class=”box2 btn2″></div>
<div class=”box2 btn1″></div>
<div class=”box2 btn2″></div>
CSSコード：
<style>
.box2 {
background: url(images/bg2.jpg);
display: inline-block;
height: 23px;
width: 23px;
border: 1px solid #000;
}
.btn1 {
background-position: -127px -100px;
}
.btn2 {
background-position: -127px 0px;
}
</style>
<style>
.box2 {
background: url(images/bg2.jpg);
display: inline-block;
height: 23px;
width: 23px;
border: 1px solid #000;
}
.btn1 {
background-position: -127px -100px;
}
.btn2 {
background-position: -127px 0px;
}
</style>
③マウスオーバー時に使う
HTMLコード:
<a class=”sprite_link” href=”#”>リンク</a>
<a class=”sprite_link” href=”#”>リンク</a>
CSSコード：
a.sprite_link {
background: url(images/sprite-menu.jpg);
width:140px;
height:30px;
display: block;
cursor:pointer;
padding-top:10px;
text-align:center;
color:#fff;
}
a.sprite_link:hover{
background-position:left bottom;
}
a.sprite_link {
background: url(images/sprite-menu.jpg);
width:140px;
height:30px;
display: block;
cursor:pointer;
padding-top:10px;
text-align:center;
color:#fff;
}
a.sprite_link:hover{
background-position:left bottom;
}
