[technique 08]肥大したCSSファイルを圧縮する | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

作業効率がアップする隠れた使い方教えます!

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に適用するか、不必要なバックスラッシュやセミコロンを消去するかなど、細かく指定もできる。


CSS Compressorのトップページ
CSS Compressorのトップページ

CSSをサイト内にペーストして「Compress」をクリックすると圧縮が始まる
CSSをサイト内にペーストして「Compress」をクリックすると圧縮が始まる

メッセージには圧縮内容が、その下に圧縮後のCSSと、圧縮率やサイズが表示される
メッセージには圧縮内容が、その下に圧縮後のCSSと、圧縮率やサイズが表示される


[INDEX]

>>> [technique 07]CSS Spriteを手軽に作成する
>>> [technique 08]肥大したCSSファイルを圧縮する
>>> [technique 09]フォントサイズの比率をemや%を一覧で表示する
>>> [technique 10]CSS、JavaScriptを簡単に圧縮する
>>> [technique 11]フォントをオンラインで視覚的にテスト比較する
>>> [technique 12].htaccessファイルをGUIで簡単に作成する
>>> [technique 13]JavaScriptを難読化しファイル容量を抑える

COVER101

本記事は『web creators』2010 vol.101からの転載です。本特集全記事は誌面で読むことができます。
月刊『web creators』掲載記事号の情報はこちら!
>>>
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在