CSS Radar For Frond End Developers Recent Articles ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr HTML5 Boilerplate 15 Mar ターミナルを使いこなす 13 Feb Read More ハードウェアの値段が下がり、ネットの接続環境も高速化していく。ブラウザも高速化を競い合っている。 それでもなお、GoogleもYahoo!、FacebookもTwitterもページのロード時間を短縮するテクニックを生み出している。 なぜだろうか？ もちろん、カスタマの満足度を上げ、終局的には売り上げに貢献するからだ。 GoogleもYahoo!も世界で1位2位を争うほどすばらしいデータセンタを所有しているのだから、早くて当たり前。 なんて思って
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. In this web development tutorial, you’
A Gulp-Based External SVG Symbol Sprite Icon System Published on January 26, 2016 I made a boilerplate for the system described in this post: P.S. Please ignore the awful title of the blog post. I couldn’t figure out what to call it. Icons! We see them all over the web, and they’re essential to most pattern libraries and web design systems. I recently needed to implement such a system. It had to b
各ディレクトリ毎にナビゲーションをカレント表示したいってことはよくありますよね。 そんなときに手っ取り早いのはcss spriteとかでやっちゃう方法がありますが、ロールオーバをjsでやっているときなどは、そのためだけにコーディングかえるの面倒くさいしメンテナンス性もあがるのかさがるのかわからないってなります。 そこでカレント表示もjsでやっちゃおうよっていうニッチなところに入り込む方法のご紹介です bodyのidとlistのidを比べて同じだったら”_on”にきりかえるってことだけ ほんとそれだけ html <body id="navi01"> <ul id="gNavi"> <li id="li-navi01"><a href="#"><img src="../images/01_d.gif" /></a></li> <li id="li-navi02"><a href="#"><im
30 Excellent CSS Based Navigation and Buttons Tutorial
CSS is the most important part in modern standard based web design. Using CSS you can turn any web related nested stuff into a working design. There has been a lot of talk about CSS Work lately. Mostly designer creates the design templates, Photoshop Images or whatever and then developers have their turn to show their creativity. Sometimes, it happens that they mess up something or many things. Am
CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font. Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the backgrou
先日の５月２３日土曜日、「第2回XHTML&CSSコーディング勉強会」を行いました。今回は２回目で、前回とは違って、参加型の内容で行いました。各自ＰＣを持ってきてもらっての実践でのコーディング。時間内にコーディングするというのはやはり無理なことでしたが、様々な意見交換もすることができて、有意義な勉強会にすることができたと思います。 もちろん反省点も多いのですが、無事に終えることができて何よりです。参加していただいた皆さん、ありがとうございました。 ※参考例を追記しました 今回は総勢22名の参加 今回は定員29名のところ、22名の参加がありました。ＰＣを持っていなくても見学ありとしてうけたのですが、やはり実践形式ではPCがないというのは難しい状況でしたね。見学だった皆さん、申し訳ございません。もっと、PCがなくても何かできるような課題を準備しておけばよかったと反省するばかりです。 とりあえず
アローハ、日曜日に一日の大半をサイトデザインの変更に費やした上に、そのデータを一度消失してハゲそうになったでろりんです。 ってわけで、Web論のデザインなどを変更しました。アクセスすれば一発でわかると思いますが、今回の変更について完全に自己満足でちょっと経緯を語ろうと思います。 きっかけは読者の意見 きっかけはちょっとした記事を読んだ読者がTwitterで意見をしているのをたまたま見かけたからです。 その際に「この人は男なのになんで女性口調で記事を書いているの？」的に言われていることに気付きました。 Web論では記事タイトル直下と、記事下にライター名を明記しているんですが、記事タイトル直下は誰も見ておらず、記事の下もやっぱり誰も見ておらず…笑 これについて「ちゃんと明記してあるんだけど…」的にTwitterで愚痴ったらJリーグ公式サイトにも寄稿してたり、「J論」編集長でもある川端暁彦大先生
Backbone.jsとSocket.IOを使ってリアルタイム翻訳サービスのデモを作ってみた - toshipon@sketch.book/blog
Source code：https://github.com/toshipon/backbonejs_socketio_demo Demo：http://translation.herokuapp.com/ 普段自分が使っているクライアントサイドのフレームワークやライブラリを整理しつつ、Socket.IOでリアルタイム通信を試したかったので作ってみました。placer(依頼者)とtranslator(翻訳者)のページがあって、依頼者が依頼をpostすると、他の人が依頼をリアルタイムに翻訳できるという仕組みです。データをストレージに保存していないので、複数ウィンドウを開いて試してみてください＞＜ クライアントサイドで使用しているフレームワークとかライブラリとか grunt.js CoffeeScriptとCompassをwatchタスクでリアルタイムに監視して変更があるとビルド、 rel
CSS Sprite Maker is a freeware Windows application that combines different images into a single image for use in modern web design and generates relevant CSS. Using CSS Sprite Maker is very simple. Just select the different icon images you want to join, tweak the options as per your need and hit the Generate button. It will make a single transparent PNG from the icons and generate necessary CSS an
Even Faster Web Sites is a follow-up to my first book, High Performance Web Sites. Both books describe best practices for making web pages faster. If you're just starting off, read High Performance Web Sites first. It contains best practices that target gzip compression, caching, using a CDN, and more. Check out the full set of rules and examples on the HPWS companion site. I wrote this follow-up
CSS Sprites have been around for a while, and keep coming up as a way to get blazing fast speed to your site. Steve Souders just showed off SpriteMe! at Velocity '09 (speaking of — why use the CSS Sprite Generator or other server-based tools when you can use <canvas> and toDataURL and generate sprites on the fly?). However, there are a number of misconceptions about CSS Sprites, the main one bei
How to Make a CSS Sprite Powered Menu | Build Internet! CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル。 CSSスプライトによって実装された次のようなクールなメニューを作成するチュートリアルと、成果物のアーカイブがダウンロードできます。 メニューは綺麗な ul のリストで作れるのでマークアップ的にも安心です。 <ul> <li>・・・</li> <li>・・・</li> <li>・・・</li> </ul> コードがシンプルに掲載されていてわかりやすいものになってますので入門にもよさそう。 関連エントリ サイト高速化のためのCSSスプライトをブラウザ上で簡単作成できる「Sprite Creator」 CSSスプライト作成補助ツール「CSS Sprit.es」
HTML5 Conference 2013:今どきのGruntを使ったフロントエンド開発（HTML/CSS編）
modern-development-workflow-with-grunt.md 今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 @t32k Why use Grunt? Grunt: The JavaScript Task Runner GUI Apps CodeKit — THE Mac App For Web Develo
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.CSS sprites also are a way to reduce the number of HTTP requests made for image resources referenced by your site so it will increase page loading speed.This post l
暫定オレオレgulpfile
弊社内でgulp派が増えてきたので、そろそろ重い腰をあげてgulpfileを書いた。 spriteは、西畑さんの記事を参考にしている。 cultを使用しているため、あらかじめグローバルにインストールしておく必要がある。 sudo npm i -g gulp cultpackage.json { "name": "demo", "version": "1.0.0", "description": "demo", "author": "tomoki kubo", "dependencies": {}, "devDependencies": { "gulp-load-plugins": "^0.5.1", "gulp": "^3.6.2", "gulp-autoprefixer": "0.0.7", "coffee-script": "^1.7.1", "gulp-stylus": "^1.0.
CSS Sprite Generator
Optimize your website using CSS Sprites! Generate CSS Sprites to speed up your website by reducing HTTP requests. About By RoBorg What is a CSS Sprite? A CSS Sprite is a load of images lumped together into a single image file. They're used as a technique to make your websites load faster, by decreasing the number of HTTP requests your users have to make. Each request will contain the overhead of H
CSS is always the easiest method to improve websites design and functionality. Moreover, The next version of CSS (CSS3) will revolutionize the way website works. Except Internet Explorer most of the modern browser supports CSS3 features. Here we present to you 20 recent CSS & CSS3 tools and resources you need to be aware of as a web designer/developer. You can check here what CSS3 features Intern
一番簡単なCSS Spriteのやり方 【CSSスプライト】投稿 : 2011-09-17更新 : 2015-08-28 表示の高速化の手法としてCSS Spriteというものがあります。 今回、これを使ってみたのですがいろいろつまずいたので一番簡単なやり方をまとめてみました。 CSS Spriteが使える場所 背景とイメージタグに使えます。ただし、背景でリピート指定などをしている場合は使えません。 CSS Sprite用の画像を作成する 「CSS Sprite Generator | Project Fondue」を使うと簡単です。 まとめたい画像をZIP圧縮して１ファイルにしてこのサイトにアップロードすると１つの画像にまとめてくれます。 ファイル名を仮にsample_pac0.pngとして説明をつづけます。 背景にCSS Spriteを適用する方法 適用前 <style> cite{
三度の飯よりコーディングが好きと言って入社させてもらった マークアップエンジニアのココエです。 四度目は飯の方がいいです。 さて、自分の所属事業部がソーシャルアプリ事業部なので、 ソーシャルゲームのコーディングばっかりやっています。 最近は、どんどんスマートフォンが普及してきて、 ソーシャルゲームもスマートフォンのコーディングが多くなってきました。 なので、 「スマホ版ソーシャルゲームコーディングのポイント！」 について書いてみようと思います。 ・・・といっても、ポイントがいっぱいあるので、 今回は大事なポイント2点のみでｗ 容量に気を付けて、表示スピードを重視する ページの内容は、可変することが前提！ 容量に気を付けて、表示スピードを重視する まんまですが、ユーザーは動きが遅かったり重かったりを嫌うので、ここは一番気を付けたいところです。 容量を軽くする、見直しポイントとしては PNG2
ちょっと便利かもと思ったのでご紹介。 CSSスプライト用の画像作成って以外と手間がかかりますよね。 本日紹介する「SpriteMe」というサイトはブックマークレットからCSSスプライト用の画像とCSSを書き出してくれるWEBサービスです。 詳しくは以下 ブックマークレットから実行可能 以下のブックマークレットを使用する事で、好きなサイトでCSSスプライト用の画像を作成する事が可能になっています。 SpriteMeブックマークレット ブックマークを実行すると、画面に使用している画像の一覧が表示されます。 試しに当サイトで実行してみた所です。 make spriteボタンをクリックすると、ファイルのリンク先が書き換えられるのでダウンロードして使用する事ができます。 ちなみにですが、 CSSスプライトとは複数の画像を一枚の画像にする事で読み込みリクエスト数を少なくし、 サイトの表示を高速化するテ
※サイズは一般的なものを目安にしています。 デバイス単位でのスタイルシート設定 CSS3で設定可能になった、MediaQueriesを使ってスタイルシートの読み込みを設定していきます。閲覧デバイスの横幅、解像度、アスペクト比による指定など様々な方法が設定できますが、「device-width」(閲覧デバイスの横幅)による分岐が一般的のようです。 デザインを考える前に、コーディングについて考えておきます。最初からWordPressテーマに対応したコーディングやSEO対策をしようとすると、metaタグなどがゴチャゴチャしてわかり難くなるので、後から考える事にします。まずは、ベースとなるブロックの配置と、画像などのレイアウトだけを考えて、ベースデザインを作っていきます。 ポイント テーブルタグは出来るだけ使わない ブロックサイズの横幅が変更されても縦に配置できるように、position:’fix
![[CSS3] Responsive WEBデザイン | DiimoWeblog](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4a3c5abdf0d8db64b7b43d0d0e7ed22f36bfe49/height=288;version=1;width=512/http%3A%2F%2Fblog.diimo.net%2Ffiles%2Fasset%2F20%2Fpt.png)
アリエルで一番女性にもてると自称する岩永さんが書いた「JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技」を読みました。 献本してもらったのは去年ですが、ようやく読みました。献本、ありがとうございました。 本書は副題にもあるように全部で150の項目があります。本の値段が2980円なのでひとつ当たり約20円です。お得な本だと思います。 150の項目は全11章で分類されています。以下、章ごとに軽く感想を書きます。 Chapter01 開発を取り巻く環境を改善する Emacsやその他のエディタ(Vimとか)でJavaScript開発をする場合の便利設定など書かれています。他にもいくつか便利ツールの紹介があります。 自分は使っていませんが、IEの各種バージョンの動作チェックができるIETesterは便利そうです。 Chapter02 デバッグ手法を改善する Firebugなど
Nate Koechley「Professional Frontend Engineering」 - クライアント・サイド・スクリプティング with Web Standards このブログはいつもおもしろいことが書いてあって好きなのですが、今日の記事にこんなのがありました。 CSS Sprite 画像の敷き詰めは水平方向にする。 上下方向よりもサイズが節約できる、ことが多い Talker は Yahoo! のフロントエンド・エンジニア Nate Koechley だそうです。 アレ? と思ったので元スライドも見てみました。 これは大嘘だろと。 yahoo.com といったら、この有様です。(リンクは元画像) ←同じ画像なのに URL が違う→ ←この余白は無駄だろ→ 今見たところ、http://www.yahoo.com には画像が22枚あり、sprite 用の画像は6、7枚でした。 横
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 12] .htaccessファイルをGUIで簡単に作成する 文＝東 孝之（（株）ゼネラル・プレス） Tool .htaccess Editor URL http://www.htaccesseditor.com/ Web制作を行ううえでなにかと「.htaccess」をつくる場合が多いわけだが、毎日使うわけではないので書き方を忘れてしまいがちになる。それをオンラインで簡単に解決してくれるのが「.htaccess Editor」だ。ファイル一覧の拒否やベーシック認証、エラーページの表示、WWWあり・なしの統一、リダイレクトなどを設定する.htaccessファイルだが、.htaccess Editorを使えば、フォームに設定項目を入力するだけで簡単に.ht
普段は画像置換+CSS Spriteでロールオーバーをやっつけています。リクエストが少ないし、CSSだけなので、高速です。 でも、画像の差し替えなどは若干手間なのでメンテナンス性などを考えたときはJavascriptで実装した方が良い場合もあったり。 ただ、javascriptで普通にsrcを書き換えると、そこから画像のダウンロードが始まるので、マウスオーバーとのタイムラグが発生したりで、どうも頂けない。 そんなわけで、jQueryでプリロード付のロールオーバーを実装するスクリプトを書いてみました。 [js] jQuery(function(){ var supfix = "_on"; $("img.rollover").hover( function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,
blog.makitasako.com - CSS Sprite を自動で生成する Sprite Factory が便利
ずっと CSSスプライト画像を自動生成してくれるツールを探していたんだけど、遂に理想的なツールを発見したので紹介。Webサービスでよくあるのは容量の制限があったり秘密保持の観点で問題があって、Compass にそういう機能はあるけど個人的に好きではなかったりと、なかなかボクに合うツールが見つからなかったのです。 Grunt でできるんではないかな？と思ってプラグインを探したが、一番良さげなコレは開発が止まってしまっており… grunt-imagine 更新されているっぽいコレもなんだか動かず… grunt-spritesheet これに至っては Sprite Smith なるものが一体何なのか理解することができず… grunt-spritesmith やっぱり Photoshop でハンドメイドで作るしかないのか…と思ってたところこういう記事を発見した。 ウェブデザイナのためのRu
The CSS sprite generator takes a number of source images and combines them into a single "sprite" image and supplies CSS to map to each image within the sprite. The technique this tool employs is often used to improve the performance of a web site by reducing the number of HTTP requests that the client's browser needs to make.
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 08] 肥大したCSSファイルを圧縮する 文＝小山勝正（Chameleon Graphics） Tool CSS Compressor URL http://www.csscompressor.com/ CSSをつい乱雑に記述してしまったり、運営フェイズに入って追記を重ねて重複分が多くなってしまった場合に、CSSファイルを圧縮してくれるオンラインWebサービスが「CSS Compressor」だ。Webサイト内の「CSS Input」欄にCSSをコピー&ペーストして、「Compress」ボタンを押すことで圧縮が開始される。圧縮方法には多くのオプションがあり、colorやfont-weightに適用するか、不必要なバックスラッシュやセミコロンを消去する
Helpful JavaScript & jQuery Tools, Libraries & Plugins — Smashing Magazine
A carefully selected round-up of useful CSS techniques and tools. Collected, analyzed and curated resources for you to use them right away or save them for future reference! Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely he
CSSやWEBデザインなど、WEBの世界に関するものが中心です。最近はプログラミング寄りですが。jQueryとか、PHPだとCakePHP使ったりします。Flashは紹介するだけ。たまに大学生活やビジネスについても。 今、大学のほうで先輩が作ったシステムをつくり直そうとしています。 簡単なメッセージ機能とフォームを使った申請・管理機能を持ったものなのですが、CakePHPを使って作りたいと考えてます。 せっかくなのでよりリッチなものにしたいと思ってるんですが、備忘録的に使いたいと思ってるjQueryとCakePHPのプラグインなどをまとめてみます。 長くなってしまうのでjQuery編とCakePHP編に分けたいと思います。 まずはjQuery編からどうぞ。 フォーム関連のものが多めで、あとは定番のチップとかクリアボックスとかです。 Uniform – Sexy forms with
Spritesheets, Grunt, and You
A relevant ad will be displayed here soon. These ads help pay for my hosting. Please consider disabling your ad blocker on Pony Foo. These ads help pay for my hosting. If you are using Grunt, you really have no excuse not to be using CSS spritesheets. If you aren’t using Grunt yet, then you should know that a well thought-out workflow with Grunt will allow you to seamlessly integrate icons togethe
67 jQuery CSS3 Animation Examples Like Flash Animation - freshDesignweb
Looking best animated examples script? We have collection best jquery css3 animation examples & coding, it is useful example to learn animated and created using CSS3 jQuery. Animated example using CSS3 key frames, jquery, JavaScript function and animation properties. You can check out the code below to see how each examples is animated. Timing is the most important part here as each of the animati
Webサイトを高速化するときに、私たちエンジニアは サーバとかデータベースとかバックエンド側のことを考えがちですが、 じつはフロントエンドの方を改善するほうが低コスト＆高パフォーマンスであることと、 その方法がまとめられた本でした。 フロントエンドの方がすきな私にとっては嬉しいハナシ！（ｐゞεσｑ） ほんとにそんなに早くなるの？って人は、このグラフを見てみてください。 一昔前のYahoo!ページへアクセスしたときに、 HTMLファイルやその他のファイルをDLするのにかかっていた時間だそうです。 縦に並んでいるのは、そのWebサイト内に埋め込まれたファイル。 横はそれぞれのファイルを取得し始めてから取得完了するまでの時間の長さです。 一度に取得できるファイルには制限があるので、順々に取得されていっています。 ＜参考＞ Pingdom Tools（私はこういう計測にこれ使っています） htt
色々と構成やら使ってるプラグインやらを変えたので一応メモ。今回のリニューアルでは実験要素を多く含んでいるので全てのブラウザーをサポートできていません(HTML,CSS的な意味で)。 2.8.1 ちょうどいい機会なので2.7.1から2.8.1にアップグレード、というかインストールし直しました。と思ったら2.8.2が… 使ったWordPressプラグイン をリストで挙げようと思ったんですけれど、CMSとしてのWordPressでサイト構築をするときに便利な13のプラグインで紹介したものとほぼ被りなのでやめます。 ただCustom Field GUI Utility 2.0.0は本当に便利なのでみなさん使ったほうがいいです。使うべきです。今回は一番ベタな使い方でアレですが、keywordsとdescriptionとして記事ページのmetaに出力させてます。All in One SEO Packが
All the jQuery resources you’ll ever need | Hein Maas - Freelance Graphic/Web Designer
Hi, today i will show a monster collection of jQuery resources you’ll ever need to create that amazing site for one of your clients or for one of your personal projects. First I’ll explain you a little bit about jQuery. jQuery is a lightweight JavaScript library that interacts between JavaScript and HTML. John Resig released it on January 2006 at BarCamp NYC. On September 28th 2008 John Resig wrot
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページの高速化とその方法について | CSS Radar | For Frond End Developers
Coding a Clean Web 2.0 Style Web Design from Photoshop
A Gulp-Based External SVG Symbol Sprite Icon System - ✨ Hi! I'm Una! ✨
» ナビの画像をbodyのidでカレント表示するニッチな方法 | ENTACL TECH LAB.
Transparent CSS Sprites — Smashing Magazine
札幌での第2回XHTML&CSSコーディング勉強会を終えて
ブログデザインとか名前とかマイナーチェンジしました…読者の意見って大事だよねって話 | 結婚生活ブログ Web論
CSS Sprite Maker
css spriteを簡単に作れるPhotoshopスクリプト「Psprite」を作成・公開しました。
Even Faster Web Sites by Steve Souders
To Sprite Or Not To Sprite at Vladimir Vukićević
)
CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル:phpspot開発日誌
10 Must See CSS Sprites Tutorials
20 Must Know Recent CSS & CSS3 Resources and Tools
一番簡単なCSS Spriteのやり方 【CSSスプライト】 | 某氏の猫空
スマホ版ソーシャルゲームコーディングのポイント | SONICMOOV LAB
CSSスプライト用の画像とCSSを自動で作成してくれるWEBサービス | Web活メモ帳
[CSS3] Responsive WEBデザイン | DiimoWeblog
「JavaScriptテクニックバイブル」を読みました « inoue_se
今日の大嘘 - by edvakf in hatena
プリロード付のロールオーバーを実装するjQuery - Toro_Unit
http://buzz.dendrocacalia.com/2009/04/css_sprite.html
CSS Sprite Generator in Launchpad
これから作ろうとしているシステムで使いたいプラグインとかまとめてみる – jQuery編 | Kechol
読んだ！＞ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール - ふじこのプログラミング奮闘記
リニューアルのポイントまとめ(WordPressプラグイン、HTML5など) :: 5509
WEBフォントCONDENSE-iconFontを使ってアイコンボタンを作ってみた
Build Your Own SVG Icons — SitePoint