CSS Minify 本番ワークフロー｜単体ツールと PostCSS/cssnano の使い分け

CSS Minify ビルド
結論：30秒で CSS を Minify する
  • 小規模・単体ファイル: 下の埋め込みツールに貼り付けて一発圧縮
  • プロジェクト開発: Vite (Lightning CSS) または PostCSS (cssnano) でビルド時自動圧縮
  • デバッグ対策: 本番環境ではソースマップ (.map) を別出力しブラウザで元コードを確認

1. オンライン CSS / JS Minify ツール

CSS コードを入力欄に貼り付けることで、コメントや不要な改行・空白を一瞬で削除し、最小化されたコードを生成します。

⚡ この場でコードを圧縮する

2. ビルドパイプラインでの自動化（cssnano / Vite）

プロジェクト規模が大きい場合、手動圧縮ではなくビルドステップへ自動組み込みします。

PostCSS + cssnano の設定例 (postcss.config.js)

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

3. 注意点（ハマりどころ）

  1. calc() 内の演算子スペース削除による破損
    • calc(100% - 20px) のハイフン (-) 前後のスペースを強引に消す過剰な Minifier を使うと、CSS 構文エラーになります。信頼できるパーサー（Lightning CSS や cssnano）を使用してください。
  2. z-index やクラス名の重複書き換え
    • 高度な最適化（cssnano の unsafe オプション等）を有効にすると、z-index の数値が自動置換されてレイアウト順序が崩れる場合があります。デフォルトの安全な設定 (preset: 'default') で運用するのが鉄則です。