MacでCSSスプライトシートを作成
複数のアイコンを1枚の画像にまとめ、それぞれを表示するCSSとHTMLプレビューを作成します。
Macでスプライトシート作成
サンプルファイルを使ったアプリのスクリーンショット。
スプライトシート作成の使い方
- 1
アイコンをドロップ
2枚以上の画像を追加します。各ファイル名がCSSクラス名になるので、「search.png」や「cart.png」のように、先にわかりやすい名前を付けておきましょう。
- 2
間隔と接頭辞を設定
アイコンの間隔とCSSクラスの接頭辞を選びます。
- 3
Retina用アイコンを指定
アイコンが@2xの場合は、Retinaオプションをオンにすると半分のサイズで鮮明に表示されます。
- 4
「シートを作成」をクリック
アイコンは行に詰めて並べられ、sprite.pngとして、sprite.cssとpreview.htmlページとともに、ダウンロード › OneMacTools内の日付付きフォルダに保存されます。
- 5
サイトで使う
sprite.pngとsprite.cssを同じ場所に置き、CSSをリンクして、要素にクラスを追加します。preview.htmlを開くと、すべてのクラスを確認できます。
スプライトシート作成でできること
どんなサイズのアイコンも行にぎっしり詰めて並べられ、それぞれに正しい位置とサイズを持つCSSクラスが割り当てられます。プレビューページですべてを確認できます。アイコンの間隔、クラスの接頭辞、Retinaで鮮明に表示するための@2xかどうかを設定できます。
こんなときに
- アイコンのセットを1回のリクエストで読み込む
- ゲーム用のスプライトシートを作成する
- Webサイト用の国旗や絵文字をまとめる
オプションの説明
- アイコンの間隔
- 0、2、4、8 pxから選べます（デフォルトは2 px）。少し間隔をあけておくと、ページを拡大したときに隣のアイコンがはみ出して見えるのを防げます。
- アイコンは@2x（Retinaで鮮明に表示するため半分のサイズで表示）
- デフォルトはオフ。オンにすると、CSSが各アイコンをピクセルサイズの半分で表示し、シートもそれに合わせて拡大・縮小するため、2倍解像度のアイコンがRetinaディスプレイでも鮮明に見えます。
- CSSクラスの接頭辞
- 各クラス名の先頭に付く文字列です。空欄の場合は「icon」になります。接頭辞がiconの場合、「search.png」は.icon-searchになります。
おすすめの使い方
- 始める前に、ファイル名を小文字とハイフンで付けておきましょう。クラス名はファイル名から作られ、「@2x」は自動で取り除かれます。
- 背景が透明なアイコンを使えば、どんなページの色にも合うシートになります。
- Retina用のアイコンは、表示サイズのちょうど2倍で、ピクセルサイズを偶数にして作成すると、半分にしたサイズも整数ピクセルになります。
- そのあとsprite.pngを「PNGを圧縮」で圧縮しましょう。アイコンシートの場合、パレットPNGにするとかなり小さくなることがよくあります。
- アイコンを拡大・縮小したり、ページをズームして表示したりする場合は、2 px以上の間隔を空けましょう。
対応形式
- 入力
- 任意のサイズの画像2枚以上（通常はPNGアイコン）。
- 出力
- sprite.png（すべてのアイコンを1枚にまとめたもの）、sprite.css（アイコンごとにサイズと位置を指定したクラス）、preview.html。
- サイズの異なるアイコンを、高いものから順に行にぎっしり詰めて並べます。
- 同じ名前のファイルには-2のように番号付きのクラスが付くので、失われることはありません。
スプライトシート作成についての質問
CSSスプライトシートとは何ですか？
多数のアイコンを含む1枚の画像と、背景をずらして要素ごとに1つのアイコンだけを表示するCSS。1回のリクエストですべてのアイコンを読み込めます。
Webサイトでスプライトを使うには？
sprite.pngとsprite.cssを同じフォルダにアップロードし、ページでCSSを読み込んで、要素にclass="icon icon-search"のようなクラスを追加します。
クラス名はどのように作られますか？
各ファイル名から、接頭辞のあとに、小文字にしてスペースや記号をハイフンに変えたものが使われます。接頭辞が「icon」なら、「Shopping Cart.png」は.icon-shopping-cartになります。
サイズの異なるアイコンを使えますか？
はい。各アイコンは元のサイズを保ち、CSSクラスにはそれに合った幅と高さが設定されます。
Retinaディスプレイでスプライトを鮮明に表示するには？
アイコンは表示サイズの2倍で作成し、@2xオプションをオンにしてください。CSSで半分のサイズで表示されるため、高解像度の画面でも鮮明に見えます。
ゲームのスプライトに使えますか？
はい。sprite.cssにはシート上の各画像の位置とサイズが記載されているので、ゲームエンジンやcanvasのコードに読み込めます。
スプライトシート作成はファイルをアップロードしますか？
いいえ。スプライトシート作成はすべてMac上で動作するので、ファイルが外に出ることはなく、オフラインでも使えます。
スプライトシート作成は元のファイルを変更しますか？
いいえ。結果は「ダウンロード › OneMacTools」内の日付つきフォルダに新しいファイルとして保存され、元のファイルは、そうする旨のオプションをオンにしない限り、そのまま残ります。
スプライトシート作成に必要なものは？
macOS 26以降を搭載したMacだけ。ほかにインストールするものはありません。
次にすること
色数を減らしてPNGを60〜80%軽量化。透明部分はそのままなので、スクリーンショット、ロゴ、アイコンに最適です。
画像をBase64に画像をBase64データURIに変換します。HTML、CSS、JSONにそのまま貼り付けられます。
