このツールは、波かっこやセミコロンだけで機械的に分割せず、構文を認識するスキャナーでCSSを読み取ります。文字列、コメント、関数、属性セレクター、入れ子のブロックを追跡するため、URLや引用符付きの値に含まれる記号は書き換わりません。
CSS整形オンラインツール
すべてブラウザー内で動作します。アップロードも登録も不要です。
入力CSS
整形済みCSS
CSSを貼り付けて整形
CSSをオンラインで整形するには？
CSS整形ツールは、圧縮されたスタイルシートや空白が不ぞろいなコードを、一定のインデントと改行を使った読みやすい形に直します。CSSを貼り付け、2スペース、4スペース、タブのいずれかを選ぶだけです。結果はコピーまたはダウンロードでき、コメント、引用符付きの値、データURL、宣言の順序も保たれます。処理はすべてブラウザ内で完了します。
使い方
- 1CSSを貼り付ける. スタイルシート、セレクターのブロック、または圧縮されたCSSの一部を入力欄に追加します。
- 2インデントを選ぶ. 2スペース、4スペース、タブから選びます。入力中に整形結果が更新されます。
- 3状態を確認する. 構造の件数を確認し、対応しない区切り記号、閉じていないコメント、文字列が表示された場合は修正します。
- 4コピーまたは保存する. 整形済みCSSをクリップボードへコピーするか、formatted.cssとして保存します。
こんな方に
- フロントエンド開発者が、本番用の圧縮CSSを展開して確認やデバッグをしやすくするとき。
- コードレビュー担当者が、コピーしたスタイルシートやプルリクエストの一部を比較する前にインデントをそろえるとき。
- 学習者が、入れ子になったメディアクエリ、セレクター、宣言ブロックの関係を読み解くとき。
- サポートやQAチームが、開発者ツールからコピーしたCSSをチケットや再現手順に載せる前に整えるとき。
よくある質問
CSS整形ツールは無料ですか？
はい。ブラウザで無理なく処理できる範囲なら、CSSの量に固定の制限はありません。アカウント登録やインストールは不要で、利用回数の上限もなく、結果はすぐに表示されます。
CSSはサーバーに送信されますか？
いいえ。整形処理はブラウザ内で実行されます。貼り付けたCSSはページのエディター内に残り、APIへ送信されないため、非公開プロジェクトのスタイルにも利用できます。
どのくらいの量のCSSを整形できますか？
文字数の固定上限はありません。非常に大きな自動生成スタイルシートでは端末のメモリや性能に左右されますが、通常のWebサイト、コンポーネント、メール用CSSならすぐに整形できます。
整形するとCSSの動作は変わりますか？
変更するのは空白と改行です。セレクター、宣言、コメント、引用符付き文字列、その並び順は維持されます。ただし、試験的な構文や空白に依存する特殊なエスケープを使う場合は、公開前に結果を確認してください。
CSSプロパティの正しさも検証できますか？
いいえ。波かっこ、角かっこ、丸かっこ、コメント、文字列が正しく閉じているかを確認するツールです。各プロパティや値、ブラウザ固有機能の妥当性は、標準仕様に対応したCSSバリデーターで確認してください。
メディアクエリや入れ子のCSSも整形できますか？
はい。@media、@supports、@container、@layer、@keyframes内のブロックは深さに応じてインデントされます。新しい入れ子セレクターも、文字列や関数の引数を変えずに整形できます。