Use Sprites to Create an Awesomeness-Filled Navigation Menu | Envato Tuts+
Tutorial Details Requirements: Basic Knowledge of jQuery Basic Knowledge of Photoshop Basic Knowledge of CSS Difficulty: Intermediate Estimated Completion Time: 40 mins What is a CSS Sprite? Sprites date back to the early days of video games, where they were used as optimization technique for displaying 2D graphics. A CSS sprite is a technique that involves grouping images to form a single master
本日は、一日中このブログの表示の高速化に努めていました。近頃、以前よりブログに対する検索トラフィックが増えてきたからです。 これ以上どこをいじったら、ブログの表示を高速化出来るのか、いまいち分からなかったので GTmetrix というサービスを使い、ブログのどこがネックになっているのか、確認してみました。 すると、診断結果で「CSS スプライト」を使いなさいと表示されました。な、なるほど～画像をまとめて読み込んで高速化しろってことですね。CSSスプライトは今まで使ってきたことがなかったので思いつきませんでした。 CSS スプライトで表示の高速化 CSSスプライトとは、Webデザインにおける技法の一種で、複数の画像部品を連結して1枚の画像ファイルにまとめ、CSSで表示範囲を指定することによって表示する手法のことである。 ―― CSSスプライトとは (CSS Sprites) シーエスエススプ
Sometimes it’s the little things that can make all the difference and there are plenty of neat little CSS tips that can help with all aspects of design and development. Here are a few great tips that will help you improve your CSS work and help you get the most out of your code. Reset Browsers’ Default Styling By default, browsers assign styles to certain elements. The problem with this is differe
Introduction I have gathered a long list of CSS optimization and file size reduction techniques that have been using by most designers/developers. Depend on the complexity of your CSS code, these techniques might greatly reduce your CSS file size, or maybe just a few kilobytes. Also, you might also want to read my previous post regarding CSS - 15 CSS Tips and Tricks to learn how to write more effi
カスタマイズしてブログを変える！ - ファンブログハック
先日、ブログのコメント欄にて「ファンブログの絵文字の読み込みをCSS spriteを使った方法に変更できないか」という意見をいただきました。 ブログのアクセスが増えた時にアドセンスからそんなメッセージが来るとか。 自分はアドセンスも使ってないし、ずいぶん前に表示速度について悩んでいる時に絵文字の問題には悩まされていたのでコメントツールバーは外してしまっていたんです。 (コメントツールバーを無くして表示速度0.5秒削減) それだけだと寂しいなーって事で、その時にCSS spriteのことは調べたので使ってみたいと思ってオリジナルの絵文字を導入したり(ブログのコメントで使う絵文字をカスタマイズしてみた)、関係ないですがファンブログのコメント投稿フォームをコンパクトにしたりして、現状のコメントフォームは少し初期の物とは異なっているんですが。 まあそんな感じで前に少しやろうとしていたこともあり、コ
GitHub - jakesgordon/sprite-factory: Automatic CSS Sprite Generator
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
iOSで正式に使われるようなった絵文字による効果はとても大きく、GitHubやBasecampなど様々なWebサービスで採用されるようになっています。デスクトップのブラウザではCSS Spriteによって表示されることが多いようです。 しかしデバイスによって表示方法が異なるというのは調整が面倒です。そこで使ってみたいのがjs-emoji、様々なブラウザに対応する絵文字表示ライブラリです。 js-emojiの使い方 js-emojiを使えばユーザが入力した絵文字を簡単に画像として表示できます。デスクトップ、モバイル両方で使えるコミュニケーションサービスなどで使えそうです。 js-emojiはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Emoji translation demo iamcal/js-emoji
世の中にはパフォーマンス最適化のためのベストプラクティスと呼ばれるものがたくさんありますが、一体どれから手をつければよいのしょうか、また一体どれが一番効果のある対策と言えるのでしょうか？一般論を言えば、ネットワーク改善から手をつけるべきで、その中でもHTTPリクエストを減らすのが一番効果的です。リクエストを減らすポピュラーなテクニックであるCSS SpriteをSass/Compassを利用しながら効率良く改善していきましょう。Read less
CSS3 is the improved version of CSS, which stands for Cascading Style Sheets specification. It boasts many awesome features that have totally changed the way people used to create Web layout and design. It also has its pros and cons. CSS3 is new, so it needs some improvement. The biggest issue with it is that its properties are browser-specific and their cross-browser implementation is difficult.
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. There are a million and one ways to bo
CSS | CSS-Tricks
A Complete Guide to CSS Grid Last updated Feb 9 2023 Author Chris House Category CSS Custom Checkboxes and Radio Buttons Last updated Jan 11 2023 Author Chris Coyier Category CSS A Complete Guide to Flexbox Last updated Dec 9 2022 Author Chris Coyier Category CSS System Font Stack Last updated Oct 26 2022 Author Geoff Graham Category CSS How to use @font-face in CSS Last updated Sep 30 2022 Author
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
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance - WebSiteOptimization.com
Summary: Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects. CSS sprites group multiple images into one composite image and display them using CSS backgr
d.hatena.zeg.la
材料 Android Tablet connectbot Linux(Ubuntu Server Edition 10.10 64-bit)環境 android sdk linux x86 jdk ant apache vim Androidタブレットにconnectbotをインストール ちなみに私は下記端末+ http://www.ebook-reader2han.com/products/detail27.html 8インチタブレット用キーボード付きケースで試しました http://dokidokido.com/category/tablet/kbc8/index.html Androidマーケットからconnectbotで検索 インストール しかし、、、ctrlやtab,escが効かないので vimで編集とかとてもしにくい状態 UbuntuにCLI Android Developme
Magnific Popup, A Truly Responsive Lightbox Plugin — Smashing Magazine
A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, an open-source lightbox plugin focused on performance. A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices.
ここ1年くらいでよくお世話になったオンラインツールをメモを兼ねてまとめてみます。 有名どころが多いですが、何かの参考になれば。 また、似たサービスはいっぱいありますが、自分が一番使いやすいと思ったものを紹介しています。 一応カテゴリ分けしていますが適当ですｗ レイアウトとフォントサイズ Variable Grid System 960 Grid System をベースにしたグリッドレイアウトジェネレータ。 レイアウト作るときに使ってます。 EmChart フォントサイズの px と em の相関表。 em の 1 を 100% とすればパーセント指定するときにも役立ちます。 自分用に普段使う周辺以下のサイズ(1px～24px)だけキャプチャして画像として保存してます。 コードのチェック The W3C Markup Validation Service 説明不要の HTML Validat
自分は去年から小さく言い続けてるんですが、SPA（Single Page Application）が主流の時代が間違いなくくると思ってます。 Single-page application [en.wikipedia.org] http://en.wikipedia.org/wiki/Single-page_application 細かい定義までは理解していませんが、基本的にはWEBアプリケーションにおいて、URL遷移なくすべて（or ほとんど）の機能を利用できるアプリケーションのことだと思ってます。 もう少し具体的にいうと、機能（ページ）遷移時のHTMLレンダリングはJavaScriptによって必要な分だけのDOMの再構築を行い、データの取得などクライアントサイドで完結しない部分については、サーバとAjaxなどを用いてJSONデータのやり取りなどで必要なデータを都度取得するような構成でも
この記事は賞味期限切れです。（更新から1年が経過しています） 一言にサイトパフォーマンスアップと言っても、どこまで手をつけるか悩みどころ。 今日のお話は、出来るだけ忘れずにやっておきたいごくごく簡単なチューニングです。 フロントエンドで出来ること CSSは一番はじめにロードする スタイルシートに含まれる背景画像のロードと、 ページのレンダリングを出来るだけ早くおこなう為です。 JavaScriptは一番最後にロードする JavaScriptは</body>の直前あたりでロードするのがパフォーマンスが上がる様子。 ただし、レンダリング前に処理したいケースもあるので、可能な限りで。 CSS/JavaScriptは圧縮しよう ツールを使って、CSS/JavaScriptファイルを最小化してあげましょう。 YahooライブラリにあるYUICompressorは、CSS/JS両方を圧縮出来るのと、
CompassでCSS Sprite生成（手動生成、Retina対応） - 一から勉強させてください
今回は、前回やったCompassでCSS Sprite生成〜導入、自動生成〜の続きとして、CSS Spriteの手動生成とRetina対応について書きたいと思います。 ちなみに前回と今回のサンプルをまとめてこちらに公開しております。 https://github.com/danimal141/create_css_sprite それではまずCSS Spriteの手動生成についてです。 前回は @import "compass"; $sprite_images-sprite-dimensions:true; @import "sprite_images/*.png"; @include all-sprite_images-sprites;という記述だけであっという間にスプライト用のCSSができちゃいましたが、これ以外にも同様のスタイルを生成する方法があるみたいなので試してみました。 これ。
世の中、様々なジェネレータがあり、また紹介されているため、すでに知っているサイトばかりだとは思いますが、どれか１つでも新しい出会いがあればと思い個人的に愛用しているジェネレータを紹介します。 目次 簡単なボタンデザインをCSSで再現する グ世の中、様々なジェネレータがあり、また紹介されているため、すでに知っているサイトばかりだとは思いますが、どれか１つでも新しい出会いがあればと思い個人的に愛用しているジェネレータを紹介します。 目次 簡単なボタンデザインをCSSで再現する グラデーションを細かく指定したい 斜め線のリピート用画像を簡単に作りたい CSSスプライトの画像を簡単に作りたい ローディング画像を生成したい ファビコンを作りたい 簡単なボタンデザインをCSSで再現する CSS3 Generator – By Peter Funk & Eric Hoffman スマートフォンサイトなど
Sassのことばっかりかいてるんですけど、html5+α@福岡 勉強会で珍しく発表したり、仕事で久々にsassばっかり触ってるのもあるんだと思います。 そんなSassをお勧めする理由の一つがCompassというCSS Frameworkなんです。 便利なMixinやらFunctionやらあるんですけど、一番うれしいのが面倒なCSS Spriteを自動化できることでしょうか。 例えばhogeというディレクトリにSpriteしたい画像を格納しておけば、 [code] $sprite: sprite-map("hoge/*.png"); [/code] で画像を結合してくれます。 ファイルの結合にはオプションをつけることで色々とできて、 例えば、各画像ファイルの間隔をあけて結合させたいときは、 [code] $sprite: sprite-map("hoge/*.png", $spacing:
RsStudio Style - Home
2010/04/19 21:49 ブログ以上コラム未満始めました Twitterに書くと後から使える文章にならないので、コーナーを設けてみました。機能拡張やプラグインを作るときの発想とかも書くかもしれません。時間があいたときの暇つぶしにでもどうぞ。 2010/04/16 13:06 イベント告知・Web Designing寄稿・新着記事 CSS Niteのイベントにスピーカーとして参加させていただくことになりました。Dreamweaver Town Meeting in Tokyo(5/29)とCSS Nite in OMOTESANDOのFireworks Town Meeting in Omotesando(6/12)です。また、4/17発売のWeb Designing5月号に寄稿しました！ 2010/04/02 09:00 2010年3月 CSS Sprite Extension （
Tools and downloads There are many variables that affect a site's performance. The tools listed below can help you discover those variables and improve your site. We recommend that you experiment with these tools. Multiple simple changes can improve the experience for your users around the world by several seconds. From Google Web page analysis Page Speed - Open source Firefox/Firebug Add-on that
CSSで今までにないグラフをデザインしたい。 そんなときにおすすめなのが、『Pure Css Line Graph』。CSSで折れ線グラフを作るテクニックだ。 このエントリーでは、↑のようなグラフをCSSで実装する方法が紹介されている。 ↓のような画像をCSS Spriteとして使用し、dl,ddタグを使って実装している。 デモは以下から。 » Take a look at the demo CSSで折れ線グラフを作るテクニック、チェックして参考にしてみてはいかがだろうか。 » Pure Css Line Graph 先日フライパンのセットが届いた。いい感じに焼けてるよ。
CSS Sprite
CSS Sprites collection
CSS Radar For Frond End Developers Recent Articles ウェブデザイナのためのRuby入門 14 May ブラウザでデザインをするということ 16 Apr ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr Read More Terminal.appは怖い。 GUIでなんだって出来る時代にパソコンに出会った私にとっても、それは変わらない。 Macをメインで使い始める前、たっぷり3年以上もUbuntuというLinuxディストリビューションをメインで使っていた私でも、Terminalで何かをしなければならない時しか開くことはなかった。 MacVimをメインのエディタにしてから3ヶ月ほど、年明けからJekyllを使ってブログを作成しはじめた。Rubyを覚え
ErrorVault acquires Spriteme - Web Development Troubleshooting Tools
Spriting in all simplicity ErrorVault has acquired US-based Spriteme to complement it's growing web development portfolio. ActiveX errors, browser error codes, Runtime errors, Windows Update errors, Blue Screen of Death, Device Manager errors, Windows system errors, Windows errors Background images can give pages a good look, but also slow them down. Each background image is an additional HTTP req
twitter facebook hatena google pocket サイトの重要な要素メニューを印象的にすることで、回遊性をもたらせることができるかもしれません。 Kwicks for jQuery and an awesome horizontal animated menuではJavaScriptを使用し、マウスオーバー時に良い動きで人の目をひきつけます。 sponsors 使用方法 Kwicks for jQuery and an awesome horizontal animated menuからjquery.kwicks-1.5.1.jsをjQuery Easing Pluginからjquery.easing.1.3.jsをダウンロードします。 今回はjQueryを使用するので、jQueryからjquery.jsも。 <script type="text/javascri
ウェブテクノロジ、画像軽量化ソフト「OPTPiX Pro」発表 - 減色機能に特徴 | エンタープライズ | マイコミジャーナル
ウェブテクノロジは7月12日、Webデザイナー向けの画像ファイル軽量化ソフトウェア「OPTPiX Pro」を発表した。 OPTPiX Pro OPTPiX Proは、減色により画像のファイルサイズを小さくするソフトウェア。ゲーム開発者の間で広く利用されている画像ファイル軽量化ソフトウェア「OPTPiX」シリーズのWebデザイナー向け製品で、機能を限定して安価に提供しているほか、CSS Sprite対応機能やAdobe PhotoShopのプラグイン版も用意されている。 OPTPiX Proは、減色の優先度を細かく設定できる点が大きな特徴。例えば、女優の写真を軽量化する際に、閲覧者の目がとまりやすい唇付近は極力そのままの色味を残し、髪飾りなどの中心から遠い位置にある部分は減色幅を大きくするなどの柔軟な調整が可能で、減色時の画質の劣化を最小限にとどめることができる。設定方法も画像ファイルの上で
このあいだ iPhone アプリに今までいくら使ったのか調べたら、3万くらい使ってたことに気付いてちょっと反省しているハシモトです。（App Store Expense Monitor で調べられます） 今日は画像置換について書いてみたいと思います。 画像置換とは 画像置換とはCSSのテクニックのうちの一つで、HTMLでマークアップしたテキストをCSSでテキストを隠し、画像に置き換えて表示させる手法のことを言います。 この手法はalt属性が必要でない画像を使用するとき、つまり完全にデザイン目的だけで画像を使用するときに使われたりします。 メリット 文書構造とデザインをHTML・CSSで分離でき、CSSだけで見た目のコントロールができる altのテキストを検索対象に含めない検索エンジンに対してSEO的に効果があるかもしれない background-positionプロパティを応用して、ロール
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
こんにちわ。竪月です。 最近Webアプリ開発に携わることが多くなって、セキュリティ強化、ローカル環境でも動かしたい、通信量を減らして高速化したい、ページまるごと再読み込みさせたくないなど、Webアプリならではの要求がいろいろあるな、と思ったので、そのなかでも、今日は割と簡単にできる「通信の高速化」について書きたいと思います。 ちなみに、フロントエンド（クライアント側⇒つまりPCやケータイのブラウザ）側とバックエンド（サーバサイド）どちらでも高速化の対応をすることはできますが、サーバサイドは敷居が高い（システム全体に影響する可能性がある、専門知識が必要）ため、今回は割と手軽にでき、影響範囲が限定的なフロントエンドに特化した内容で進めていきます。 Webアプリ高速化のためにやるべきこと ①通信回数を減らす 画像、CSS、Javascriptファイルの数を減らすことで、通信回数を減らしましょう。
floatを親要素で解除するクリアフィックス
2007年6月16日 floatさせた要素を、その親要素で解除する、いわゆる、クリアフィックスというテクニックの解説。 floatさせた要素を、その親要素で解除する方法があります。いわゆる、クリアフィックスというテクニックです。 構造のマークアップなしでフロートをクリアする方法 このテクニックで、ずっと悩まされてきた問題を解決できました。ので、悩まされてきた内容を書いて、心に焼き付けておきます。 問題のHTMLコード そもそも、floatを利用して回り込みを行う際、どうやって解除するか非常に悩む場面があります。僕が昔からずっと悩んでたのが、以下のコード。 メニュー1 メニュー2 メニュー3 メニュー4 ようするに、<li>タグにfloatをつけて<ul>内で横並びのナビゲーションを作るときなんだけれど、回り込みさせた<li>を、どのポイントで解除すればいいの？というやりきれない思いで胸がい
GitHub - filamentgroup/grunticon: A mystical CSS icon solution.
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
週刊Webテク通信 2009年8月第3週号1位は、Webデザイナーのための5つの上級Photoshopテクニック／気になるネタは、TypePadのマイクロブログ機能はPosterousそっくり ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年8月17日～8月23日の間に見つけた記事のベスト5です。 1. Carsonified ? 5 Advanced Photoshop Techniques for Web Designershttp://carsonified.com/blog/design/5-advanced-photoshop-techniques-for-web-designers/ WebデザイナーのためのPhotoshopチュートリアル記事です。 以下のような、最近
Web エンジニアのための最低限必須な Firefox アドオンまとめ - hiratake55 の作業メモ
先日、自宅で使っているパソコン (Windows Vista Ultimate 32bit) をリカバリした。 その時、再インストールすべき Add-on をメモしていたので、自分用メモとしてアップしとく。 //addons.mozilla.org/ja/firefox/addon/8740" target="_blank">Chrome View:Google Chrome で開く。 //addons.mozilla.org/ja/firefox/addon/271" target="_blank">ColorZilla:ページ内のテキスト、画像の色 (RGB 値) を取得。 //addons.mozilla.org/ja/firefox/addon/68" target="_blank">DictionarySearch:ドラッグして辞書サイト (アルク英和辞典など) の検索結果へジャ
ひでぶろぐ。 csssprite
[PR] 今日のニュースは？？ : 2ch自動まとめキュレクス [PR] 名言や格言をどうぞ！ : 名言満載！ [PR] 副業したい？ : 出張ホスト募集中 [PR] SEO最高峰のクオリティー : 知る人ぞ知る、SEOUP.com。テラプレミアムアクトは抜群におすすめ！ [PR] 口コミ対策 : 口コミでSEO対策。なんとびっくり、1円からご利用頂けます。 [PR] 出張キャバクラアゲハ : ちょっとした飲み会のお供に。デートのお相手に。 CSS sprite を使うときによく迷うのでメモ。 例えば、グローバルメニューを ul li タグ を使い 横並びに表示させたい場合の 書き方。 .gmenu { text-indent:-999px; list-style:none; margin:0px; padding:0px; } .gmenu li { float: left; margi
ブラケット社員がセレクトした気になる今週のサービスなどを、まとめてお送りします！（サービス下のコメントはセレクトした社員からのコメントです。） ☆ブラケットでは、毎週月曜日に、各社員が、その週に気になったサービスをいくつかずつ共有し合うカルチャーがあります。それを毎週一般公開しています。 今日のピックアップ社員は、デザイナーの中間です！ 中間はネットサーフィンをしていて気になったサービスなどがあるとすぐにメモしておくそう。 そんな中間がセレクトしたサービスは、下記３点です。 — 1. プロジェクションマッピングのある銭湯 http://hisamatsuyu.jp/ 練馬区にある久松湯という銭湯。 魔法の美術館などに参加してるアーティスト集団が演出。 （しかもこのアーティスト集団のアトリエが使われなくなった銭湯という繋がりも面白い。） プライベートでも銭湯や岩盤浴が好きで、友達と行ったり
CSS Spriteは、画像が背景になってしまうので、 印刷した時に（標準設定では）印刷されないから使いにくい。 と、思っていたら、最近では色々な方法があって、 画像が印刷されるものもあることを、先日知りました。 最初の好き嫌いで判断して、中身を見ずに居たら、駄目ですね。 CSS Spriteの方法は色々ありますが、検索エンジンスパム的扱いを受けると怖いので、 Googleで使われているものなら大丈夫だろうと、 現在Google検索結果の左上ロゴで使われているものについて調べてみました。 以下は、忘れそうな自分の為のメモです。 ■ HTML ==================== <a href="index.html">テキスト<img src="images/aaa.jpg" alt="" width="200" height="100" /></a> ■ CSS =========
SassについてとCompass導入から利用までの簡単な解説 2013-04-09 はじめに このページではRubyやSassのインストール手順などの初歩的なことや、高度なSassの使用方法についてはほとんど解説されていません。 Sassに興味をもっている方、もしくはすでにSassを使用していて …はじめに このページではRubyやSassのインストール手順などの初歩的なことや、高度なSassの使用方法についてはほとんど解説されていません。 Sassに興味をもっている方、もしくはすでにSassを使用していて、これからCompassやBourbonの導入を考えている方を主に対象としています。 SassとSCSS SassとはCSS3の拡張であり、ネスト・変数・Mixin・セレクタの継承などの機能が実装されています。以下はその4つの機能を使った、リンクとそのホバー時の色を変更する例です。 $l
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像読み込みの高速化に使える！「CSS Sprite Generator」 | PLUS1WORLD
Simple CSS Tips that Go a Long Way | Tom Kenny Design
15 Ways to Optimize CSS and Reduce CSS File Size
js-emoji - JavaScriptを使ってどのブラウザでも絵文字を表示
モバイル制作におけるパフォーマンス最適化について
25 Useful CSS3 Tools and Auto Generators
10 Ways to Improve Your Web Page Performance
GitHub - aslansky/css-sprite: css sprite generator
よくお世話になっている19のオンラインツール | Unformed Building
2013年はSPAの年・・・になるといいなぁ - new takyam();
今すぐ出来る、ちょこざいなサイトパフォーマンスアップ - Mach3.laBlog
» Web制作の作業効率を上げるジェネレータ | Webnoborder
SassフレームワークのCompassでCSS Spriteが簡単にできる
Let's make the web faster - Google Code
CSSで折れ線グラフを作る『Pure Css Line Graph』 – creamu
ターミナルを使いこなす | CSS Radar | For Frond End Developers
印象的なメニューを作成するJavaScript「Kwicks for jQuery」
意外と知られていない? 画像置換のテクニック | サイブリッジラボブログ
スマートフォンサイト制作時に覚えておきたいCSS 15
【Webアプリ】簡単にできる高速化対応 | ヘッドウォータースのブログ TechNote
2009年8月第3週号 1位は、Webデザイナーのための5つの上級Photoshopテクニック／気になるネタは、TypePadのマイクロブログ機能はPosterousそっくり | gihyo.jp
— ブラケット社員がセレクトした今週の気になるサービス 40選（12月15日週）
CSS Sprite | デザイン事務所 流楽 ブログ
SassについてとCompass導入から利用までの簡単な解説 - blog.4uing