CSS Spriteを使う。

CSSスプライトを使うことで、Webサイトの表示速度を早めることができます。

なぜ、Webサイトの表示速度が速くなるかと言うと、HTTPリクエスト数が減る事があげられると思います。

Webサイトを制作するにあたり、画像は頻繁に配置されます。Webサイトを表示させる時に、画像1、画像2・・・と読み込んでいってるわけですね。

画像を一つにすることで、画像１と読み込みが一回で済みます。だから表示が速くなるんですね。

例えば、

hタグに背景画像として使用したとします。

HTMLには、

<h3 id=”title1″>タイトル1</h3>

<h3 id=”title2″>タイトル2</h3>

<h3 id=”title3″>タイトル3</h3>

CSSには、

h3{background-image:(画像のURL)；｝

h3#title1{background-position: 0 0;}

h3#title2{background-position: 0 -60px;}

h3#title3{background-position: 0 -120px;}

始めに、h3自体に背景画像を読み込ませ、各idにて表示させる位置を変える。といった流れになります。

a:hoverなどの要素にも適応できるので、CSSでマウスオーバーを実装することができます。

気をつけないといけないのは、alt属性が必要な画像には、CSS Spriteを適用させるのは、やめましょう。ユーザビリティが下がります。

頻繁に更新しないといけない部分にも適用させるのはやめましょう。

透過PNGを使う場合は、IE６で正しく表示されませんので、ハックが必要になります。

ホームページ制作・Webサイト制作 MIRAiZ-ミライズ-