Spriteを活用するこの情報はお役に立ちましたか?よろしければ皆様にもお知らせください。Spriteとは、ウェブページを高速に表示するための技術として、YouTubeやYahoo!Japanで使われている、と言われています。Spriteの技術とは、そのページ内で表示する画像を、すべて一枚の画像に作成し、最初に読み込んだ後、CSSのbackground-imageプロパティとbackground-positionプロパティによって、適切な場所に画像を表示します。この技法は、「ロールオーバーイメージ」の項で解説した方法の応用です。上の画像は、サイトロゴ、メニューボタン、マーク画像をまとめて1枚の画像としてつくった画像です。この画像では、本来なら12個の別々の画像を、1つの画像にしています。各画像の幅と高さは以下のとおりです。この各画像の幅と高さを覚えておきます。background-positionプロパティで、背景画像の表示位置を指定するのですが、background-positionでは、背景画像を表示する領域の左上を0として、上から何ピクセル、左から何ピクセル目から表示する、という指定をします。画像の表示位置を指定するならば、マイナスの指定をすることになります。背景画像を表示する位置を、横-70ピクセル、縦-15ピクセルにすると、背景画像は左へ70ピクセル、上に15ピクセル移動し、下のような画像が表示されます。-15px;">&nbsp;</div>次に、この領域に表示する幅と高さを指定すると、一つの画像だけを表示させることができます。SpriteはWebページを高速に表示する技術の一つですが、使う上では幾つかの注意事項があります。繰り返す画像には使えないある画像の連続パターンを表示することで、背景にしきつめる、というような表現をする場合、background-repeatプロパティを使いますが、これを使うと他の用途の画像まで表示されてしまうので、使うことができません。Spriteに使えるのは、単体の幅と高さが決まっている画像のみです。画像を修正した場合手間がかかる必要があって、後から個々の画像の大きさを変えた場合には、CSSのbackground-positionプロパティで指定した座標がずれてしまうので、再度、CSSを修正しなければなりません。Spriteで表示させる場合、文字の大きさによって画像を表示する高さと幅が決まるので、必ず同じ高さ・幅が確保されるとは限りません。文字の大きさ上のように、文字が小さければ画像は下まで表示されません。文字の大きさ文字が大きすぎると画像をはみだしてしまいます。ブラウザの設定で、文字のサイズは変更できますし、変更できない設定にしておいても、ブラウザの種類によって若干大きさが異なる場合があります。※ブラウザで文字のサイズを変更できないように、CSSのfont-sizeプロパティでサイズをピクセルで指定することは、ユーザビリティの観点からは望ましくないとされています。実践的内容のCSS+XHTMLの解説書。わからずにCSSを使っていた、というような初心者にとくにお奨めです。若干雑なつくりが気になりますが、ウェブ制作者のノウハウも知ることができます。内容が正確で説明が丁寧なXHTMLとCSSの解説書。異なるブラウザ間での互換性の保持やアクセシビリティを考慮したつくりにも触れています。ボリュームがあり辞典的な使い方ができます。HTML文書をつくる上で辞典の存在は欠かせません。ウェブ上で調べればいいと思う人もいるかもしれませんが、やはり傍らにおいてすぐに調べられるようにしておくと作業は早くなります。ウェブデザイン、ウェブサイト作成の初心者~中級者向けの本。丁寧なつくりでHTMLの要素、CSSのプロパティ解説ページにおいても関連ページの表記を細かく行っています。CSS、Flash、XHTML、Ajax等、ウェブデザインの全容を確認・勉強できる、ウェブデザイン初心者のための本。実際のコーディングに関しての説明は少なく、HTMLなどの知識は別途勉強する必要があります。実際に一つのウェブサイトをつくる過程を経験しながらHTMLやCSSを理解していくスタイルをとっている本。初心者向けで非常にわかりやすい構成です。使ってきた人など、実は便利な機能があることや正しい使い方を知らない、という人に向いています。本書はCS3を想定してかかれていますが、それ以外のバージョンであっても読むことはできます。逆引きリファレンスのような感覚で、知りたい箇所から読んで理解することができる、非常に分かりやすい本。使って制作した方が圧倒的に楽になります。バージョンアップするごとに確実に使い勝手は向上しています。Sitemap本サイトの情報は確実でない場合があります。サイト内の情報を利用したことにより不利益を被ったとしても責任は負えません。全て自己責任で行ってください。本サイトはリンクフリーです。どのページにリンクをしても構いません。リンク時に連絡をする必要はありません。フレーム内に表示するのはおやめください。本サイト内の著作権は、ほかに著作権者がいるコンテンツを除き、全て本サイトに帰属します。top)に関するお問い合わせ。