個人的に役立ったデザイン素材や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
  • 10

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

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

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自

記事を読む

CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19

CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し、?部分の指摘もしてくれるDirty Markupをご紹

記事を読む

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む

オフラインでも便利なChrome機能拡張おすすめアプリ10

ネットが便利なのは言うまでもありませんが、場所の制約からネット回線につながらないときがあります。

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

参考にしたい!シンプルで美しいWEBデザイン50(〜2014.02)

2014年2月現在までに公開されているサイトのうち、美しくスッキリしたデザインをコレクションしてみま

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む