CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSスプライト画像の作成方法と使い方を徹底解説

CSSスプライト（Image Sprite）とは？

CSSスプライト（CSS Image Sprite）とは、Webページで使用する複数の画像を、あらかじめ1枚の画像ファイルに結合しておく手法です。画像リソースの読み込みが1回で済むため、HTTPリクエスト数を大幅に削減できます。その結果、ページの表示速度が向上し、サーバーへの負荷も軽減されます。

結合された画像のうち、どの部分を表示するかは、CSSの background-position プロパティを使って制御します。要素ごとに表示したい座標を指定することで、1枚の画像から必要な部分だけを切り出して表示できるのです。

CSSスプライトを使うメリット

  • HTTPリクエストの削減により、ページの読み込みが高速化される
  • 画像ごとの個別リクエストが不要になり、サーバー負荷が軽減される
  • ホバー時に別画像を読み込む遅延がなくなり、UIが滑らかに動作する

CSSスプライトの実装例

それでは、実際にCSSスプライトを使ったサンプルコードを見てみましょう。以下の例では、4つの国旗画像を横並びで1枚にまとめた「Capture.png」を使用し、クラスごとに background-position の値を変更することで、異なる国旗を表示しています。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
   background: url("Capture.png") no-repeat;
   width: 280px;
   height: 200px;
   display: inline-block;
}
.flag1 {
   background-position: 0px 0px;
}
.flag2 {
   background-position: -255px 0px;
}
.flag3 {
   background-position: -510px 0px;
}
.flag4 {
   background-position: -765px 0px;
}
body {
   text-align: center;
}
</style>
</head>
<body>
<div><h1>Flag Image Sprite</h1></div>
<div class="sprite flag1"></div>
<div class="sprite flag2"></div>
<div class="sprite flag3"></div>
<div class="sprite flag4"></div>
</body>
</html>

実行結果

CSSスプライト画像の作成方法と使い方を徹底解説

このように、すべての要素が同じ画像ファイルを参照していても、background-position の値を変えるだけで4種類の異なる国旗を表示できています。X座標を -255px ずつずらすことで、結合画像内の目的の位置にある国旗が順番に表示される仕組みです。

なお、background-position にはマイナスの値を指定する点に注意してください。これは、背景画像を左方向へずらして、表示したい領域を要素の枠内に移動させるためです。スプライト画像を作る際は、各画像のサイズと間隔を統一しておくと、座標の計算が格段に楽になります。

  1. CSSでスティッキーイメージ（追従画像）を作成する方法【初心者向け解説】

    Webページをスクロールしても画像が画面上に固定され続ける「スティッキーイメージ」は、position: sticky を使うことで簡単に実装できます。この記事では、CSSだけでスティッキーイメージを作成する具体的なコード例と、その仕組みをわかりやすく解説します。スティッキーイメージとは？スティッキー（sticky）配置とは、要素が通常のドキュメントフロー内に表示されつつ、スクロールして指定した位置に達すると、その位置に「貼り付いて」動かなくなる配置方法です。画像に対してこの設定を行うことで、ページを下にスクロールしても画像が画面上部に留まり続ける効果が得られます。実装コード例以下は、CSSで

  2. CSSのfilterプロパティで画像を白黒（グレースケール）に変換する方法

    CSSのfilterプロパティにグレースケール値を指定することで、カラー画像を簡単に白黒画像へと変換できます。filterプロパティは、ぼかし（blur）やドロップシャドウ（drop-shadow）など、さまざまな特殊効果を画像に適用できる便利な機能です。基本の構文CSSのfilterプロパティの構文は以下の通りです。Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); }grayscale(100%)で完全な白黒になり、パーセンテージを下げることで部分的に彩