ホーム サンプルコード一覧 6. CSS Sprite for Multi Display

6. CSS Sprite for Multi Display

実現される機能

高精細ディスプレイに対応するCSSスプライトを手軽に作成できます。
Compassに依存したSassのmixinとして提供されます。

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

アイコンへの利用例

このページの各画像は、一枚につなぎ合わされた、CSSスプライトとして実装されています。
また、画面のdevicePixelRatioが1.5以上の場合、2倍サイズの画像が代わりに読み込まれます。
このため、高精細ディスプレイで表示した場合でも、鮮明な画像が表示されます。

Retinaディスプレイへの対応とは

最近のiPhoneやAndroidの高精細端末では、「ブラウザで扱う1ピクセル」と「スクリーンが表現できる最小単位としての1ピクセル」が、同一ではありません。そのような端末においては、スクリーンは、ブラウザにとっては1ピクセル以下の、より細かい描画が行えるようになっています。

例えばiPhone4では、スクリーンのピクセル2つを使い、ブラウザ上の1ピクセルを表現します。そのような環境だと、Webサイト上では、0.5ピクセルまで表現できることになります。Appleは、自社のこのような高精細ディスプレイのことを、「Retinaディスプレイ*」と呼んでいます。これ以降、Androidを搭載した端末でも、高精細ディスプレイの採用が当たり前になっていきました。

*注:Retinaディスプレイ
「Retina」という名称は、Appleが商標登録したため、他社は自社製品のことを「Retinaディスプレイ」と銘打つことができなくなりました。ここでは、わかりやすさを考慮し、高精細スクリーンのことを「Retinaディスプレイ」と呼ぶことにします。

このような高精細端末でWebサイトを閲覧すると、今までの2倍の細かさで映しだされるわけですから、文字などがより細かくレンダリングされ、見やすくなります。しかし、文字がきれいになったのはよいのですが、そのぶん、画像の粗さが際立ってしまうようになりました。当然ですが、Retinaディスプレイが登場する前は、誰も0.5ピクセル単位で作ることなど考えていなかったからです。

これに対応するため、スマートフォン向けサイトでは、2倍の大きさの画像を用意し、その幅を半分に縮めることで、この問題に対応するという方法がよくとられます。例えば320px幅の画像を表示したい場合、640pxの画像を作り、img要素のwidthに320を指定し、半分に縮めるといった具合です。このようにすると、0.5pxまで再現できることになります。

Retinaディスプレイでもきれいに画像を表示するには、次の事項がポイントとなります。

しかし、2倍サイズの画像は、Retinaディスプレイでのみ必要なものです。0.5ピクセルが表現できない端末に対してこのような処理を行ってしまうと、意味がないどころか、無駄に大きい画像を読み込ませるだけの結果になってしまいます。このため次のような振り分けが必要になります。

このデモは、これらの処理を実装したものとなっています。

使用手順

1. Compassのインストール

Compassをインストールします。
このデモは、バージョン0.12.2にて動作を確認しています。
互換性確保のため、Bundlerによるインストール、実行を推奨します。

2. head.jsの読み込み

head.jsを、CSSファイルの読み込みよりも先に読み込みます。
head.js内では、devicePixelRatioが1.5以上であった場合、
html要素に指定されているclass属性値dpr-1を、dpr-2に置き換える処理が書かれています。
この値は、後に利用されます。

2. コンパイル方法

当スケルトンの/6/ディレクトリまで移動し、
compass compile(もしくはbundle exec compass compile)を実行します。
Compassが正常にインストールされていれば、
scssディレクトリの中身がcssディレクトリへコンパイルされます。

3. mixinの設定

このデモでは、アイコン画像を背景画像として指定するための、icon mixinを用意しています。
この実態は、scss/_srite.scss内に書かれています。
利用方法は、以下のとおりです。

対象のアイコン画像を背景として指定したいセレクタに、以下のように、 iconmixinをincludeします。

.icon-android { @include icon(android); }

この時、指定している引数(この場合はandroid)は、アイコンのファイル名です。
このように指定した場合、

配置します。

このようにして用意された全ての画像は、Compassによって自動で一つにつなぎ合わせられ、
CSSスプライト用の画像が作られます。そして、iconmixinがコンパイルされると、
以下の様なスタイルが書きだされます。

.dpr-1 .icon-android,
.dpr-2 .icon-android {
  display: inline-block;
}

.dpr-1 .icon-android {
  background-image: url('../imgs/icons/x1-s7e6a3da27d.png');
}

.dpr-2 .icon-android {
  background-image: url('../imgs/icons/x2-s211c8abf7d.png');
  background-size: 64px;
}

.icon-android {
  width: 64px;
  height: 64px;
}
.dpr-1 .icon-android {
  background-position: 0 -330px;
}
.dpr-2 .icon-android {
  background-position: 0 -325px;
}

CSSスプライト用画像を、適切に背景に敷いたセレクタが書きだされます。
dpr-1dpr-2クラスによって読み込む背景画像が異なるため、先に述べたように、Retinaディスプレイにのみ、2倍サイズの画像が読み込まれます。

より細かい設定方法

このmixinは、scss/_srite.scssにあるもので全てです。
画像配置ディレクトリの指定もこのファイル内にあるため、必要に応じて変更してください。