CSSスプライトの応用の詳細な説明

CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなアイコンと背景画像を 1 つの画像に結合し、CSS 背景配置を使用して、表示する必要がある画像の部分を表示します。

スプライト画像の使用シナリオ

• 静止画像はユーザー情報の変更によって変化しません。
• 画像が小さく、容量も小さい（2〜3k）。
• 画像の読み込み容量が比較的大きいです。

目的

HTTP リクエストの数を減らし、コンテンツの表示を高速化します。リクエストが行われるたびにサーバーとの接続が確立され、接続の確立には追加の時間が必要になるためです。

使用

スプライト画像を使用する前に、スプライト画像内の各アイコンの位置を知っておく必要があります。

上の図から、スプライト画像内の各小さなアイコン（アイコン）の開始位置を確認することは難しくありません。たとえば、スプライト画像の最初のアイコン（スカート）の開始位置はx：0、y：0、スプライト画像内の2番目のアイコン（靴）の開始位置はx：0、y：50px、スプライト画像内の3番目のアイコン（サッカー）の開始位置はx：0、y：100pxです。類推により、スプライト画像を基準とした各画像の開始位置を導き出すことができます。

上記の Sprite 画像を例にとり (実際の Sprite 画像内の小さな画像の開始位置は、上記の表示画像とは異なります)、その使用方法を説明するデモを使用します。

html

  <div>
        <ul class="サイドバー">
            <li><a href=""><span class="spr-icon icon1"></span>衣類 下着</a></li>
            <li><a href=""><span class="spr-icon icon2"></span>靴、バッグ、アクセサリー</a></li>
            <li><a href=""><span class="spr-icon icon3"></span>スポーツとアウトドア</a></li>
            <li><a href=""><span class="spr-icon icon4"></span>ジュエリーと時計</a></li>
            <li><a href=""><span class="spr-icon icon5"></span>モバイル デジタル</a></li>
            <li><a href=""><span class="spr-icon icon6"></span>家電製品とオフィス</a></li>
            <li><a href=""><span class="spr-icon icon7"></span>スキンケアとメイクアップ</a></li>
            <li><a href=""><span class="spr-icon icon8"></span>ママとベビー用品</a></li>
        </ul>
    </div>

CS

ul li {
    リストスタイル: なし;
    マージン: 0;
    パディング: 0;
}
{
    色: #333;
    テキスト装飾: なし;
}
.サイドバー{
    幅: 150ピクセル;
    境界線: 1px 実線 #ddd;
    背景: #f8f8f8;
    パディング: 0 10px;
    マージン: 50px 自動;
}
.サイドバー li {
    下境界線: 1px 実線 #eee;
    高さ: 40px;
    行の高さ: 40px;
    テキスト配置: 中央;
    }
.サイドバー li a {フォントサイズ: 18px;}
.sidebar li a:hover {color: #e91e63;}
.サイドバー li .spr-icon {
    表示: ブロック;
    フロート: 左;
    高さ: 24px;
    幅: 30ピクセル;
    背景: url(css-sprite.jpg) 繰り返しなし;
    マージン: 8px 0px;}
.sidebar li .icon2 { 背景位置: 0px -24px;}
.sidebar li .icon3 { 背景位置: 0px -48px;}
.sidebar li .icon4 { 背景位置: 0px -72px;}
.sidebar li .icon5 {背景位置: 0px -96px;}
.サイドバー li .icon6 {背景位置: 0px -120px;}
.sidebar li .icon7 { 背景位置: 0px -144px;}
.sidebar li .icon8 { 背景位置: 0px -168px;}

Sprite 画像を使用する場合、background-position プロパティの値がすべて負になるのはなぜですか?

上記の例では、スプライト画像の使用方法について説明しましたが、初心者はスプライト画像の background-position プロパティの負の値について混乱するかもしれません。この質問に答えるのは実は難しくありません。注意深い人なら、ずっと前に負の数を使う根本的な原因に気付いているはずです。ここでは、上記のデモを例として使用してこの問題を分析します。上記のspanタグは24*30pxのコンテナです。背景画像を使用する場合、背景画像の初期位置はコンテナの左上隅から始まり、コンテナ全体を覆います。ただし、コンテナのサイズによって背景画像のサイズが制限され、コンテナを超えた部分は非表示になります。 background-position: 0 0 が設定されている場合、背景画像の開始位置として、コンテナ（span タグ）を基準として、x 軸 = 0、y 軸 = 0 の位置に背景画像が表示されることを意味します。したがって、コンテナーに 2 つ目のアイコンを表示する必要がある場合は、スプライト イメージの x 軸方向を左に移動する必要があります。スプライト イメージを左に移動すると、その値は負の数に設定され、y 軸方向についても同様です。

生産

• PSマニュアルジグソーパズル
• スプライトツール（CssGaga または CssSprite.exe）を使用して自動的に生成します。

CssSprite Sprite ツール、github のオープンソース、アドレス: https://github.com/iwangx/sprite

スプライトの長所と短所

アドバンテージ：

1. ウェブページの読み込みを高速化する

Web ページ上の各画像について、ブラウザに画像のダウンロード要求が送信されます。ブラウザは同時に 10 件の要求を受け付け、一度に 2 件の要求を処理できます。

2. メンテナンスが簡単

このツールは、画像を選択して直接つなぎ合わせることができます。もちろん、自分で画像を移動したり、スプライトシートをレイアウトしたりすることもできます。画像を変更するときは、画像の位置を変更するだけです。コードを直接生成し、シンプルで使いやすいです。

3. CSS スプライトは画像のバイト数を削減できます。1 つの画像に結合された 3 つの画像のバイト数を何度も比較しましたが、常に 3 つの画像のバイト数の合計よりも小さくなります。

4. Web デザイナーが画像に名前を付ける際の悩みを解決します。個々の小さな要素に名前を付ける必要がなく、画像のコレクションに名前を付けるだけで済むため、Web ページ制作の効率が向上します。

5. スタイルの変更が便利です。1 枚または数枚の画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスもより便利になります。

欠点:

• 写真を結合するときは、複数の写真を整然と合理的に 1 枚の写真に結合し、不要な背景がそのセクションに表示されないように十分なスペースを残す必要があります。これらはそれほど悪いことではありませんが、最も面倒なのは、ワイド スクリーンと高解像度スクリーンの適応型ページで、写真の幅が十分でない場合、背景が簡単に壊れてしまうことです。
• 保守性に関しては、これは一般的に諸刃の剣です。画像を変更するたびに、画像のコンテンツを削除したり追加したりする必要があり、少し面倒に思えるため、気に入る人もいれば、気に入らない人もいるかもしれません。そして、画像（特に数千ピクセルの画像）の位置を計算することも非常に不快なことです。もちろん、これらはパフォーマンスというスローガンの下で克服することができます。
• 画像の位置をある絶対値に固定する必要があるため、中心などの柔軟性が失われます。

CSS スプライトは通常、固定サイズのボックスでのみ使用できるため、表示すべきでない部分をカバーすることができます。つまり、CSS スプライトは、一方向ではないタイリング背景が必要であり、Web ページのスケーリングが必要な状況には適していません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。