- 2008-05-28 (水)
- 技術
第10回 CSS Spritesでサイトを高速化で紹介されていたCSS Spritesが気になった。
CSS Spritesとは例えばサイトアクセス時に各々の画像を別にするのではなく、1枚の大きな画像をダウンロードさせて使いたい部分を表示するという方法。
Mapを使って画像の一部を使うのではなく、background-positionプロパティで同じことを実現しているみたいです。
こんなこと出来たんですね。
続きでCSS Spritesを試してみたいと思います。
これはこのブログのタイトル画像の1文字目を区切ったものですが、こんな感じで使うみたい。
コードは以下の通り。
>div id="spriteslogo"<
>/div<
>style<
div#spriteslogo {
width: 28px; /*画像の横幅*/
height: 40px; /*画像の高さ*/
background-image: url(http://hisasann.com/housetect/img/title.jpg);
background-repeat: no-repeat;
background-position: -10px -14px; /* CSS Sprites用の画像のうち，どの場所の画像を出すのかx軸，y軸の順に指定*/
}
>/style<
- Newer: MacSafariでレイヤーが崩れてしまう
- Older: 夢をかなえるゾウを読んだよ
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1019
- Listed below are links to weblogs that reference
- CSSで画像の一部を使える「CSS Sprites」 from HouseTect, JavaScriptな情報をあなたに
