Monu Tools

CSSフォーマッター

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

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

  1. 01

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

  2. 02

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

  3. 03

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

What the CSS formatter does

This is a CSS formatter that beautifies stylesheets with clean, consistent indentation, or minifies them to shrink file size. You choose the indent size for beautifying, and switch to minify when you want the smallest output.

When to beautify and when to minify

Readable CSS is easier to scan, review and debug: when each rule and declaration is indented consistently, you can see selectors, nesting and the shape of your media queries at a glance.

Minifying is for production. It removes the whitespace and comments that browsers do not need, so the file downloads faster. On a large stylesheet the saving adds up, especially before gzip compression on the server.

Careful minifying with calc() and media queries

The minifier is careful where it matters. It keeps the spaces around plus and minus inside calc(), so calc(100% - 30px) stays valid, and it only strips spaces around structural characters such as braces, colons and semicolons. It also handles nested media queries correctly.

License comments are preserved

License comments written in the /*! ... */ form are preserved, which is the standard convention for keeping copyright and license notices in minified output even when ordinary comments are removed.

Runs in your browser

Both beautify and minify run entirely in your browser, so your stylesheets never leave your device. The tool formats for readability and size; it does not validate that your CSS is correct.

よくある質問

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

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

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

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

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

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

出典

このツールを埋め込む

このツールをご自身のウェブサイトに追加できます。下のコードをコピーしてください。内容は自動的に最新の状態に保たれます。

<iframe src="https://monu.tools/embed/ja/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

関連ツール