Compass を使用して CSS スプライトを作成する

2014-04-07 / Tech

HTTP リクエストを減らすポピュラーな方法として CSS スプライトがあります。個別の画像をひとつの画像にまとめて、座標を指定することで個別の画像として見せる手法です。

小さい画像を複数読み込むより、ひとつの大きな画像を読み込むほうが、すべての画像を表示するまでのスピードが圧倒的に早くなります。これは、たくさんの画像を読み込む時の通信の待ち時間が馬鹿にならないことに起因しています。

そのように CSS スプライトは優れた方法ですが、実際に手作業で CSS スプライトをすると大変です（ボタンの通常時／ハイライト時ぐらいなら簡単ですが）。そこで Compass を使用して手軽にスプライトを行ってみます。

Compass を使用してスプライトを行う

Sass と Compass がインストールされていることを前提にお話します。インストール方法は、前回の記事に書きました。

CSS スプライトを作成する手順は、以下となります。

スプライト化する画像をまとめたフォルダを適当な場所に置く
スプライトするように Compass に指示する
コンパイルする

1. スプライト化する画像を置く

まずは、compass create プロジェクト名 で新しくプロジェクトを作成します。

sass, stylesheets フォルダと同時に作成された config.rb を確認して、プロジェクトの画像フォルダ名を確認します。初期設定では、次のように images が指定されています。素直にこの名前を使うことにします。

images_dir = "images"

images フォルダを作成し、そこに新しく icon フォルダを作成して、ここに CSS スプライトに使用したい PNG ファイルを置きます。

2. スプライトするように指示する

sass/screen.scss を開いて次の内容を記述します。2 行目と 3 行目に登場する icon は、先程作成したフォルダ名となります。フォルダ名と一致するように気を使う必要があります。

@import "compass/utilities/sprites";
@import "icon/*.png";
@include all-icon-sprites;

3. コンパイルする

compass compile すれば、次のように画像が生成されます。これがスプライト化された画像になります。

create images/icon-s10dc22d201.png

このスプライト画像を利用するには、stylesheets/screen.css に生成されたクラスを見るのがわかりやすいです。

.icon-sprite,
.icon-about,
.icon-appicon-postalcode,
.icon-appicon-quicka2,
.icon-facebook,
.icon-logo,
.icon-quicka2,
.icon-twitter {
  background: url("/images/icon-s10dc22d201.png") no-repeat;
}

.icon-about {
  background-position: 0 0;
}

/* 省略 */

実際に、作業環境のルートディレクトリに index.html を作成して次のように書けば、CSS スプライトを利用できます。

<!DOCTYPE >
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="icon-about" style="width: 48px; height: 48px;"></div>
  </body>
</html>

ただし、2 点注意しておく必要があります。

screen.css で指定された画像フォルダの位置が異なる
画像ファイルの縦横を指定する必要がある

1 は、config.rb でコメントアウトされている以下の記述を有効にしてコンパイルすれば OK です。相対パスで出力されるようになります。

relative_assets = true

2 は、この場合は、index.html から画像ファイルの持っている縦横を指定していますが、もちろん好ましくありません。これを回避出来るように、Compass では、画像名を受け取ってその画像の縦横を計算してくれる仕組みがあります。その仕組みを次の記事で書けたらと思います。後、retina 画像にも対応させたいです（切実）。

参考

Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために (DESIGN & WEB TECHNOLOGY)