100% ローカル — データがブラウザの外に出ることはありません

CSSフォーマッタ|圧縮された内容でも読める形に整え直します

圧縮されたCSSや崩れたCSSを字下げし直します。宣言は一行ずつ並び、コメントも残るので、自分が書いていないスタイルシートでも、上から順に追って読んでいけるようになります。

高速 プライベート Cookieゼロ
インデント

CSS 入力

CSS 出力

このツールの動作

圧縮された CSS や絡まった CSS が、読める CSS になります。

a{margin:0 auto;--x:1px}@media print{a{color:#000}}
a {
  margin: 0 auto;
  --x: 1px
}

@media print {
  a {
    color: #000
  }
}

宣言は一行にひとつ、入れ子ひとつにつき字下げひとつ、最上位の規則のあいだには空行。字下げは選べます。既定は空白二つ、四つにもできます。

そのまま残すもの

  • あなたの値。 #FFFFFF は white になりませんし、0px は 0 になりません。margin: 10px 10px 10px 10px もまとめません。こうした書き換えは最適化ツールの仕事で、ひとつひとつがあなたのスタイルシートへの判断です。
  • 並び。 宣言も規則も、書いた順に出てきます。CSS では並びが意味です。詳細度が同じなら、後に来た規則が勝ちます。
  • コメント。 規則の上でも行末でも、書かれた場所に残ります。そのために書かれたものだからです。

検証ツールではない

a { color: red
a {
  color: red

欠けた括弧は欠けたまま返ります。整形ツールは渡されたものを読んで並べるだけで、ブラウザーが受け取るかどうかは告げません。これは両側に切れる話です。構文に誤りのあるスタイルシートでも整えて返すので誤りを見つけやすくなりますし、整った結果は正しさの証明にはなりません。それにはブラウザーの開発者ツールか、Stylelint のような linter を。

反対向き

この場所の CSS 圧縮ツールは、その逆の旅です。ここで足した空白を取り除き、文字列や url() の中身、ライセンスのコメントはそのまま残し、値には同じように手を触れません。読むために整え、配るために縮める。同じスタイルシートの、二つの姿です。

プライバシー

すべての処理はブラウザ内のJavaScriptだけで完結します。データがアップロードされることはないため、機密情報でも安心して利用でき、オフラインでも動作します。

よくある質問

CSS が正しいかどうかを検査しますか。
いいえ。これは整形ツールであって検証ツールではありません。何かが間違っているときこそ、この違いが効いてきます。`a { color: red` は、閉じ括弧が無いまま整形されて返ります。読み取ったものを並べ直すだけで、良し悪しは判断しません。きれいに見える結果は、そのスタイルシートが解析できることの証明ではありません。それはブラウザーの開発者ツールや linter が教えてくれます。
値や色は変えられますか。
一度も変えません。`#FFFFFF` は `#FFFFFF` のまま、`margin: 0px` は単位を保ち、宣言の並びはあなたが書いた並びのままです。整形が触るのは空白と改行だけです。値を書き換える最適化ツールは別の道具で、別の危うさを持っています。
コメントはどうなりますか。
元の場所に残ります。規則の上に書かれたコメントは、その規則の上に居続けます。そこに書かれた理由がまさにそれだからです。消したいのであれば、それは圧縮ツールの仕事で、別の判断です。

関連ツール