Home > 技術 > CSSで画像の一部を使える「CSS Sprites」

CSSで画像の一部を使える「CSS Sprites」

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: 夢をかなえるゾウを読んだよ

Comments:0

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, JavaScripter Blog

Home > 技術 > CSSで画像の一部を使える「CSS Sprites」

RSS Feeds

Search

Recent Entries

Tag cloud

Categories

月別アーカイブ

このブログについて

author：hisasann

description：フリーランスで仕事しているプログラマーです。
最近はJavaScript、Rails、Java（Struts+Spring）なんかをいろいろといじっています。
今やってみたいのはFlashやActionScriptかな。
また誕生して半年になる子供の成長を見守るパパでもあります。

日々の日記 :

Hisasann’s Log@はてダ

他に運営しているブログ：

利用しているWebサービス :

最近のコメント

Powered by

Page Top