2015/01/19
CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

CSSスプライトを誰でも簡単に、しかも見やすく生成できてしまうツールのご紹介です。
CSSスプライトは複数の画像を1枚にしてページの表示速度を上げるためのテクニックです。
今や当たり前のテクニックになっていますが、作成してCSSで実装するのは面倒です。
しかし、今回ご紹介するツールであれば、簡単に手早くCSSスプライトを作成できてしまいます。
ご参考にどうぞ。
CSSスプライト作成の決定版!「Spritebox」
Spritebox自体は、実は昔からあったサービスなのですが、最近、ものすごいリニューアルがなされ、洗練されたUIとさらに使いやすくなってパワーアップしました。
「Spritebox」の使い方
Spriteboxを使うには、CSSスプライトにするための画像を準備します。
「Manage Image」をクリックして、画像をアップしていきます。
つづいて、スプライト用の画像をアップします。
アップが完了すると、自動で隣に整列してくれています。
アップが完了したら、画面左下にある「Output」ボタンをクリックします。
以下のように、CSSあるいはSASSのコードが出ていますので、これをコピーして利用します。
スプライト画像はダウンロードボタンを押せば、入手できます。
レティナ対応のスプライトも作れますよ。
その場合には事前に「Retina」ボタンを押して「ON」にします。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」
簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ
-
-
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定
-
-
使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+
2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH
-
-
CSSグラデーションをとっても簡単に生成するツール「Gradientoo」
CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき
-
-
これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22
CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。
-
-
プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100
HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ
-
-
画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法
アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を
-
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない
-
-
インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」
Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール
-
-
WEBデベロッパーのためのおすすめYouTubeチャンネル15選
WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS