CSSのコード整形ツール

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

変換

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

変換前のコード

変換後のコード

ビューアー

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

設定

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

インデント文字

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

セレクタ間の改行

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

ルール間の改行

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

記号周りのスペース

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

改行を保持

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

ヒント

使い方

左側(スマホの場合は上)のフォームに、整形したいCSSのコードを入力して、「整形をする」のボタンをクリックすると、右側(スマホでは下)のフォームに整形した結果が表示されます。

整形のアルゴリズムには、js-beautifyを利用させていただきました。

プライバシー

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

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketでシェア
  • LINEでシェア
更新履歴
2017/05/29 (月)
コードを整形する際の設定を編集できるようになりました。コードを当サイトのサーバーに送信しなくても、整形できるようになりました。
2015/08/28 (金)
コンテンツを公開しました。