Applerの備忘録（仮）: CSS Spriteの流派をまとめる
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
画像置換のあれへの補足
先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました: /* Phark method */ .ir { height: 100px; width: 400px; background: url(image.png) no-repeat 0 0; text-indent: -9999px; } このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事 で紹介されました: /* Kellum method */ .ir { height: 100px
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
