Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。

Sass/Compassについて

 Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。
 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。

CompassでCSSスプライト

 CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。

続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。

 @charset “utf-8”;
 @import “compass”;
 
 // スプライト画像を生成
 @import “icons/*.png”;
 // 各画像の表示用クラスを生成
 @include all-icons-sprites();

このsassファイルをコンパイルすると、3つの画像を縦方向1列にまとめた画像(icons-s845e2a1d5b.png)と、以下のCSSが生成されます。クラス名は、「ディレクトリ名-ファイル名」になります。

icons-s845e2a1d5b.png

 .icons-sprite, .icons-cat, .icons-lion, .icons-panda {
   background: url(‘/images/icons-s845e2a1d5b.png’) no-repeat;
 }
 
 .icons-cat {
   background-position: 0 -100px;
 }
 
 .icons-lion {
   background-position: 0 0;
 }
 
 .icons-panda {
   background-position: 0 -200px;
 }

クラス名は保持したままbackground-positionの値を変更したい

 ただ、Retinaディスプレイ対応などbackground-positionの値を元の画像のサイズではなく別の値に変更したい場合、上記だけでは対応できません。そこで、mixinを作成します。クラス名の「ディレクトリ名-ファイル名」というルールは保持したいので、スプライトの元画像のファイル名のクラス名のCSSを出力する処理を書いてみます。sprite-names($map)でスプライトの個々の名前を取得することができるので、これを利用します。

    @charset “utf-8”;
    @import “compass”;
 
    @import “icons/*.png”;
    $spr-imgs: sprite-map(“icons/*.png”);
 
    // 2倍に拡大して表示する用にbackground-positionを指定するmixin
    // 今回は低解像度で表示したいため2倍にしていますが、retina対応の場合1/2になります。
    // 「compass sprite retina」で検索すると色々な方がmixinを書かれています。
    @mixin low-reso-sprites($name){
 
      // heightとwidthも出力してみます
      height: image-height(sprite-file($spr-imgs, $name))*2;
      width: image-width(sprite-file($spr-imgs, $name))*2;
  
     // background-positionを計算して変数に保持します
      $ypos: round(nth(sprite-position($spr-imgs, $name), 2) *2);
      background-position: 0 $ypos;
    }
 
    // 画像の数分のクラスを出力します
    @each $sprite-name in sprite-names($spr-imgs) {
     .#{$sprite-name} {
      @include low-reso-sprites($sprite-name);
     }
    }

この.scssファイルをコンパイルすると、以下のようなcssが作成されます。

 .icons-sprite {
   background: url(‘/sass/images/icons-s845e2a1d5b.png’) no-repeat;
 }
 
 .icons-cat {
   height: 200px;
   width: 200px;
   background-position: 0 -200px;
 }
 
 .icons-lion {
   height: 200px;
   width: 200px;
   background-position: 0 0;
 }
 
 .icons-panda {
   height: 200px;
   width: 200px;
   background-position: 0 -400px;
 }

background-positionの値を変更することが出来ました!上記のクラスを実際に適用する要素では、background-sizeで背景画像のサイズを2倍にして使用しました。
 

容量比較

 CSSスプライト化すると、どれだけ容量が削減できるのか比較してみます。以下は15個のオリジナル画像(PNG)をCSSスプライト化した結果です。画像とCSSを合わせても、約3分の1に容量を削減することができました。

形式オリジナル画像スプライト画像CSS容量備考
CSSスプライト(PNG)24.3KB5.04KB1.55KB容量は0.27倍

Related Post

Gruntで快適な環境を整備したい!【インストール編】Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。 Gruntとは…? Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。 Gruntのインストール Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。  ■Node.jsのインストール Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

position:fixedを実現するiScrollを使う際に覚えておきたいメソッドたちposition:fixedを実現するiScrollを使う際に覚えておきたいメソッドたち

ヘッダーやフッター等の要素を固定表示するのに利用されるposition:fixed。このposition:fixedがサポートされていない環境で、固定表示を実現する際によく使われるライブラリにiScrollがあります。要素を固定するというよりは、特定要素の範囲をスクロール可能にする、overflow:autoのようなイメージです。 複雑なレイアウトになると、iScrollでスクロールさせている要素の高さが動的に変化したり、スクロール領域が入れ子だったり・・・ユーザ操作に応じて追加の処理を行う必要があります。難しそうなレイアウトは設計の際に回避したいところですが、そういう実装が必要な場合に使えるiScrollのメソッドをまとめてみました。 iScrollの使い方 iScrollの使い方ですが、HTML要素に任意のIDを付け、JSで初期化を行います。下記の例ではid=”scroller”の要素がスクロール可能になります。例でリスト要素になっている部分は何でもかまいませんが、2つのwrapper(例ではIDがwrapperとscrollerのdiv要素)は必要です。また、一番外側の要素には高さを指定しておく必要があります。 ◆HTML <div id=”wrapper”><div id=”scroller”><ul><li></li>……</ul></div></div>