CSS圧縮&整形(Minify & Beautify)ツール

整っていないCSSを読みやすく整形したいときや、仕上げ前にCSSを圧縮したいときに使えるツールです。自分で書いたCSSの見直しはもちろん、他ツールで出力したCSSの整理にも向いています。

HTMLから抽出したCSSや、作業途中で増えたスタイルを見やすく整えたい場合にも便利です。

📝 入力CSS
📄 処理結果

圧縮前後・整形前後を見比べながら、公開用と編集用で使い分けられます。

💡 このツールの特長と使い方

当ツールは、Web制作の実務に特化したCSS圧縮(Minify)および整形(Beautify)ツールです。サーバーにデータを送信しないブラウザ完結型(完全ローカル処理)のため、機密性の高いクライアント案件のコードも情報漏洩の心配なく安全に処理できます。

  • 圧縮(Minify): 改行やスペース、不要なコメントを削除し、ファイルサイズを最小化します。サイトの表示速度(パフォーマンス)向上に直結します。
  • 整形(Beautify): 1行に圧縮されて解読できないCSSコードに、適切な改行とインデント(スペース2つ)を付与し、人間が読みやすく編集可能な状態に復元します。

🛡️ 「バグらない」ための保護機能

一般的な圧縮ツールを通すとレイアウトが崩れてしまうような、モダンなCSSの記述も安全に処理できるよう独自の保護ロジックを搭載しています。

  • calc()clamp() などの関数内にある演算子(+や-)前後の必須スペースを消失させません。
  • content: "日本語"; などの文字列や、url() 内のファイルパスに含まれる記号を保護します。
  • Sass (SCSS) のネスト記述(&:hover など)も構造を壊さずに整形します。
  • 構文エラー検知(Lint機能): {} の数が合っていない場合、処理前にアラートを表示して記述ミス(カッコの閉じ忘れ等)を事前にお知らせします。

⚠️ ご利用上の注意点・仕様

  • 通常のコメントは削除されます: /* コメント */ のような通常のCSSコメントは、処理をかけると軽量化のためすべて削除されます。
  • ライセンス表記の保護: /*! (エクスクラメーションマーク付き)で始まる重要なライセンスコメントは、「残す」にチェックが入っている場合のみ保護されます。
  • 構文エラーがある場合の挙動: 閉じカッコ } が不足しているなど、元のCSSの文法が大きく破綻している場合、Beautify(整形)時のインデントが正確に反映されないことがあります。黄色い警告アラートが出た場合は、元のコードをご確認ください。

🔗 コーディングの効率をさらに上げる関連ツール