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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)
html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後
-
UIデザインのインスピレーションで溢れてる「UXPorn」
サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ
-
2013年のベストjQueryプラグイン47
2013年も残すところわずかになりました。 今年もたくさんのjQueryプラグインが発表されていま
-
40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」
最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー
-
CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」
CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ
-
Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」
Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」をご紹介しま
-
美しいエフェクトが施されたCSSで作られたボタン12
css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を
-
ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14
ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト
-
無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方
Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで
-
Chromeのタブをクリックするだけで音声を消す方法
Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの