個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

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

CSSスプライトを誰でも簡単に、しかも見やすく生成できてしまうツールのご紹介です。
CSSスプライトは複数の画像を1枚にしてページの表示速度を上げるためのテクニックです。
今や当たり前のテクニックになっていますが、作成してCSSで実装するのは面倒です。
しかし、今回ご紹介するツールであれば、簡単に手早くCSSスプライトを作成できてしまいます。
ご参考にどうぞ。

CSSスプライト作成の決定版!「Spritebox」

Spritebox自体は、実は昔からあったサービスなのですが、最近、ものすごいリニューアルがなされ、洗練されたUIとさらに使いやすくなってパワーアップしました。
CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

「Spritebox」の使い方

Spriteboxを使うには、CSSスプライトにするための画像を準備します。
「Manage Image」をクリックして、画像をアップしていきます。
CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」
CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」
つづいて、スプライト用の画像をアップします。
CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

アップが完了すると、自動で隣に整列してくれています。
CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

アップが完了したら、画面左下にある「Output」ボタンをクリックします。
以下のように、CSSあるいはSASSのコードが出ていますので、これをコピーして利用します。
CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

スプライト画像はダウンロードボタンを押せば、入手できます。
レティナ対応のスプライトも作れますよ。
その場合には事前に「Retina」ボタンを押して「ON」にします。

Spritebox

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 3
  • 14

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法

アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を

記事を読む

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない

記事を読む

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む