CSSスプライトを%(パーセント)で指定する方法

マークアップ Webデザイン

2017.04.28(Fri)

こんにちは、マークアップエンジニアの山中です。

高解像度のスマートフォンやレスポンシブウェブデザインが すっかり普及しましたが、そんなサイトをコーディングするようになって、毎回悩まされるのがアイコンの扱いです。

パフォーマンスやメンテナンス性を考えた場合、アイコン画像をCSSスプライトにまとめて、PCサイトとスマホサイト共通で使いたいけど、計算が複雑で大変…。

ということで今回は、そんなCSSスプライトを%で指定することで、どこでもどの大きさでもスプライトアイコン画像を使い回せる方法をまとめたいと思います。

CSSスプライトを%で指定する時の計算式

まずは結論から。
下記のように、background-sizeとbackground-positionを指定します。

background-size:
	calc( スプライト画像のwidth / 表示画像のwidth * 100% )
	calc( スプライト画像のheight / 表示画像のheight * 100% );
background-position:
	calc( 表示画像のx座標 / (スプライト画像のwidth – 表示画像のwidth) * 100% )
    	calc( 表示画像のy座標 / (スプライト画像のheight – 表示画像のheight) * 100% );
 

例えば、下のようなスプライト画像の「消しゴム」アイコンを表示する場合のソースコードは、

sprite-sample-a.png
background-size: calc(570 / 120 * 100%) calc(270 / 120 * 100%);
background-position: calc(300 / (570 – 120) * 100%) calc(150 / (270 - 120) * 100%);

ということになります。

コードを共有しておきますので、アイコン画像を表示している要素(.list__item)の大きさを変更してみてください。
アイコン画像の大きさも同様に変更出来るのが分かると思います。

See the Pen PmNdpq by TAKESHI YAMANAKA (@takeshi_ymnk) on CodePen.


上の例ではアイコン画像にsvgを使用しているためどんな解像度にも対応できますが、pngの場合でも大きめの画像を作成しておくことで同様に使い回せます。
(※今回使用しているsvg画像には preserveAspectRatio="none" を指定しています。)

それでは以下に考え方を書いていきます。

background-positionを%指定する時の仕様

まず重要なことは、backgound-positionの仕様を理解することです。
例えば
background-position: 60% 60%; とした場合、
スプライト画像全体の60%の位置と
表示するアイコン画像の60%の位置が揃うように配置
されます。

sprite-sample-b.png

分かりやすい数値で例えるなら

sprite-sample-c.png

ということですね。
上の図の0%、50%、100%はそれぞれleft、center、rightを指定した結果と同じになります。

この仕様をイメージしやすいように動かしてくれてる方がいたので紹介します。
http://codepen.io/chriscoyier/pen/dPezeQ

CSSスプライトを%で指定する時の計算式の説明

ではbackground-positionの仕様を踏まえて、本題「CSSスプライトを%で指定する時の計算式」を説明します。

background-size:
	calc( スプライト画像のwidth / 表示画像のwidth * 100% )
	calc( スプライト画像のheight / 表示画像のheight * 100% );

⇒こちらは比較的簡単で、
スプライト画像の横(縦)幅は、表示するアイコン画像の何倍の大きさ(%)かを求める
という計算式になっています。

background-position:
	calc( 表示画像のx座標 / (スプライト画像のwidth – 表示画像のwidth) * 100% )
    	calc( 表示画像のy座標 / (スプライト画像のheight – 表示画像のheight) * 100% );

⇒こちらは非常に分かりづらいのですが、言葉で説明すると
スプライト画像のa%の位置の座標(px) – 表示するアイコン画像のa%の位置の座標(px) = 表示画像の座標(px)
のaの値を求める計算式ということになります。

sprite-sample-d.png

最終的に上記計算式になります。

まとめ

いろいろと説明しましたが、実際のコーディング作業で使う場合には、深く考えずに計算式をそのまま丸暗記して使っています。
算数や数学の公式を思い出しますね。

次回はgulpやsassを使って、この作業をもっと楽に出来ないかを探ってみたいと思います。