2010年5月 8日

各画像を一つにまとめてbackground-positionで指定するのは?

まずGoogleが実際使っている画像ファイルを見てみましょう。

Googleの各アイコン

いろんな画像、アイコンが混じっていますね。
そして実際使うときはCSSのbackground-positionで表示するモノを指定しているようです。
例えば検索結果の星マークのCSSを見ると

background-position: -117px -117px;

Webサーバとのコネクションが1回で済むので、
それが狙いですね。

background-positionに関しての説明は:
http://www.htmq.com/style/background-position.shtml

ちなみにこういることをやってくれるライブラリもあるようです。
使ったことはまだないですけど。
http://csssprites.org/

Share on Twitter Share the post
Qihuan Piao

朴 起煥

東京で働いている「外人歴」9年のソフトウェア「ライター」。いつの間にか納豆が食えるようになり、これで日本に慣れきったと思いきやまだまだ驚きが続いてる。読んだり書いたりするのが好きで、自身の経験や本から得た「何か」をここに書き出してる。最近古本屋にハマってる。

他にも英語中国語で書いてます、よろしければチェックしてみてください。