CSSミニファイア & ビューティファイア
CSSを縮小してスタイルシートのサイズを減らすか、読みやすい、インデント付きのコードに整形できます。文字列、url()の値、/*! bangコメントは保持され、calc()内のスペースは決して破損しません。
入力
設定
/*! … */ bangコメントは常に保持されます。
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-minifier-beautifier \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"css": "body {\n color: red;\n}\n\n@media screen and (min-w…",
"mode": "minify",
"indent": "2",
"keepComments": ""
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-minifier-beautifier` tool (CSS Minifier & Beautifier) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-minifier-beautifier/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSミニファイア & ビューティファイア — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
スタイルシートを貼り付けて、最小の安全なサイズに圧縮するか、読みやすくインデント付きのコードに戻して取得します。同じツールが両方向で機能するため、本番環境用のスタイルシートを縮小し、読む必要があるベンダーファイルを展開できます。ページを離れることなく。
使い方
- CSSを入力ボックスに貼り付けるか、
.cssファイルをアップロードします。 - フォーマットを選択します：
- ミニファイ — すべて最小限のバイトで。
- ミニファイ、ただし改行を保持 — 縮小された宣言、1行につき1つのルール。出力を比較したり、それに対してスタックトレースを読みたい場合に便利です。
- ビューティファイ — スタイルシートを再度インデントして展開します。2スペース、4スペース、またはタブを選択します。
- 結果をコピーするか、
.cssファイルとしてダウンロードします。
入力すると出力がリアルタイムで更新されます。何も送信されません。下記のプライバシーノートを参照してください。
最小化が実際に削除するもの
コメントとCSS文法が必要とする可能性のあるすべての空白シーケンス。宣言はcolor:redになり、}の前の最後の;が削除され、!importantは先頭のスペースを失い、セレクターの組み合わせが厳しくなります（a > b + iがa>b+iになります）。
ツールが意図的に手を付けないことは同じくらい重要です：
- 文字列はバイト単位で同じままです。
content: "/* not a comment */"は文字列であり、コメントではなく、そのまま出力されます。 url()値は不透明です —;と,で詰められた引用符なしのdata:URIを含めて、素朴な正規表現ミニファイアが半分に切り裂くでしょう。calc()はスペースを保ちます。calc(100% - 10px)は有効です。calc(100%-10px)は構文エラーです。値内の+と-の周りのスペースは重要で、保持されます。- 子孫コンビネーターは存続します。
p :first-child（p内のすべての最初の子）はp:first-child（最初の子であるp）と同じセレクターではありません。その間のスペースが保持されます。 /*! … */bangコメントは保持されます。これはライセンスヘッダーを慣例的にマークする方法です。
クラスの名前を変更したり、プロパティを書き直しますか？
いいえ。これは空白とコメントのミニファイアであり、オプティマイザーではありません。重複するルールをマージしたり、空のものを削除したり、#ffffffを#fffに短縮したり、何かを並べ替えたりすることはありません。出力は常に入力とまったく同じ動作をするスタイルシートです。出力を小さくすることは、CSSが何をするかを黙って変える価値がありません。
CSSはどのくらい小さくなりますか？
手書きのCSSでは通常20～35％です。主にインデントとコメントから。既に縮小されたCSSはほぼ動きません。gzipまたはbrotli圧縮で結果を提供すると、縮小より遥かに多くが得られるため、両方を実行してください。
スタイルシートを展開できますか？
はい — それがビューティファイの目的です。縮小されたCSSを貼り付け、インデントを選択すると、読みやすいスタイルシートが戻ります。元の最小化から生き残ったコメントは保持され、独自の行に配置されます。
空のルールはなぜ残っていますか？
ルールを削除することは構造的な変更であり、ツールは空白とコメントのみを処理するためです。.unused {}は無害です。削除したい場合は、ソースで削除してください。
CSSはどこにアップロードされますか？
いいえ。ミニファイアはブラウザで完全に実行されます。スタイルシートはサーバーに送信されず、記録されず、保存されません。ファイルをアップロードするとページ内でローカルに読み込まれます。ネットワークを切断することができ、ツールは引き続き機能します。