CSS spriteで複数の画像を1枚にまとめて表示する方法

CSS

ボタンやアイコンやロールオーバー画像など、1枚のウェブページを構成するために沢山の画像ファイルを使うことになる。細かいアイコンやボタンの類は、一つ一つは軽量なものだが、数が多いというだけでロードに時間がかかったりする。そこで、複数の画像を1枚にまとめて、CSSで特定の部分だけを表示して使うテクニックを使うと、表示速度を向上させることができる。

今日は三つ良く使う方法を紹介します。

①backgroundで指定する

htmlコード:
<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>
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>

③マウスオーバー時に使う

HTMLコード:

<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;
}
タイトルとURLをコピーしました