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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」
ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな
-
-
無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方
Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで
-
-
超簡単!CSSで上下左右センターにする方法
超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ
-
-
文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」
CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色
-
-
コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css
画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印
-
-
波打つようなクリックエフェクトを実装できる「Waves」
今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹
-
-
HTML5/レスポンシブ/フラットデザインの無料テンプレート50(2013年分)
以前「全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という
-
-
WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」
WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code
-
-
プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18
プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい
-
-
スクロールした位置についてくるStickyプラグイン15
スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ
