🎨

CSS フォーマッター＆ミニファイア

読みやすくするために圧縮CSSを美化したり、本番用にCSSを圧縮したりできます。すべてブラウザ内で実行 · サーバー不要、トラッキングなし。

開発者ツール ローカルで実行 データは送信されません
CSS整形 CSS 圧縮 フォーマッター クライアントサイドのみ
インデント幅：
CSS 入力
0文字
→
整形済み CSS
0文字 処理に失敗しました
💡
整形 圧縮または最小化された CSS を、適切なインデントと改行を備えた読みやすいコードに整形します — デバッグやサードパーティ製スタイルシートの読解に最適です。 圧縮 コメントと空白を除去して、本番環境へのデプロイ用にファイルサイズを削減します。どちらのモードもプロパティ値は変更しません。

CSS Formatter & Minifierとは何ですか？

CSS Formatter & Minifierは、読みやすいスタイルシートコードと本番向けのコンパクトな出力を切り替えるのに役立ちます。コンパイル済みCSSのデバッグ、セレクターと宣言の確認、出荷前のスタイル再圧縮に便利です。

CSS Formatter & Minifierの使い方

  1. 整形または圧縮するCSSを貼り付けてください。
  2. 整形または圧縮モードを選択し、必要に応じてインデントを調整してください。
  3. 読みやすさやファイルサイズの削減効果を確認してください。
  4. 結果をコピーして、スタイルシートやビルドパイプラインに戻してください。

関連ツール

⚡
CSS 圧縮
コメントと空白を削除してCSSを圧縮
 📝
JSフォーマッター
Prettier形式のフォーマットでJavaScriptコードを整形または圧縮
 🏷️
HTMLフォーマッター
カスタマイズ可能なインデントでHTMLを整形または圧縮
CSS Formatter & Minifierを理解する ▾
例
入力 .card{display:flex;padding:16px;background:#fff;border-radius:8px}
出力 .card { display: flex; padding: 16px; background: #fff; border-radius: 8px; }
一般的な使用例
  • レイアウト問題のデバッグ前に、圧縮されたスタイルシートを整形します
  • デザインツールやビルド出力で生成された CSS を確認
  • 本番デプロイ用に、編集後に CSS を再度圧縮
  • コードレビュー中にセレクターと宣言をより明確に確認
このツールを使う理由
  • 大規模または圧縮されたスタイルシートのデバッグに役立ちます。
  • 読みやすい CSS 出力とコンパクトな CSS 出力をすばやく切り替えられます。
  • ローカルで実行されるため、ソーススタイルがブラウザから外部に出ることはありません。
よくある質問
フォーマットすると CSS の動作は変わりますか？

No. Adding whitespace and line breaks to CSS has no effect on how browsers parse and apply the styles. The formatted output is functionally identical to the original.

ベンダープレフィックスを含む CSS をフォーマットできますか？

はい。-webkit-transform や -moz-appearance などのベンダープレフィックス付きプロパティは標準プロパティとして扱われ、通常どおりフォーマットされます。

SCSS や Less の構文に対応していますか？

フォーマッターは標準 CSS に最適化されています。ネストや変数など SCSS/Less 固有の構文は正しくフォーマットされない場合があります。これらのファイルには専用の SCSS/Less フォーマッターを使用してください。

本番環境で使用する前に CSS をフォーマットすべきですか？

いいえ。本番環境ではファイルサイズを削減するために CSS を圧縮する必要があります。開発やコードレビュー中は CSS フォーマッターを使用し、デプロイ前に圧縮してください。