使い方
まず基本操作を試す
- 左の入力欄に CSS を貼り付けます（元のソースはそのまま残ります）。
- Minify と Beautify を切り替えると、結果とバイト集計が同時に更新されます。
- サマリー欄を確認してから、変換後の出力をコピーします。
CSS 圧縮 / 整形ツール
CSS をきれいに圧縮したり、読みやすく整形し直したり。サイズの差もその場で確認できます。
入力
Stylesheet source
元の CSS を左に貼り付けると、右側に結果がすぐ表示されます。
CSS を貼り付けると整形を開始します。
結果
Proof sheet
Minify / Beautify を切り替えると、サイズの集計も一緒に更新されます。
Compression ledger
元のサイズ
0 B
結果
0 B
差分
0%
内容が入力されると集計を表示します。
セレクタ
0
ブロック
0
コメント
0
スタイルシート待ち
ここに整形状態・疑わしい構造・最適化のヒントを表示します。
使い方
Minify は、デプロイ用のスニペットやドキュメント、テストデータに貼り付ける前に、コメントや余分な空白を取り除きたいときに向いています。Beautify は、圧縮された CSS を読みやすい作業用に開き直したいときに使います。
これはフロントエンドのローカル整形ツールであり、完全な CSS コンパイラではありません。Sass や Less、autoprefixing には対応せず、あらゆる特殊な構文を網羅するわけでもありません。
集計には元のサイズ・結果のサイズ・差分の割合が表示されます。サマリー行ではセレクタ・ブロック・コメントの数をすばやく確認でき、変換がブラックボックスにならないようにしています。
クイックガイド
使い方、よくある質問、関連ツール
初めてのユーザーもリピーターも、メインUIを変えずに素早く使えるコンパクトなガイド。
Chinese search: CSS 壓縮器、CSS 美化器、CSS 格式化、CSS 壓縮 線上
English search: css minifier、css beautifier、css formatter、minify css online、beautify css online
活用例
このツールが役立つ場面
- デプロイ前にスタイルシートを圧縮ランディングページやコンポーネントの CSS を軽くし、バイト削減量を確認してから本番用スニペットにコピーします。
- 詰まった CSS をレビュー用に開き直す圧縮された、または乱れた CSS を整形して、セレクタ・ブロック・空白を再び読みやすくします。
よくある質問
よく聞かれること
入力した CSS はどこかにアップロードされますか？
いいえ。整形はブラウザ内でローカルに実行されます。
Beautify するとファイルが大きくなるのはなぜですか？
Beautify は読みやすさのために改行とインデントを追加するため、集計上は削減ではなく増加として表示されることがあります。
Sass・SCSS・autoprefixer に対応していますか？
いいえ。このバージョンは通常の CSS の整理と整形に絞っており、プリプロセッサやビルドパイプラインの変換は行いません。