CSSミニファイア＆フォーマッタ

このツールとは？

CSSミニファイアは、表示結果を変えずにスタイルシートをできる限り小さく書き換えます。コメントと空白を削除し、安全な範囲で色の値やゼロ単位を短縮し、重複したルールを統合し、不要なセミコロンを削除します。

このツールはclean-cssというCSSオプティマイザーを基盤としています。正規表現ではなくスタイルシートを実際にASTへ解析するため、単純なミニファイアでは壊れがちなエッジケース、たとえばCSSカスタムプロパティ（--main-color: ...）、文字列内のコンテンツ、複雑なセレクタやメディアクエリも正しく処理できます。

なぜこれを使うのか？

• 正規表現ではなくASTベースのミニファイ（clean-css） — カスタムプロパティ、文字列、ネストされたメディアクエリでも安全。
• レベル2の最適化により、単なる空白削除を超えてルールの統合・簡略化によるさらなる削減が可能。
• 何バイト、何パーセント削減できたかを正確に確認できます。
• フォーマットモードでは、ミニファイされたスタイルシートを一貫したインデントの読みやすいCSSに戻せます。
• 処理は100%ローカル — 独自の、あるいは未公開のスタイルがブラウザの外に出ることはありません。

使い方

1. 入力欄にCSSを貼り付けるか、「例を読み込む」をクリックしてカスタムプロパティとメディアクエリを含むサンプルを試してください。
2. 「ミニファイ」をクリックして圧縮するか、「フォーマット」をクリックして2スペースインデントで整形します。
3. 入力欄の下のメッセージを確認してください — ミニファイモードではサイズ削減量が表示され、無効なCSSの場合は、壊れた結果を黙って出力する代わりに明確なエラーが表示されます。
4. 「コピー」をクリックして結果を取得します。

例

入力

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

出力

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

カスタムプロパティ、メディアクエリ、カスケードの順序はすべて保持されます — 削除されるのは空白、コメント、冗長な文字だけです。

実用的なヒント

• ミニファイは開発中ではなくビルド・デプロイ時に行いましょう — 読みやすいソースを編集し、このツール（またはビルドパイプライン）に出荷版を生成させます。
• 本番環境でページの見た目が異なる原因を調べているときは、先にミニファイされたCSSをフォーマットしてからソースと比較すると、差分がずっと読みやすくなります。
• カスタムプロパティはミニファイ後も残るため、デザイントークンベースのスタイルシート（--spacing、--color-*など）もこのツールで安全に処理できます。
• プロジェクトが公開前にすべてを別ファイルで管理している場合は、下記のHTML・JSミニファイアと組み合わせて使用してください。

実際のワークフローにおける位置づけ

CSSはミニファイの効果が比較的大きい対象の一つです。スタイルシートはデフォルトでレンダリングをブロックするため、削減した1バイトごとに、特に低速な接続環境ではファーストペイントがわずかに短縮されます。画像最適化ほどの効果はありませんが、ビルドステップに組み込んでしまえば実質無料の最適化です。

フォーマット方向は逆の課題にも役立ちます。競合サイトやレガシーな本番環境で配信されているミニファイ済みスタイルシートを調べ、上書きやリデザインの前にその構造を理解する際に便利です。

→ HTMLミニファイア · JavaScriptミニファイア

一般的な利用例

• 静的サイトやランディングページをデプロイする前にスタイルシートを縮小する。
• 本番サイトから取得したミニファイ済みCSSファイルを整形して構造を調べる。
• デザインツールからエクスポートされた、コメントや空白が多いCSSをクリーンアップする。
• 手書きのCSSスニペットが正しく解析されるかを素早く確認する。不正な形式のCSSは明確なエラーとして表示されます。

よくある質問