コンテンツにスキップ
Monu Tools

CSSフォーマッター

CSSを整ったインデントで見やすく整形するか、ファイルサイズ削減のためにミニファイします。メディアクエリ・calc()・ライセンスコメントに対応しています。

CSSフォーマッターの使い方

  1. 01

    入力欄にCSSを貼り付けます。

  2. 02

    「整形」で見やすくするか、「ミニファイ」で圧縮するかを選択します。

  3. 03

    インデント幅を選び、結果をコピーします。

CSS フォーマッタの機能

これは、スタイルシートをきれいで一貫したインデントで美しくしたり、スタイルシートを縮小してファイル サイズを縮小したりする CSS フォーマッタです。美しくするためのインデント サイズを選択し、最小の出力が必要な場合は縮小に切り替えます。

いつ美化し、いつ縮小するのか

読みやすい CSS は、スキャン、レビュー、デバッグが容易です。各ルールと宣言が一貫してインデントされていると、セレクター、ネスト、メディア クエリの形状が一目でわかります。

縮小化は本番用です。ブラウザに不要な空白やコメントが削除されるため、ファイルのダウンロードが速くなります。大きなスタイルシートでは、特にサーバー上で gzip 圧縮する前に、節約がさらに増加します。

calc() とメディアクエリを使用して慎重に縮小する

ミニファイアは重要な部分に注意を払います。 calc() 内のプラスとマイナスの周囲のスペースは保持されるため、 calc(100% - 30px) は有効なままであり、中括弧、コロン、セミコロンなどの構造文字の周囲のスペースのみが削除されます。また、ネストされたメディア クエリも正しく処理されます。

ライセンスコメントは保存されます

/*! 内に記述されたライセンス コメント... */ フォームは保持されます。これは、通常のコメントが削除された場合でも、縮小された出力に著作権およびライセンス通知を保持するための標準規約です。

ブラウザで実行

beautify と minify は両方とも完全にブラウザ内で実行されるため、スタイルシートがデバイスから外部に出ることはありません。読みやすさとサイズを考慮したツール形式。 CSS が正しいかどうかは検証されません。

よくある質問

ミニファイでcalc()式が壊れますか?

いいえ。ミニファイ時はcalc(100% - 30px)が有効なまま保たれるよう、値内のプラス・マイナスの前後のスペースは保持されます。中括弧・コロン・セミコロンなど構造的な文字の周囲のスペースのみ削除されます。

ミニファイ時にコメントは削除されますか?

通常のコメントはサイズ削減のため削除されますが、/*! ... */ 形式のライセンスコメントは保持されます。これは著作権表示を保持するための標準的な規約です。

CSSはどこかにアップロードされますか?

いいえ。整形もミニファイもブラウザ内で完結するため、スタイルシートがデバイスの外に出ることはありません。

出典

問題を報告する