• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/01/17

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」

Skitched 20130117 011906
Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。

そんなCSSスプライトを簡単に実装するためのWebサイトSpriteMachineのご紹介。スプライトマシーン…すごく…イイ名前です…


SpriteMachine – Create css sprite images easily!





imgを圧縮してアップロードするだけ

Skitched 20130117 013715
サイトに訪れたらまずは画像配置のレイアウトと吐き出すコードのフォーマットを決めます。

 

Skitched 20130117 014322
ちなみにフォーマットはCSSだけではなく、SCSSやSASSも選択可能です。

 

Skitched 20130117 014044
次に、CSSスプライトにする画像をひとまとめにして、そのフォルダを圧縮、ZIPファイルにしましょう。

 

Skitched 20130117 014706
そしてそのファイルを上の場所にアップロードすると…

 

Skitched 20130117 014834
自動的に「spritemachine」というフォルダがダウンロードされます:)

 

Skitched 20130117 015515
フォルダの中身はpng画像とcssファイル。

 

20130117 sprite
ちなみに最初のレイアウトを「Packed」にすると作成されるpngファイルはこんな感じになります。

 

Skitched 20130117 015827
そして一緒に吐き出されたCSSファイルはこのような形。あとは適宜クラス名などを指定してあげれば簡単にCSSスプライトが実装できるというわけですね!

そんなわけで、超簡単にCSSスプライトを実装できるファイルを作成してくれるサイトSpriteMachineのご紹介でした:)

関連:[Web練習帳]ブログの表示速度をアップするために「CSSスプライト」を導入してみたのでその手順メモ

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×