CSSを整ったインデントで見やすく整形するか、ファイルサイズ削減のためにミニファイします。メディアクエリ・calc()・ライセンスコメントに対応しています。
CSSフォーマッターの使い方
入力欄にCSSを貼り付けます。
「整形」で見やすくするか、「ミニファイ」で圧縮するかを選択します。
インデント幅を選び、結果をコピーします。
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.
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.
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 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.
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(100% - 30px)が有効なまま保たれるよう、値内のプラス・マイナスの前後のスペースは保持されます。中括弧・コロン・セミコロンなど構造的な文字の周囲のスペースのみ削除されます。
通常のコメントはサイズ削減のため削除されますが、/*! ... */ 形式のライセンスコメントは保持されます。これは著作権表示を保持するための標準的な規約です。
いいえ。整形もミニファイもブラウザ内で完結するため、スタイルシートがデバイスの外に出ることはありません。
このツールを埋め込む
このツールをご自身のウェブサイトに追加できます。下のコードをコピーしてください。内容は自動的に最新の状態に保たれます。
<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>関連ツール