画像をZIPにまとめてアップロードするとCSSスプライト用の画像とCSSを生成してくれるサービス「SpriteMachine」

画像をZIPにまとめてアップロードするとCSSスプライト用の画像とCSSを生成してくれるサービス「SpriteMachine」

画像をZIPにまとめてアップロードするとCSSスプライト用の画像とCSSを生成してくれるサービス「SpriteMachine」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • ベテランカードホルダーが厳選したおすすめのクレジットカード
  • このエントリーをはてなブックマークに追加
※2017/03/10追記
SpriteMachineはサービス終了してしまいました。

WEBサイトを高速化したいときに避けては通れないのがCSSスプライト。でもCSSスプライトは画像の作成とCSSの作成がちょっと面倒ですよね。

そこでご紹介したいのが、「SpriteMachine」です。

SpriteMachineは、zipで画像をまとめてアップロードするだけで、CSSスプライト用の画像とCSSを生成してくれるWEBサービスです。

スポンサードリンク

SpriteMachineの使い方

使い方はいたって簡単で3ステップで完了です。

ステップ1.設定を決める

設定を決める

レイアウトとフォーマットを決めます。

ステップ2.画像ファイルをアップロードする

画像をアップロード

zipにまとめた画像ファイルをアップロードします。

ステップ3.生成されたファイルをダウンロードする

ファイルをダウンロード

生成されたCSSスプライト用画像とCSSファイルをダウンロードします。

CSSは、以下のような感じで生成されます。

img.spritemachine_foo { width: 450px; height: 72px; background: url(sprite.png) 0px 0px no-repeat; }
img.spritemachine_bar { width: 16px; height: 16px; background: url(sprite.png) 0px -72px no-repeat; }
img.spritemachine_hoge { width: 16px; height: 16px; background: url(sprite.png) -16px -72px no-repeat; }
img.spritemachine_huga { width: 16px; height: 16px; background: url(sprite.png) -32px -72px no-repeat; }
img.spritemachine_piyo { width: 16px; height: 16px; background: url(sprite.png) -48px -72px no-repeat; }

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。