📿 📀 📋 CSSスプライト：基本的なテクニックと便利なツール 🤵🏾 👐🏻 🧔🏽

サイトでCSSスプライトを使用すると、生産性を向上させ、インターフェイス要素を正しく整理できます。

スプライトシートは、アイコンやボタンなど、サイトの小さなグラフィック要素の1つの大きな画像です。 CSSのおかげで、各要素を個別に表示できます。

見える

実用化

スプライトを使用する主な利点は、サーバーが1つのファイル内のすべての要素を一度にロードすることです。小さく軽い画像をアップロードするとサイトのパフォーマンスが向上すると考える人もいるかもしれませんが、そうではありません。個々の画像でHTTPリクエストの数が増加します。また、単一のスプライトを使用すると、グラフィックの重量を減らすことができます。 webdesign tutsのスプライトの例：

ページでスプライトを使用するためのサンプルコード（ demo ）：

<html> <head> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('img_navsprites.gif') -91px 0;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html>

また、スプライトは多くの場合、シンプルでクロスブラウザのホバー効果を作成するために使用されます（デモ）。

 <html> <head> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites_hover.gif') 0 0;} #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites_hover.gif') -47px 0;} #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next{left:129px;width:43px;} #next{background:url('img_navsprites_hover.gif') -91px 0;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html>

前か後か？

スプライトを準備するには、サイト開発の前と後の2つのアプローチがあります。最初のケースでは、サイト作成の最終段階で、すべての小さなインターフェース画像が単一のファイルにコンパイルされます。この場合、個々の画像を編集し、必要に応じてそれらを個別に使用すると便利です。この方法は、初心者のWebデザイナーにより適しています。

経験豊富な開発者は、初期段階でスプライトを準備します。これにより、将来のデザインのグラフィックを整理しやすくなり、レイアウト用にPSDテンプレートを準備できます。

設計要素の構成

スプライトを含むファイルを準備するときは、可能な限り画像を圧縮する価値があり、同じサイズ（アイコンなど）の場合は、グリッドを作成して、サイトでのスプライトの使用を簡素化します。

ファイルは、将来の変更が既存の要素の場所に影響を与えないように準備する必要があります。そうしないと、すべてのCSSを編集する必要があります。スプライトを含むPSDファイルには、適切なマークを付ける必要があります。すべてのレイヤーとグループに明確に名前を付け、レイヤーをマージしないようにしてください。これらは将来変更される可能性があります。