, 2014年4月25日

CSSスプライトとは、複数の画像を1つにまとめて、CSSのポジション指定で画像を表示させるテクニックです。画像を1枚ずつ準備するよりもファイルサイズが小さくなり、読み込みも1度だけで済むというメリットがあります。
今回はその方法を簡単に紹介します。

スプライトの方法

例えばこんな画像があったとします(画像のクオリティは気にしないで下さい)。

splite

全体は200×200の画像で、それぞれの図形は100×100の範囲に収まっています。これをCSSで切り分けて表示させます。HTMLはこんな感じ。

<div class="mark round"></div>
<div class="mark rect"></div>
<div class="mark tri"></div>
<div class="mark batsu"></div>

markクラスで画像を読み込み、幅と高さを100pxに設定します。

.mark{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url("splite.png");
}

background-positionの値を変更することで、それぞれの図形を表示させます。

.round { background-position: 0 0; }
.rect  { background-position: -100px 0; }
.tri   { background-position: 0 -100px; }
.batsu { background-position: -100px -100px; }

background-positionでは、画像を切り取る位置を変更することができます。通常は画像の左上が基点になっていますが、その基点の位置を変えることで画像を変化させます。

例えば、四角い図形を表示させるには、左に100px移動させる必要があるので、-100pxという値が設定されることになります。

表示結果はこんな感じです。画像が切り取られて表示されました!

pic20140425-1

まとめ

覚えておくと便利なCSSスプライトですが、いくつかデメリットがあります。

  • 画像のサイズが変わると厄介
  • CSSがbackground-positionだらけになる
  • SEO的に不利になる可能性がある

ナビゲーションバーなどでCSSスプライトを使うと、タグの中にテキスト情報を入れないためにGoogleにスパムと判定されるという問題があるようです。

なので、CSSスプライトはアイコンやマークのみに使うのが無難なようです。ご利用は計画的に〜。

CATEGORIES