« 色系アクセシビリティ確認ツール | トップページ | VRAM足らない... »

2006/06/14

CSSの最適化ツール

ブックマークに追加する

リンク: Clean CSS - A Resource for Web Designers - Optmize and Format your CSS

CSSの最適化と整形が出来るサイト。
なお、このサイト自体には、CSSの検証を行う機能を持っていないので、最適化対象のCSSは事前に正しく記述されている必要がある。

# CSSの検証が必要な場合は、W3C CSS 検証サービスが使用できる。

最適化したいCSSは直接ページのフォームから入力するか、CSSを配置しているURLを入力し、「Process CSS」をクリックすることにより解析が始まり、最適化または整形が行われる。

試しに、当ブログのCSS「http://freethink.way-nifty.com/action/styles.css」の最適化を行ってみると、

Input: 5.457KB, Output: 4.446KB, Compression Ratio: 18.5%  (-1011 Bytes)

と表示された。
Typepadが生成したCSSを少しだけ修正したレベルであっても、2割近くサイズが減るのはちょっと驚き。

なお、画面上では「Messages」にどのような最適化を行ったのかが表示されるので、ツールを信用出来ない人でも問題無く使用できると思う。



■2006年8月19日追記
このエントリを書いた時には、2割近くサイズが減るのはすごいと思っていたが、もっとサイズを減らすことのできるサイトを見つけた。

リンク:Icey » Projects » CSS Compressor

このリンク先のサイトを使用した場合、半分以下になった。

* Original size: 5.7 kB (5,838 B)
* Final size: 2.42 kB (2,482 B)
* Saved: 3.28 kB (3,356 B)
* Reduction: 57.49%

但し、こちらのサイトの難点として最大限に圧縮されるため、CSS自体のメンテナンスがほとんど無理っていうか、改行も最小限になるため、まず読めない。


●お探し物は見つかりましたか?まだの方は以下の検索をご利用下さい。
 
当ブログ内 (within this blog) Web
●当ブログのRSSフィードをお手持ちのRSSリーダーにご登録いただくと、エントリ追加時のみ更新通知が届くため、確認の手間が省けます。よろしければ、どうぞ。
当ブログのRSSフィード
●当ブログの更新情報+α(deliciousのブックマーク他)はTwitter経由でも確認できます。是非フォローしてください。(実はRSSフィードよりも更新が早かったりします)

|

システム」カテゴリの記事

blog comments powered by Disqus


●Google広告


●その他の広告



トラックバック

この記事のトラックバックURL:

●トラックバックされる方へのご注意
本文中でこのエントリのアドレスを引用してください。引用(言及リンク)がない場合はスパム(迷惑行為)として削除します。
なお、迷惑行為かどうかを人力で判定しているため、トラックバックが反映されるまでに少々、お時間を頂いています。
For foreigners: If you would like to trackback to this entry, please include permlink of this entry in your entry. If your entry doesn't include this permlink, I will delete your trackback as spam.

この記事へのトラックバック一覧です: CSSの最適化ツール:

 
Google