CreaTools LogoCreaTools
Tech Notes
CSS Formatter

CSS minifyの仕組み｜何が削られて何が残るか

2026-03-04

CSS minifyは「3つの仕事」しかない

CSSの圧縮は本質的にシンプルです:

  1. 空白・改行・タブを削る
  2. コメントを削る
  3. 冗長な記述を短縮する（高度なminifierのみ）

CSS Formatter の「圧縮」は1と2を行う軽量regex方式です。3はやりません。なぜそれで足りるのか、本記事で解説します。

何が削られるか

1. 改行・タブ・連続スペース

.btn {
  background: blue;
  color: white;
  padding: 8px 16px;
}

↓

.btn{background:blue;color:white;padding:8px 16px}

「改行・タブ・連続空白を1個」にしたうえで、セレクタ・ブロック・宣言の前後で発生する空白を削ります。

2. コメント

/* メインボタン */
.btn { color: red; }

↓

.btn{color:red}

/* */ 形式のコメントは丸ごと削除。/*! */ 形式のライセンスコメントも本ツールでは削除対象です（cssnano等の高機能ツールは保持できますが、本ツールは未対応）。

3. 末尾セミコロン

最後の宣言の ; は省略可能です。

.btn { color: red; }   /* ← 末尾の ; は不要 */

↓

.btn{color:red}

;} を } に置換することで1〜数バイトを稼ぎます。

削られないもの

文字列リテラル

.icon::before { content: "  "; }
.bg { background: url("/path/with spaces.png"); }

文字列の中身は触りません。本ツールでは内部でプレースホルダに退避してから処理し、最後に復元します。content: " "（2個のスペース）が content: " " にされる事故を防ぐためです。

calc() などの空白依存構文

.box { width: calc(100% - 20px); }

100%-20px のように空白を消すと値が壊れるため、演算子周辺は保護します。

メディアクエリの @media (...) 直前の空白

@media (max-width: 768px) { ... }

@media(max-width:768px) のように空白を消すと、一部の古いパーサーで誤動作する事例があるため、本ツールでは @media、@supports、@container、@document の ( 直前にだけ空白を復元しています。

CSS変数（カスタムプロパティ）

:root {
  --primary: #3b82f6;
  --spacing-md: 16px;
}

変数名・値ともに触りません。

より高度なminifyとの違い

cssnanoなどの高機能minifierは、本ツールがやらない以下も行います:

処理例本ツールcssnano
空白・コメント削除—✓✓
カラーコード短縮#ffffff → #fff×✓
0単位の削除0px → 0×✓
プロパティ統合margin-top:1px;margin-left:1px → margin:1px 0 0 1px×✓
ベンダープレフィックス整理—×✓
不要セレクタ削除—×✓

つまり本ツールの圧縮率は cssnano より低いです（だいたい元の40〜70%、cssnanoは20〜40%まで縮みます）。

ただし「軽くてバンドラ要らずでブラウザだけで動く」というメリットがあるため、ちょっとした単発配布、コピペで配信、サイズ感の確認には十分です。

どのminifyを選ぶか

シチュエーション推奨
開発中のサイズ確認本ツール
ブログ記事への埋め込みCSS本ツール
単発配布スクリプトの同梱CSS本ツール
本番Webサイトのビルドcssnano（PostCSS経由）
TailwindプロジェクトTailwindの本番ビルド機能

関連記事

CSS minifyは派手なことをしていません。だからこそ動作が読めて、デバッグもしやすい。