CSSのコード整形ツール

公開日: 2015/08/28 | 更新日: 2017/05/29

Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。

変換

「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。

入力したコードをこのページ上で確認してしまいたい場合は、このビューアをご利用下さい。

整形の細かい設定を指定できます。設定は、ローカル環境(あなたの端末)に保存されます。

インデント文字と、その個数です。

セレクタ間(例: .a,.bの間)に改行を挿入します。

ルール間(例: .a{...}.b{...}の間)を1行空けます。

記号周り(例: .a+.bにおける+の周り)に、スペースを入れます。

既存の改行を削除しません。

左側(スマホの場合は上)のフォームに、整形したいHTMLのコードを入力して、「整形をする」のボタンをクリックすると、右側(スマホでは下)のフォームに整形した結果が表示されます。
整形のアルゴリズムには、js-beautifyを利用させていただきました。

処理はJavaScriptを利用してローカル環境(あなたの端末)で行われます。そのため、入力していただいたコードがサーバーに送信されることはないので、ご安心下さい。