CSS Minifier

CSS ミニファイとは？

CSS ミニファイとは、スタイルシートの動作を変えずに不要な文字をすべて取り除くプロセスです。具体的には、空白・改行・コメント・末尾のセミコロンや不要なクォートなどの冗長な構文を削除します。ブラウザはミニファイ済みの CSS をオリジナルとまったく同じように解析します。W3C CSS Syntax Module は CSS の文法を定義しており、トークン間の空白は識別子を区切る場合を除き省略可能です。ミニファイはこの仕様を活用し、最小限の文字数まで圧縮します。

オンライン CSS ミニファイアーは、整形済みスタイルシートを転送サイズに最適化されたコンパクトな形式に変換します。削減率は通常 15〜40% で、ソースの空白量やコメントの多さによって異なります。50 KB のスタイルシートなら、ページ読み込みのたびにネットワーク転送量を 7〜20 KB 削減できます。サーバーで gzip や Brotli 圧縮と組み合わせると、ミニファイ済み CSS を圧縮する方が整形済みオリジナルを圧縮するよりも最終転送サイズがさらに小さくなります。

ミニファイはフロントエンドのビルドパイプラインにおける標準的なステップです。cssnano・clean-css・esbuild などのツールがビルドの一部としてミニファイを実行します。しかし開発中には、テスト用に単一のスニペットをミニファイしたい、クリティカル CSS ブロックをインラインで埋め込みたい、バンドル設定に追加する前にスタイルシートの圧縮率を確認したいといった場面があります。そのようなときにブラウザベースの CSS ミニファイアーが役立ちます。CSS を貼り付けてミニファイ結果をコピーするだけです。

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

この CSS ミニファイアーを使う理由

CSS を貼り付けるだけで、ミリ秒単位でミニファイ済みの出力が得られます。ビルドツールの設定も、CLI コマンドも、アカウント登録も不要です。

CSS ミニファイアーの使用例

CSS ミニファイの手法

CSS ミニファイアーはファイルサイズを削減するためにいくつかの変換を適用します。それぞれがソース内の異なる種類の冗長性を対象としています。下の表に主な手法と整形済みスタイルシートに対する典型的な削減率を示します。

削減率は入力によって異なります。コメントが多いファイルはコメント削除の恩恵が大きく、すでにコンパクトなファイルは削減率が小さくなります。最も確実な効果が得られるのは空白の除去とショートハンド最適化です。cssnano などの高度なミニファイアーは重複セレクターの統合、個別プロパティのショートハンドへの折り畳み（margin-top・margin-right・margin-bottom・margin-left を margin に統合）、上書きされた宣言の削除なども行います。

ミニファイ vs. gzip 圧縮

ミニファイと圧縮は相互補完的な手法であり、互いの代替にはなりません。異なる層で動作し、組み合わせて使用することができます。

コード例

さまざまな言語と環境で CSS をプログラム的にミニファイする方法を示します。

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

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

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

よくある質問