GIGAZINEさんやLife Hackerさんで取り上げられ、話題になっていますが、大分県で活躍されているデザイン事務所CONDENSEさんから、すばらしいWEBフォントが公開されました。 CONDENSE-iconFont スマホサイトのボタンを設置する場合、１つずつ画像を作ったり、CSS SpriteでCSSを指定するというのも面倒なときがあります。 そんなときに、このWebフォントを使うと、フォント名を指定し、CSSで飾りをつけるだけで、画像の処理を行わず、アイコンを作ることができます。 ダウンロードCONDENSE-iconFontのダウンロードはこちらから í ライセンス「営利、非営利問わず自由に使用できます。但し、再配布は禁止しています。」 とのことで、WEB制作にも自由に使えますね。 フォントファイルダウンロードしたファイルを解凍すると、 CONDENSEicon.woff
Web fonts are an easy way to integrate a flexible icon system into a web project without sacrificing compatibility with legacy browsers. The technical process of building web fonts has also become much simpler since the arrival of online tools like Icomoon or Fontello. But HTML5 has brought us an even more versatile way to use icons on web pages: SVG – Scalable Vector Graphics. SVG basic features
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers The "data" URL schemeを使ってWebページやCSSファイルにバイナリデータ、特に画像を含めるというのは、現状においてはバッドノウハウでしかないかもしれない。しかしながらいくつかのレアなケースにおいては有効なテクニックでもある。現状直ぐに採用するといったテクニックではないが、そういった技術があることは知っておいても損はないだろう。 SitePointにおいてMeitar Moscovitz氏がWhy The data: URI Scheme Could Help Save Your Slow SiteのタイトルでThe "data" URL schemeを使う方法を紹介している。The "data" URL schemeはRFC
Personal website and portfolio of Gilbert PellegromFor one of my projects recently I was playing about with search boxes and came up with a cool drop down search panel. So I thought I would share with you how I made the panel using some jQuery and CSS sprites. View Demo | Download Source Preparation Things you will need to make this search panel: Download jQuery v1.3 so we can animate things. Ima
Make 24 monthly payments Pay 0% interest Start using the domain today. See details
Web Essentials 2013 がVS2013 Express for Webでも使えるようになっていた件 - きよくらの備忘録
Express版でもWeb Essentials 2013が利用可能に！ 本日知ったのですが、WEB開発用のVisual Studio 2013用超便利拡張機能である「Web Essentials 2013 」が、有償版（Pro以上）だけでなく、無償版の Visual Studio 2013 Express for Webでも利用できできるようになっていました。 Web Essentials 2013 for Update 2の詳細はこちら 調べてみると、5月15日にリリースされた『Web Essentials 2013 for Update 2』のバージョン2.1からそうなった模様。 Mads Kristensenがblogでもアナウンスしていました。： Web Essentials on Visual Studio Web Express これで、無償版である Visual Studi
CSS Sprite（CSSスプライト）というテクニックの解説です。 YouTubeやGoogleで使われているCSSテクニックの1つで、リクエスト数を減らしたり表示速度を向上させるといったものです。 もちろん弊害もあるといえばありますので、少し見ていきましょう。 アイコン画像やナビゲーション画像など、1枚の画像にまとめる （*スクリーンショットはYouTubeの実例） CSSで上記画像の表示領域を制御し、適切にデザインしていく（*1） （Fireworksを使うと比較的楽に実装できるらしい。未確認） 上記画像をpngにしている場合、透過処理を施しているとIE6でバグが発生する （IE6は仕様でpngの透過処理に対応していないため。そのため、この条件に当てはまる場合はハックを使う必要がある（*2）） 動作確認を行って完成 *1 CSSのbackground-positionプロパティで表示
http://atnd.org/events/30255 ということで第60回へ行って来ました。幹事代行されたyandoさんお疲れさまです。会場提供のクロコス様ありがとうございます。 今回は初参加の方も結構いらしたようなので良かったなと思います。あ、みなさんPHP勉強会はもっとツッコみ入れて良いんですよ。 当日のtweetは http://togetter.com/li/330157 にコピペしました。(何か問題ありましたらご連絡ください) 発表内容は以下の通りです。(スライドは一部ほかのイベント分のを流用してます) PHP on Herokuの教室 (yando) 4時間耐久 PHP on Heroku View more presentations from yandod phper.jpの話 (halt) http://phper.jp/ 順番として、Herokuの発表のあとでという
CSS3＋IE対策にJavaScriptを併用 hover時のボタンの処理でよく使われるのが以下のような手法です。 ボタンの画像を2枚用意してJavaScriptで切り替える CSS spriteでhover時の位置をずらしたりする しかし、これだとマウスオーバーした瞬間に切り替わってしまいます。徐々に変化する方が自然に感じますし、洗練された印象を受けるのではないでしょうか。 今回ご紹介するのは、CSS3でアニメーションを使ってhover時にボタンの色を変化させる方法です。これにはtransitionプロパティを使うのですが、以下のようにIEが非対応という問題があります。 Windows Firefox 4.03 ○ Safari 5 ○ Chrome 7 ○ Opera 10.63 ○ IE 6 × IE 7 × IE 8 × Mac Firefox 3.6 × Safari 5 ○ C
Sassがあって、Compassが出てきたんだと思うけど、自分が触り始めたのは2013年からで、もうSassを使うならCompassでって感じになってたと思います。 既にCompassが採用されてるプロジェクトで使い始めたので、細かい事は置いといてcompass watchしたら動いてるという、動いてるからこれで良いっぽいという手探りな使い方をしてます。 ただ、Sassはhttp://sass-lang.com/でsassというコマンドもあるのに、なんでサイトも別にhttp://compass-style.org/にあるCompassを使うのか、SassとCompassってどういう関係なのか、ちょっともやっとしてました。 なので、今更ながら、SassとCompassはどう違うのかを、これまた手探りで調べてみました。 今回色々調べて、SassとCompassの立ち位置が分かった気になっ
案件で高速化について触れる機会があったので、Qiitaの方でもまとめておきます。 サイトの表示速度の測り方について まずは自分のサイトが遅いのかどうかを知らなければなりません。 以下サイトでは、実際に自分のサイトが遅いのかどうかを測定してくれます。体感ではわからなくても実際に測ってみると遅いということもよくあるので、一度確認してみることをオススメします。 PageSpeed Insights…天下のGoogle様がサイトの表示速度を測ってくれてスコアまで出してくれるよ WebPagetest - Website Performance and Optimization Test…英語だけどPageSpeed Insightsより詳細に調べることができるよ そもそも何でサイトが遅くなるんだ？ HTML文章をサーバーから取得してくるのに必要な時間はサイト表示時間全体の１割２割といわれています。
ゼロから学ぶ「CSS Sprite」
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
2012年6月に追加したお気に入りの記事まとめ（WEB制作/SEO・面白ネタなど） - すしぱくの楽しければいいのです。
公開日：2012年7月 3日 カテゴリ：月刊まとめ2012 ６月に書いたファーストサーバーがデータ初期化の大惨事！被害者の状況と損害賠償（約款）について調べてみた。｜楽しければいいのです の記事、 サイト名である『楽しければいいのです』が記事タイトル部に付与されておりまして、パッと見、"他人の不幸は蜜の味" ともとれるdisブログもしくは、今日も朝からメシがうまい系のブログであると思われます。ｗ 当然ながらそんなつもりは全くないのですが、こうもPV数が増えてくると見事に釣れた魚の味付けを考えてしまい、感慨深いサイトになったもんだなと浸ってしまいます。（うそです） というわけで、６月に追加したお気に入りサイトさんのご紹介だよ。 2012年6月にあったこと。 2011年の４月から毎月ごとに更新している連載記事なので、ようやくファンの方から『知らないサイトも多くて この記事だけ 楽しみにしていま
Tonttu for Adobe® AIR™
Tonttu for Adobe® AIR™ It’s one of my private works. This is Photoshop Script for helping to create CSS Sprite. What’s Tonttu Tonttu is a tool for helping to make CSS Sprites. You will be able to arrange and move your image files with Tonttu, and it end up writting a html and css files with CSS Sprite Image. You can also save as a project file (.ttd) in order to start exact same screen next t
Posted at July 6, 2010 by Nicholas C. Zakas Tags: CSS, CSS Sprites, Data URI I was sitting in a talk given by Facebook’s Jason Sobel at Velocity this year, when I was a bit surprised by an impassioned plea that he made at the tail end of the talk. To paraphrase, Jason said that CSS sprites require too much work for average web developers and that we should be pressuring the browser vendors to make
CSS is the essential component of modern web design. But writing the CSS code from scratch for each web design project is a tiring and time-consuming job. Here are 15 CSS tools ranging from layout generators, form generators to code compressors that will save you a lot of time writing the CSS code for your next web design. 1. CSS Typeset CSS Typeset is a handy tool that allows to test different fo
6/30にCSS Nite LP, Disk 23「表示速度最適化」 に行って来ました。 気になっているテーマでしたので超早割で申し込みました。自分も表示速度最適化に関しては興味があった（勉強会でお話させていただく機会もあった）のでかなり期待してお話を聞きました。 実際に濃い話が多く、４時間あっという間でした。 以下に自分用のメモとして書きます。 1. Measuring Web Performance – 自己満足で終わらないためのパフォーマンス計測 - ～石本 光司さん(サイバーエージェント)～ 改善をどこから行うか このテーマについては自分も悩んでいましたが、石本さんの定義方法は理解しやすかったです。 改善箇所は Yahoo Developer NetworkのExceptional Performance や Web Performance Best Practices – Ma
fitbit versa を購入したので、お試しでドット絵で文字盤を作ってみました。 出来が中途半端なのでfitbitアプリとしてリリースはしていませんが、githubにソースコードは公開してあります。 リポジトリ: manaten/fitbit-pixelart-knight-clock このエントリでは、上記文字盤を作る際のメモと、fitbitを購入してよかったことについて書きます。 制作時のメモ 以下箇条書きです。 Fitbit Studioについて Fitbit Studio というWeb上のIDEを用いてコーディングから実機テストまで行える。 実機テストに関しては同一のfitbitアカウントで認証している端末が 「Developer Bridge」 でサーバー接続状態になっている場合に、IDEのプルダウンから選択して「Run」で動作確認できる アプリのリリースが面倒なので開発終わ
CSS Spriteの衝撃 ・Yahoo! ・Amazon ・Google こ、これは…すごい！。アクセス数が飛びぬけているサイトでは、もはや常識のテクニックなんでしょうか。 CSS Spriteとは？ CSS Spriteとは、ページ内で使う背景画像を1枚の大きな画像ファイルにまとめ、CSSを使って画像の表示位置をコントロールするテクニックのことをいいます。普通の画像を使ったサイトでは、画像1枚につき１HTTPリクエストが発行され、画像の数だけWebサーバに負担が掛かります。しかし「CSS Sprite」を使用すれば、画像1枚分の1HTTPリクエストで済むため、大幅な通信コストの削減になります。 また、一度取得した画像は、Webブラウザのキャッシュに保存されるため、その後同じ画像が出てきた場合には、Webブラウザのキャッシュから画像が読み込まれます。Webブラウザのキャッシュ画像の利用に
Sketchでiconフォントを使う - Qiita
はじめに 以前はiconをCSS Spriteにして使用していましたが、iconフォントを使うとCSS Spriteには戻れなくなります。 デザインする場合もsketch-iconfontを使うことで、より簡単にiconフォントを使ってデザインすることが出来ます。 今後はiconを作ることすら無くなってしまって、私のようなオジサンは世間からも家庭からもいらなくなるでしょう。 使用方法 sketch-iconfontの使用方法は簡単です。 1. sketch-iconfontをダウンロード こちらからsketch-iconfontをダウンロードします。 ダウンロードしたファイルを解凍し、「iconfont.sketchplugin」をダブルクリックしてプラグインをインストールします。 ※Sketch ToolboxからインストールしてもOKです。 2. font-bundlesをダウンロード
Effective and Powerful CSS Tools & Generators for Designers
CSS Tools for HTML NewslettersCSS technology allows for more powerful and flexible website designs. But there are certain restrictions using CSS and HTML support, and even with inline styles, So presenting you some of the tools for CSS for designing your email newsletter to make your job easier. Primer CSS Primer covers your CSS by pulling out all of your classes and id’s and placing them into a s
WordPressを簡単に高速化する方法 WordPressを簡単に高速化する方法 https://pasonal.com/wp-content/uploads/2016/07/WordPress_Fatest_Thumbnails.jpg 640 430 パソコン生活サポート Pasonal パソコン生活サポート Pasonal //pasonal.com/wp-content/uploads/2016/11/Pasonal-logo-default.png 2016年7月25日 2019年7月9日 WordPressもバージョン4.5となり、ますます使い勝手がよくなりました。 日進月歩とはいったもので、かつてはHTML+Flashの時代から、もはやWordPressでのサイト運営があたりまえの時代になりました。Flashの時代を懐かしく思いますが、これも時代の流れというものなのでしょう
Web制作をたしなむひとのブログです色々と発表する機会があったので、自動生成型のスタイルガイドのまとめです。 ここでいうスタイルガイドというのは、SMACSS(Scalable and Modular Architecture for CSS)に代表されるようなコーディング・パターンガイド的な側面のものよりは、特定のサイト(またはアプリなど)に定義されている(または定義する予定の)スタイルの一覧やコーディング規約を閲覧できるようにドキュメント化したもののことを指しています。 このスタイルガイドという物自体は今にはじまったことではなく、(いやゆる受託でのWeb制作の仕事であれば)納品物と一緒に同梱するというようなことも多くありました。 サイトの更新者への引き継ぎ、チーム開発の場で共有することでクオリティを担保するという意味で、多人数で仕事をする場合にはあるととても便利なものです。 ただし以前
CSS Spriteの手間を軽減するJavaScript「AutoSprites - A jQuery Menu Plugin」
CSS Spriteの手間を軽減するJavaScript「AutoSprites - A jQuery Menu Plugin」 CSS Spriteを利用している方も多いと思いますが、その記述・メンテナンスが少し面倒に感じなくもありません。 jQueryプラグインのAutoSprites - A jQuery Menu Plugin - New Media Campaignsを使用するとその手間が軽減されます。 sponsors 使用方法 AutoSprites - A jQuery Menu Plugin - New Media Campaignsからファイル一式をダウンロードします。 また、こんな画像と こんな記述があるとします。 <ul id="nav"> <li id="home"><a href="#">Home</a></li> <li id="local"><a href=
Animation CSS
Jquery CSS Sprite Animation Plugin download jquery.aniCss.js(github) >> html <div id="target"></div> >> js $('#target').aniCss( img src, width, height, framelate ); by hgw 120fps >> html <div id="anim120"></div> >>js $('#anim120').aniCss('animation.gif', 640, 415, 1000/120 ); 60fps >> html <div id="anim60"></div> >>js $('#anim60').aniCss('animation.gif', 640, 415, 1000/60 ); 30fps
MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。 Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。 例。単純にくるくる回転し続けます。 再生、停止、逆再生もサポート。 コールバックを使って順番にアニメーションさせることもできます。 アニメーションの素材になる画像はSprite画像になっている必要があります。それをJavaScriptを使って順番に変更していくことでアニメーションのように見せることができます。カスタマイズもできるので色々な見せ方に使えそうです。 MovieCrop.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る Web上でアニ
So you’ve got your sprite created, and it’s working great. 30+ icons in one image… major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud. Until you find that your sprite is used on an element that is tall enough to expose the next image component down in the sprite. Â The 50px of spacing between components you thou
CSS Nite LP23フォローアップ（2）『画像の最適化で地球をエコに』（岡部 和昌さん） 記事公開日：2013年1月 8日（火） 2012年6月30日（土） 、ベルサール九段で開催したCSS Nite LP, Disk 23「表示速度最適化」のフォローアップとして、岡部 和昌さんの『画像の最適化で地球をエコに』のスライドなどを公開します。 スライド（PDF、86ページ、17.6MB） デモデータ（55KB） 音声 メッセージ 何かを押し売りそうな勢いでセッションをさせて頂きました岡部です。コンセプトは「熱く楽しくゆっくりと」だったのですがやりすぎたようです。 セッションにご参加いただきありがとうございました。内容としては基本的な内容となっていましたので、既にツールを使われている方や熟知している方には少しだけ退屈だったかもしれません。ですが運用時に考えることや、ナレッジなどもお話しまし
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. As a site owner, possibly the worst ex
orangemittoo's blog
compassで画像を使う時のパス compassの機能でsprite画像を自動生成できる機能がありますが、 WEBフレームワーク等を使用していると パーツ画像を指定するディレクトリのパスと、実際にCSSに出力されるbackgroundのパスは別々にしたいというケースがあると思います。 その場合config.rbの設定で、 images_dirにパーツ画像のパス、 http_generated_images_pathにCSSに出力されるパスを設定するとCSSにはhttp_generated_images_pathで設定されたパスが適用されます。 /* config.rb */ css_dir = "./" sass_dir = "./" /* パーツ画像のパス */ images_dir = "../img" /* CSSに出力されるパス */ http_generated_images_
Try Lifelog
Eclipseのメニューから、「ファイル」－「」 プロジェクト名： 公開時にアプリケーション(application)を識別する名前。登録済のアプリケーションはGAEのadmin consoleで確認可能できる。今回は、 triplifelog とする。 パッケージ： Javaの標準に従ってパッケージ名(ドメイン名を逆順にする)を入力する。GAEアプリケーションは、「プロジェクト名.appspot.com」という名前で公開されるので、今回のケースでは、com.appspot.triplifelog となる。 ロケーション： 「ワークスペース内に新規プロジェクトを作成する」をチェックする。 Google SDK： 「Google Appエンジンを使用」をチェック、「Google Webツールキットを使用」のチェックを外す(使用しない)。 その他： 「マーケットプレイスのサポート」、「プロジェ
ついに本日より、サイトのテンプレートがバージョンアップし、テンプレートVer2.5が公開となりました！今回は今までのテンプレートから中身と外見の両方を含め、大幅なバージョンアップを行っています。それに伴いVer2.4はなしでVer2.5という形にしました。これは4ヶ月前から地道にやっていたテンプレート改造で、今週になってやっと完成し本日正式公開に至ったものです。 見た目はほとんど変わっていませんが、内部コンテンツが大幅に書き直しており、読み込み量の大幅な削減とともに動的ローディングの導入によりロード時間の短縮に成功しました。もちろん見た目にもこだわっており、今までにないアニメーション効果による動きのあるサイトに仕上がりました。それでは詳細を説明していきたいと思います。 テンプレートの内部構成の変更点 まずは内部構成の大幅な変更について説明したいと思います。今回テンプレートの改造に当たって、
CSSスプライト 読み方： シーエスエススプライト 【英】 CSS Sprites CSSスプライトとは、Webデザインにおける技法の一種で、複数の画像部品を連結して1枚の画像ファイルにまとめ、CSSで表示範囲を指定することによって表示する手法のことである。 CSSスプライトは、一般的には複数のファイルとして扱われる画像部品を、1つのファイルにまとめて扱うため、Webページを表示する際にサーバーに対して発せられるHTTPリクエストの数を削減できるという特徴がある。これによって、HTTPリクエストによる表示の遅延を防ぎ、パフォーマンスの向上を図ることができる。また、オンマウス時に表示の切り替わるメニューボタンのような類似画像をまとめて管理できるという利点もある。 CSSスプライトによってまとめられた画像部品は、CSSの「background-image」プロパティで表示範囲を指定することによ
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
CSS Spriteの手間を軽減するJavaScript「AutoSprites - A jQuery Menu Plugin」
twitter facebook hatena google pocket CSS Spriteを利用している方も多いと思いますが、その記述・メンテナンスが少し面倒に感じなくもありません。 jQueryプラグインのAutoSprites - A jQuery Menu Plugin - New Media Campaignsを使用するとその手間が軽減されます。 sponsors 使用方法 AutoSprites - A jQuery Menu Plugin - New Media Campaignsからファイル一式をダウンロードします。 また、こんな画像と こんな記述があるとします。 <ul id="nav"> <li id="home"><a href="#">Home</a></li> <li id="local"><a href="#">Local Industry</a></li>
で、これを見ると、 http://s.ytimg.com/yt/img/master-vfl38353.gif という画像が所々で呼ばれているのに気が付くだろう。 ちなみにその画像はこんな画像だ。 で、CSSでは背景を透明にし、画像を一回だけ読み、width,height,scroll属性で別々の画像のように表示しているようである。 画像ファイルを読み込む数が減ると、それだけ高速に表示できるということなのだ。#masthead .logo img { width: 132px; height: 63px; background: white url(http://s.ytimg.com/yt/img/master-vfl38353.gif) no-repeat scroll 0px 0px; } #masthead .nav-item.selected .leftcap { backgro
CSS Module List API Documentation クライアントサイド JavaScript Client Side JavaScript API Client Side JavaScript API (IWP v7.2) スクリプト開発モデル タグライブラリ im-BizAPI im-BizAPI(互換) JavaEE開発モデル タグライブラリ im-BizAPI im-BizAPI(互換) CSSモジュール一覧 CSSモジュール一覧 CSS Sprite CSS Sprite Image List Webサービス IM-Workflow Web サービス (IWP v7.2)
Components
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert This page is our old "registry". If you want to add your component to our new registry crawler, available via component-search(1) and http://component.github.i
Web designers and developers are constantly looking for ways to decrease the time required to design or to develop a website. This is how they can improve their productivity and get the most out of their work. Here we are showcasing a collection of some useful and excellent CSS tools and generators that will help designers and developers in saving their precious time. CSS tools are indispensable f
cocos2d ではメモリ効率よく画像リソースをあつかうために以下のような CSS Sprite っぽい画像に複数リソースを格納して使うことができる。 cocos2d 自体は 0.99.5 から Retina 対応するようで、通常の画像ファイルなら -hd.png のような suffix で画像を置いておけば自動的にそいつが使われるようになった。 スプライトシートでの対応方法が見つけられなかったので、いろいろ試してみた。 結論から書くと、 time_num.pngtime_num-hd.pngtime_num.plisttime_num-hd.plist とそれぞれファイルを作成する。plist のなかのファイル名は -hd ありなしに関わらずどちらもおなじ物を指定する必要がある。 そのうえで、 [[CCSpriteFrameCache sharedSpriteFrameCache] ad
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBフォントCONDENSE-iconFontを使ってアイコンボタンを作ってみた
Build Your Own SVG Icons — SitePoint
HTMLに画像も含める、IE8登場後には使うシーンもあるか | エンタープライズ | マイコミジャーナル
jQuery Dropdown Search Panel | Gilbert Pellegrom
EuChoice.com is for sale | HugeDomains
Web制作のトラブルシューティング : CSS Sprite - CSSスプライト 解説
第60回 PHP勉強会に参加しました - Feelin' Kinda Strange
第12回 ふわっと色が変わるボタンを作るには | gihyo.jp
SassとCompassってどう違うのか調べてみた | kanonjiのブログ
あなたのサイト遅くない？ サイトを高速化しよう！ - Qiita
Data URIs make CSS sprites obsolete - Human Who Codes
10 Time Saving CSS Tools You Should Be Aware Of - WPLoaded
CSS Nite LP, Disk 23「表示速度最適化」 に行って来ました – tama's memo
fitbitの文字盤を作ってみた話と、fitbitを買ってみてよかったこと - MANA-DOT
『TypePadクエスト』第1話：CSS Spriteの衝撃：XML乱舞：エンジニアライフ
WordPressを簡単に高速化する方法 – パソコン生活サポート Pasonal
september creator | I was born on September
JavaScriptとCSS Spriteを組み合わせてアニメーション·MovieCrop.js MOONGIFT
Diagonal CSS Sprites – Aaron Barker
CSS Nite LP23フォローアップ（2）『画像の最適化で地球をエコに』（岡部 和昌さん）｜CSS Nite公式サイト
Saving Bandwidth and Improving Site Speed Using CSS Sprites
テンプレートがバージョンアップ！ついにVer2.5を公開！ - 裏技shop DD
CSSスプライトとは (CSS Sprites) シーエスエススプライト： - IT用語辞典バイナリ
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
YouTubeのアクセスが速いのは読み込む画像ファイルが少ないから？: 駄文と書評
intra-mart Accel Platform Tag Documentation
50 Handy CSS Tools And Generators for Developers
cocos2d の Spritesheet の Retina 対応 - unknownplace.org