WEB制作(html・css(スタイルシート))に関する各種メモ書き

複数の画像を1枚にくっつけて保存し、サイト表示を高速化させる(CSS Sprite)

CSS sprite を使用するとサイトの表示が高速になります。

手法としては、複数の画像を1枚に画像にくっつけて保存(mysprite.png)し、表示するときに

position: absolute;
top: -210px; /* 上下にずらす */
top: 0px;        /* 左右にずらす */

でずらすというもの。

Google で使われているCSS Sprite の方法
html
<a class="menu_test" href="#"><img src="/css/mysprite.png"</a>
css
a.menu_test {
    display: block;
    overflow: hidden;
    position: relative;
    width : 50px;
    height : 20px;
}
    .menu_test img{
        position: absolute;
        top: -210px;
    }
    /* ロールオーバー */
    .menu_test img:hover{
        position: absolute;
        top: -230px;
    }

これだけ。簡単です。

zipで複数画像を圧縮して送るとCSS Sprite を作成してくれる。

http://ja.spritegen.website-performance.org/

Fireworks用エクステンション ■CSS Sprite Extension

http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html


関連エントリー

No.745
10/25 09:19

edit

css