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

Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

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

csCSSc
Image may be NSFW.
Clik here to view.

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

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

１．圧縮

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

Image may be NSFW.
Clik here to view.

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

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

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

２．整形

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

Image may be NSFW.
Clik here to view.

このようになります。

Image may be NSFW.
Clik here to view.

３．圧縮・整形を組み合わせる

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

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

Image may be NSFW.
Clik here to view.

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

４．他のCSS整形ツール

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

ProCSSor（一番メジャーっぽい）
Image may be NSFW.
Clik here to view.

Code Beautifier
Image may be NSFW.
Clik here to view.

CSS Compressor（Advanced modeのリンク先に機能拡張版あり）
Image may be NSFW.
Clik here to view.

styleneat
Image may be NSFW.
Clik here to view.

Clean CSS
Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.