このツールに問題がありますか？

「CSS整形 オンライン」について

このツールはミニファイ済み／乱雑な CSS を読みやすい形式に整形します。各宣言を 1 行に、波括弧やコロン周りの空白を統一、プロパティ並び替え（任意）、コメントや空白の標準化を行います。

同僚やベンダーが書いたミニファイ CSS の読解、コードレビュー前の整形、リポジトリへのコミット前のスタイル統一などに便利。

ネストされたセレクタ、メディアクエリ、keyframes、カスタムプロパティ、CSS layers などの新機能にも対応。アルファベット順ソートは差分追跡向きですが、必ずしも論理的な読み順とは限りません。

このツールの使い方

圧縮された／散らかった CSS を整形する手順

  1. CSS を貼り付け

    「CSS」欄に minify 済みやインデントが乱れた CSS を貼り付け。スタイルシート全体でも断片でも OK。コメント・メディアクエリ・ネストされた at-rule はそのまま通ります。

  2. 「実行」

    結果は `formatted` のみ。1 行 1 宣言、波括弧内は 2 スペースインデント、トップレベルのルール間に空行を 1 つ。セレクタは 1 行のまま — 非常に長いものは折り返しません。

  3. 対応しないこと

    ベンダプレフィクス展開・shorthand→longhand 変換・autoprefix・値の書き換えは行いません。`margin:0 5px` は `margin: 0 5px;` のまま、top/right/bottom/left の 4 つには分けません。

  4. 再 minify のタイミング

    レビュー用に整形し、デプロイ前に css-minifier-online で再圧縮。妥当な CSS なら round-trip 可。不正な入力はベストエフォートで処理され、後段で同じに解釈できない場合があります。

似たツール