トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • ブログ表示が速くなるCSS Sprites

Googleの検索結果ページは、画像ファイルはたった一つです。CSS Spritesという技を使っていますが、これを使ったらかなりブログの表示が速くなりました。画像サイズだけでなく画像のファイル数が少なくなると体感で早くなったのがわかりました。
Googleサービス(ブログランキング)
CSS Spritesとは?

通常ウェブページやブログを作成する場合は複数の画像を使って作成します。CSS Spritesとは、それら複数の画像を一つのファイルにすることで一度の読み込みで一つの画像ファイルを切り抜いてHTMLのimg要素として埋め込んだりCSSの背景画像として指定するテクニックのことです。

GoogleやYouTuve、Flicker等大手サイトではこのテクニックが使われCSS Spritesはかなり注目を集めるようになったそうです。実際にこのテクニックを使ってブログテンプレートを作成しましたが、体感でかなりの違いがあることがわかります。サイトやブログが開くのが重いという方は是非このテクニックをマスターして使ってみて下さい。

CSS Sprites使い方

基本形です。このブログの左のタイトルメニューの背景に画像を使用している場合を例とします。
まず、CSSでは、『width』、『height』、『background』の3つの要素が必要です。

HTML
<h3 class="title">カレンダー</h3>
CSS
.title {
width=180px;
height=30px;
background=url(sprites.png) no-repeat 0px -178px;
}
少し面倒なのが、backgroundの画像の座標です。画像ファイルの左上の基点(0,0)と表示したい画像イメージの左上の基点のずれを測って記載します。例の場合だと表示したい画像イメージが画像ファイルの左上の基点から見て下方向に178pxずれているので-178pxとなります。

CSS Spritesの注意点

いくつかCSS Spritesの注意点があります。

リピート用画像はCSS Spritesでは使えないため別画像とする。

CSS Sprites用の統合画像が,アルファチャンネルを持った透過画像となっている場合,IE6で正しく表示されないことがある。

リストアイコン等使用するときは、CSS Sprites用の統合画像を作成する際にある程度離しておいておかないといけない。(height指定をすることでリストが2行になった時に2行目が表示されなくなったりするので、複数行のリスト行の場合はMAXの高さをmax-heightしてリストアイコンもそのmax-height分話して統合画像に配置する必要がある)


コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。