2年 ago
1386 Views

複数画像を一つにまとめてCSSでコントロールするCSS Spriteについて

css

CSS Spriteとはページ内で使用する複数の画像を一つにの画像ファイルにまとめ、その画像の必要な部分をCSSで表示領域を指定して表示するやり方です。
海外のsliderなどをダウンロードするとコントローラーなどでよく見かけるやり方ですよね。
これのメリットは、一つの画像にまとめているため画像データダウンロード時のサーバーに対して行うリクエストを数を減らすことでwebパフォーマンスが上がることです。
10個のファイルを読み込む(ダウンロードする)には、サーバへリクエストを10回送る必要がありますが、読み込む画像が1個であれば、送るリクエストも1回で済みます。つまり画像を1つに結合すれば、たくさんサーバと通信する必要がなくなるため、その分だけ高速化できるというわけです。
色々なやり方がありますが、ここでは、テキストを非表示にしたところ(text-indet:-9999px)にwidthとheightによる表示領域の指定とbackgroundによる背景指定で後ろから忍ばせる的な。はみ出る部分は(overflow: hidden)で隠します。。。
使うとこは、アイコンとかボタンとかマークで使うのが一般的ですね。
ちなみに、スプライトすると読み込みが約1/3ぐらいまでになります。リピートして使うようなものには是非活用したいですよね。
自分でするのは面倒って方はCSS Sprite ジェネレイターがあるのでチェックしてみてください。

■Generator
CSS Sprite Generator
http://spritegen.website-performance.org/
csssprites
http://csssprites.com/
css spritegen
http://css.spritegen.com/

■html
<ul>
<li class="list-1">楽天</li>
<li class="list-2">yahoo</li>
</ul>

■CSS

Article Categories:
html&CSS
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ