CSSの整形・圧縮が一瞬で行えるツール「csCSSc」

CSSの整形・圧縮が一瞬で行えるツール「csCSSc」

Posted at February 21,2012 12:55 AM
Tag:[Compress, CSS, Decompress]

CSSの整形・圧縮が一瞬で行えるオンラインツール「csCSSc(Client-side CSS (De)Compressor)」を紹介します。圧縮(難読化)解除も行えます。

csCSSc

オンラインでCSSの整形・圧縮が行えるツールは色々出回ってます(4項参照)が、csCSScは動作が圧倒的に軽いです。

使い方をざっと説明します。

1.圧縮

ページ一番上にある「Original valid CSS-code」のテキストエリアにオリジナルのCSSをペーストして「Compress」をクリックすれば、一瞬で圧縮されます。

オプションの意味は次のとおりです。

  • include comments:コメントを含む
  • single line:1行化する
  • sort styles:アルファベット順にソートする

何もチェックしない場合は次のようにセレクタごとに改行して圧縮します。

「single line」をチェックして圧縮すれば、1行にまとめられます。

「sort styles」をチェックして圧縮すれば、セレクタの表示順序が整理できます。

2.整形

「Compressed CSS-code」に整形前のCSSをペーストして「Decompress」をクリックすれば整形されます。

このようになります。

3.圧縮・整形を組み合わせる

圧縮・整形の動作を組み合わせることで、元のCSSをアルファベット順に並べ替えるといったこともできます。

元のCSSを「Original valid CSS-code」にペーストし「sort styles」をチェックして実行します。

圧縮されたCSSに対して「Decompress」をクリックします。

これでアルファベット順に整形されました。

「Compressed CSS-code」にある程度整形されたCSSやコメントつきのCSSをペーストして「Decompress」を実行しても期待する結果にならないようなので、ご注意ください。

4.他のCSS整形ツール

調べたオンラインツールのリンクを掲載しておきます。csCSScでは機能が足りないという方は以下のツールをどうぞ。

ProCSSor(一番メジャーっぽい)

Code Beautifier


CSS Compressor
(Advanced modeのリンク先に機能拡張版あり)

styleneat

Clean CSS

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)