CSS Minifier / Beautifier

How to Use the CSS Minifier / Beautifier

This free online CSS tool lets you minify or beautify your CSS code instantly. Choose "Minify" mode to compress your CSS by removing comments, whitespace, and unnecessary characters. Choose "Beautify" mode to format compressed CSS with proper indentation and line breaks for readability.

CSS Minification

• Removes all CSS comments (/* ... */)
• Collapses multiple whitespace characters into single spaces
• Removes unnecessary spaces around selectors and properties
• Removes trailing semicolons before closing braces
• Shows character count comparison and size savings percentage

CSS Beautification

The beautify mode transforms minified CSS into a well-formatted, human-readable format. It adds proper line breaks after opening braces, closing braces, and semicolons, then applies consistent indentation based on your chosen indent size (2 or 4 spaces). This is essential for debugging and maintaining CSS stylesheets.

Why Minify CSS?

Minified CSS files load faster because they contain fewer bytes. Removing comments, whitespace, and redundant characters can reduce CSS file size by 20-50%. This directly improves page load times, which is important for user experience and SEO rankings. Most production websites serve minified CSS alongside gzip or Brotli compression.

CSS Minifier / Beautifier の使い方

CSSコードをワンクリックで圧縮(ミニファイ)または整形(ビューティファイ)できるツールです。圧縮モードではコメントや空白を除去しファイルサイズを削減、整形モードではインデントと改行を追加して可読性を向上させます。処理は全てブラウザ内で完結します。

操作は3ステップです。まず「圧縮」「整形」をボタンで切り替え、次にCSSを入力欄へ貼り付け、最後に実行ボタンを押すだけ。圧縮モードでは入力・出力の文字数と削減率がその場で表示されるため、どれだけ軽量化できたかを数値で確認できます。整形モードではインデント幅(2スペース / 4スペース)をプロジェクトの規約に合わせて選択できます。

実務での活用例

1. WordPressの「追加CSS」やCMSのカスタムCSS欄に貼る前の圧縮

ビルドパイプラインを持たないWordPressサイトやノーコードツールでは、管理画面のカスタムCSS欄に直接CSSを書く場面が多くあります。開発中はコメントやインデント付きで書き、本番反映の直前にこのツールで圧縮すれば、メンテナンス性と転送量削減を両立できます。コメント付きの元CSSは必ず手元に残しておきましょう。

2. CDN配信されている圧縮済みCSSの解読

ソースマップのない本番環境のデバッグや、他サイトのレイアウト調査では、1行に押し固められたCSSを読む必要があります。整形モードに貼り付ければルールごとに改行・インデントされ、どのセレクタがどの要素に効いているかを追いやすくなります。読み終えたら圧縮モードで元に戻すことも可能です。

3. HTMLメールやAMPページのサイズ制限対策

Gmailは約102KBを超えるHTMLメールを途中で切り詰め(クリッピング)、AMPページの<style amp-custom>には75KBの上限があります。インラインCSSの圧縮は、こうしたサイズ制限ギリギリの場面で効く実用的な手段です。圧縮後の文字数表示で、上限内に収まったかを即座に判断できます。

よくある落とし穴と対処 / Common Pitfalls and Fixes

CSS圧縮は構文エラーこそ出にくいものの、「圧縮したら表示が変わった」という事故が静かに起きやすい処理です。代表的な落とし穴をまとめました。

CSS minification rarely throws errors — instead it can silently change rendering. These are the classic traps.

言語別コード例 / Code Examples by Language

ビルドパイプラインでCSS圧縮を自動化する場合の最小サンプルです。

Minimal snippets to automate CSS minification in a build pipeline.

JavaScript / Node.js (esbuild)

// npm i -D esbuild
import esbuild from "esbuild";

const { code } = await esbuild.transform(css, {
  loader: "css",
  minify: true, // calc() や @media を構文解析した上で安全に圧縮
});

Python (rcssmin)

# pip install rcssmin
import rcssmin

minified = rcssmin.cssmin(css)
print(f"{len(css)} -> {len(minified)} chars")

Go (tdewolff/minify)

import (
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/css"
)

m := minify.New()
m.AddFunc("text/css", css.Minify)
out, err := m.String("text/css", in)

Shell (CLI)

# esbuild CLI で圧縮 / Minify with esbuild
npx esbuild style.css --minify --outfile=style.min.css

# clean-css-cli を使う場合 / Or clean-css-cli
npx cleancss -o style.min.css style.css

# 整形(逆方向)は Prettier / Beautify with Prettier
npx prettier --write style.css

Before / After 実例 / Before & After

例1: コメント付きボタンCSSの圧縮 / Minify a commented button style

/* button styles */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #4f46e5;
  color: #ffffff;
}
.btn:hover {
  background-color: #4338ca;
}

↓ 187文字 → 136文字(27.3%削減) / 187 → 136 chars (27.3% smaller)

.btn{display:inline-block;padding:8px 16px;border-radius:4px;background-color:#4f46e5;color:#ffffff}.btn:hover{background-color:#4338ca}

例2: メディアクエリを含むCSS / CSS with a media query

/* responsive grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

↓ 189文字 → 133文字(29.6%削減)。and 前後の空白は保持される / 189 → 133 chars (29.6% smaller); spaces around and are preserved

.grid{display:grid;grid-template-columns:1fr;gap:16px}@media screen and (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}

例3: 圧縮済みCSSの整形(逆方向) / Beautify minified CSS

.card{border:1px solid #e5e7eb;border-radius:8px}.card h2{margin:0;font-size:18px}

↓

.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.card h2 {
  margin: 0;
  font-size: 18px;
}

コメントの多いCSSほど削減率は大きくなり、20〜50%程度が目安です。gzip/Brotli圧縮と併用すれば転送量はさらに減ります。

Heavily commented CSS shrinks the most — expect 20-50% savings, and even more once gzip/Brotli is applied on top.

Why browser-only? / なぜブラウザ完結か

A stylesheet often reveals more than you might expect. CSS for an unreleased redesign exposes the new layout before launch; selectors for an internal admin panel hint at how your back-office tooling is structured; design-token values such as brand colors and spacing scales are frequently part of a proprietary design system; and agency work for clients is commonly under NDA until release. Pasting that CSS into a server-side minifier transmits all of it to a third party — even if the service only returns compressed text, your stylesheet has left your machine and may be logged. This tool performs both minification and beautification entirely in your browser using a few JavaScript string operations. No network request is made when you click Minify or Beautify, and you can verify that yourself: open DevTools, switch to the Network tab, run the tool, and watch — nothing appears. The same principle applies to our JSON Minifier and the other DevToolBox tools.

公開前のリニューアルデザイン、社内管理画面のセレクタ構成、NDA下の受託案件のCSSなど、スタイルシートには意外と機密が含まれます。 サーバ側で処理する圧縮ツールに貼ると、結果が返るだけでも中身は第三者に送信されます。本ツールは圧縮も整形もすべてブラウザ内の JavaScriptで完結し、通信は一切発生しません。DevTools の Network タブが空のままであることで、誰でも検証できます。