🎨
無料CSS 整形ツール
圧縮された CSS を一貫したインデントで整形、または圧縮します。プロパティをアルファベット順に並べ替えるオプションで、差分も見やすくなります。
読み込み後はオフラインでも動作
ここにファイルをドロップするか、クリックして選択
CSS · デバイス上で処理
または Ctrl+V でクリップボードから貼り付け
整形済み CSS
ここに出力が表示されます…主な用途
- 本番環境のCSSをデバッグする本番サイトからの圧縮されたCSSを読み取り可能な形式で表示して、スタイルを検出して逆エンジニアリングします。
- チームCSSスタイルを強制するチームが送信したCSSを一貫した美化機を通して実行して、diffがフォーマットではなくコンテンツについてであることを確認します。
- ベンダープレフィックス付きCSSをフォーマットするベンダープレフィックス付きCSS (autoprefixer出力) には、多くの-webkit-、-moz-、-ms-バリアントが含まれています。インスペクト用にフォーマットします。
- プロフェッショナルなCSSから学ぶコンパイルされた出力をフォーマットすることで、有名なデザインシステムからCSSを研究します。
- バグレポート用にCSSをフォーマットするCSSバグをファイルする場合、フォーマットされたCSSはレビューアが読んで理解するのが非常に簡単です。
使い方
このツールは、ページに直接組み込まれた手書きの再帰的パーサーを使ってCSSを整形します — サードパーティのライブラリもサーバー呼び出しも不要です。パーサーはCSSを文字ごとに走査し、引用符付き文字列、url()値、ネストしたat-rule、より単純な正規表現ベースの手法を混乱させるようなコメントを正しく処理します。
- 1文字レベルのトークン化walkCss関数は生の入力を一度に1文字ずつスキャンし、引用符の状態と括弧の深さを追跡することで、url()、文字列値、コメント内のセミコロンや波括弧が構造上の区切り文字と誤解されることがないようにします。
- 2ブロックと宣言の分離スキャナーがトップレベルの開き波括弧を見つけると、プレリュード（セレクタまたはat-ruleのキーワード）を抽出し、ブロック本体を再帰的に処理します — それ自体がネストされたルール（@media、@supports、ネイティブCSSネスト）を含む場合、より深い再帰レベルで処理されます。
- 3プロパティのソートとインデント各ブロック内の宣言は一連の並びとして収集され、選択されたインデント幅（2または4スペース）で書き出される前にオプションでプロパティ名によりアルファベット順にソートされます。minifyモードでは空白を完全にスキップし、コメントを取り除きます。
- 4即座のブラウザ内出力結果はuseMemoフックを介して入力するたびに表示されます — どこにも送信されません。整形または最小化されたCSSはクリップボードにコピーするか.cssファイルとしてダウンロードでき、パネルには元との比較でのサイズ差が表示されます。