ゼロイチ

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

管理人

関連記事

GoogleAdsenseへの申し込み手順

ブログで収益を考えるならば、一番に導入したいサービスがGoogleAdsenseです。クリック報酬型のアフィリエイトで、PV(ページビュー)が多ければ多いほど、クリックされる数が増えるので収入が増えま …

インフォトップのアフィリエイトリンクを設置しよう

インフォトップのアフィリエイトリンクの作成方法を解説します。アカウント登録がまだのかたは、初心者大歓迎!インフォトップの登録方法!からアカウントを取得してください。 目次1 インフォトップのアフィリエ …

お客様の住所の確認が完了していないため、お客様のお支払いは現在保留中となっていた件。Googleアドセンス

Googleアドセンスをサイトに設置してから数週間。順調にPV数を伸ばしてきました。アドセンスの収入も気になり始めたので、ちょっと報酬額を確認してみました。すると。。。 目次1 管理画面にエラーメッセ …

gem install rails した際にactivesupport requires Ruby versionのERRORになる場合の対処法

railsをインストールしようとした際、少しハマったので備忘録がてら書きます。 gem install rails –no-ri –no-rdoc ERROR: Error i …

git init した時にエラーになる時に対処法

git init した時にエラーになる時に対処法 Reinitialized existing Git repository in Gitリポジトリは既に作成されているのでinitする必要はない場合に …