CSSスプライトで画像を円滑に表示させる

CSSスプライトで画像を円滑に表示させるCSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 CSS スプライトを使うデメリットメリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは？ alt 属性が使えない背景画像のリピート表示ができない更新する時に手間がかかる（サイズを変えると CSS も変えなければいけないため）以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみ CSS スプライトを使用しています。ということで、早速作ってみましょ

[nilab]

「CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます」

[hiro68986]

CSSスプライトを使用したナビゲーションメニューの作り方

[strawberry0325]

　CSSスプライト

[kazuya6012]

CSSスプライト

[doublemac]

css sprite

[ms0924]

css sprite

[galco]

yosage

[yananaki]

昨日、ゆうたろうカーで話題になったCSS スプライトについて　「CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス」

[maron0810]

CSSスプライトです。ここのサイトを参考に、取り入れてみるつもりです。

[jetta_swingin]

background-position:left bottom;