ゼロイチ

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サービス, 開発
-

管理人

関連記事

SourceTreeでGitHubにプッシュしたとき、Password Requiredから進まない

SourceTreeとGitHubを使って、開発をしようと設定していたところ、GitHubへのプッシュがうまくいかなくて少々ハマりました。 プッシュ実行→GitHubのユーザー名とパスワードを聞かれる …

初心者大歓迎!インフォトップの登録方法!

  ブログ運営で収益を上げる方法として、人気の手法はアフィリエイトです。 情報商材系のアフィリエイトを行うなら、信頼度の高いインフォトップをおすすめします。ほとんどのアフィリエイターがインフ …

ChromeのCookieを個別に削除する2つの方法。設定画面から or デベロッパーツールから

「あー、Cookie削除したい」 「でも全部消すのは嫌だ!」 ChromeのCookieを削除したいと思っても全て消してしまうのは困りますね。他のサイトのログイン情報は残しつつ、該当のサイトのCook …

忍者AdMaxの使い方!アカウント登録から広告設定までご説明!

審査が要らず、スグにでも導入できるクリック報酬型広告【忍者AdMax】の登録〜広告作成まで解説します。 まず忍者AdMaxにアクセスします。 上部メニューバーから【新規ユーザー登録】をクリックします。 …

急展開すぎて困惑!Adsenseアカウント復活しました!

先日、Googleアドセンスにログインすらできない!せめて何が気に入らないのか教えてちょうだい!という記事を書きました。その後、停止になっていたGoogleAdsenseアカウントの復帰をあきらめまし …