ゼロイチ

WordpressやWEB技術ネタ

WEBサービス 開発

CSSスプライト用の画像を簡単に作成できるCSS Sprite Generatorが便利

投稿日:2016年8月12日 更新日:

サイト高速表示のために使える技術は全て導入すべきです。高速化技術の中でもメジャーなのがCSSスプライトです。

でも、CSSスプライト用の画像を作成するのって大変ですよね。

間隔調整とかも大変ですが、画像追加とかになるとめんどうですよね。

最近国旗のスプライト画像を作ったのですが、時間が無い中、死にそうなぼくを救ってくれたのが、【CSS Sprite Generator】でした。

CSS Sprite Generatorを使えばスプライト画像を一瞬で作成できます。しかも、スプライト用のCSSも同時に生成してくれます。これはかなり大きい!

それでは使い方をみていきましょう。

CSS Sprite Generatorの使い方

まずサイトにアクセスします。

CSS Sprite Generator

次に【OPEN】をクリックします。

ダイアログが出てくるので、スプライト画像に取り込む画像をすべて選択します。

プレビューで出来上がり後の画像を確認できます。

問題なければ【Download】をクリックします。

するとダウンロード用のパネルがでてきます。

画像はそのままドラッグアンドドロップでダウンロードしましょう。

次にタブの【CSS】に切り替えます。

このCSSを適用することで、スグにCSSスプライトを使うことが出来ます。

クラス名は画像の名前で生成されます。

PR

PR

-WEBサービス, 開発
-

管理人

関連記事

今からでは遅い!でもやらないよりマシ!Twitterの始め方。

SNSに完全に乗り遅れてしまい、今更Twitterを始めるなんてカッコ悪い。。。 そんなことありません!やらないほうがカッコ悪いです。とりあえずアカウントは作っておきましょう。つぶやかなくても大丈夫で …

CUIよりGUI!GitHubをSourceTreeで利用する方法

GitHubで作成したリポジトリをSourceTreeで管理する手順です。 GitHubのアカウント作成をお持ち出なかったり、リポジトリをまだ作成していないかたは、一歩を踏み出せ!GitHubアカウン …

3分で登録可能!Googleアカウント作成と削除手順

Gmail、Googleカレンダー、YouTubeなどの便利なサービスを、同じGoogleアカウントを使用して、楽しむことができます。まだ、アカウントをお持ちでない方は、ぜひとも作成しておきましょう。 …

一歩を踏み出せ!GitHubアカウント登録方法!

自分の書いたプログラムが、顔も知らないエンジニアの役に立つかも? Web上にソースコードを公開することができるサービス「GitHub」のアカウント登録について解説していきます。 アカウント登録 Git …

「下書きをプレビューする権限がありません。」→ありますよ?【WordPress】

WordPressで記事を編集し、さてそろそろレイアウトを確認しようかな。プレビューボタンをポチッとな。 下書きをプレビューする権限がありません。 いやいや権限はありますよ!だって登録ユーザって私だけ …