CSSミニファイア
入力CSS
CSSミニファイアとは
CSSミニファイア（CSS Minifier）は、CSSファイルの不要な空白・改行・コメントを削除してファイルサイズを圧縮する無料ツールです。Webサイトのパフォーマンス向上や、本番環境へのデプロイ前の最適化に役立ちます。ブラウザ上で動作するため、インストール不要ですぐに使えます。
ミニファイで削除されるもの
- −インデントのスペース・タブ
- −プロパティ間の改行
- −セレクタ・括弧前後の余分なスペース
- −末尾の不要なセミコロン
主な活用シーン
- ✓本番環境へのデプロイ前の最適化
- ✓HTMLのインラインCSSの圧縮
- ✓メールテンプレートのスタイル最適化
- ✓静的サイトのページ速度改善
使い方とヒント
基本的な使い方
- ミニファイしたいCSSコードを入力欄に貼り付けます
- 「ミニファイ」ボタンをクリックします
- ミニファイされたCSSが下部に表示されます
- 表示されたCSSをコピーして使用できます
ミニファイ処理の内容
- 不要な空白やタブ、改行を削除します
- セレクタとプロパティ間の余分なスペースを最適化します
- 末尾のセミコロンを必要に応じて削除し、ファイルサイズを削減します
- コメントは保持されますが、最適化されます
注意事項
- 大規模なプロジェクトでは、本番環境用のビルドツールの使用をお勧めします
- ミニファイ前のCSSコードは必ずバックアップを取っておくことをお勧めします
- コードの可読性は低下しますが、ファイルサイズが削減され、ウェブサイトのパフォーマンスが向上します
- エラーのあるCSSコードはミニファイ後も正しく動作しない可能性があります
よくある質問（FAQ）
CSSをミニファイするとどれくらいサイズが減りますか？
一般的に20〜50%程度のファイルサイズ削減が見込めます。コメントや空白が多い手書きCSSほど圧縮率が高くなり、Tailwind CSSや Bootstrap など大型フレームワークでは60〜80%の削減も可能です。さらに gzip / Brotli 圧縮（CDN・サーバー側）を併用すれば、転送サイズは元の10〜20%程度まで縮小できます。
ミニファイしたCSSは元に戻せますか？
コメント情報は完全に失われますが、CSSの構造自体は CSS整形ツール・<a href="/tools/html-formatter">HTML formatter</a> 系のツールで読みやすい形に「展開」できます。ただしコメント・元の改行位置・原作者の意図的なグルーピングは復元できないため、開発時のソースは別途バージョン管理（Git）で必ず保持してください。
CSSミニファイはSEOに影響しますか？
間接的にプラスの影響があります。Google は Core Web Vitals（LCP・INP・CLS）をランキング要素にしており、CSSの軽量化はLCP（Largest Contentful Paint = 主要コンテンツの表示時間）改善に直結します。特にモバイル回線での表示速度向上が期待でき、結果としてユーザー体験向上 + SEO向上の循環を生みます。
Sass・SCSSファイルには使えますか？
本ツールは標準CSS（CSS3）専用で、SCSS のネスト記法・変数（`$primary`）・`@mixin`・`@include` 等の記述には対応していません。SCSSファイルを軽量化したい場合は、(1) まず SCSS をコンパイル（`sass input.scss output.css`）、(2) 生成された標準CSSを本ツールでミニファイ、という2段階の処理を行ってください。
ミニファイ後にレイアウトが崩れる場合は？
よくある原因: (1) 元のCSSに構文エラーがあり、ミニファイで顕在化、(2) ベンダープレフィックス（`-webkit-`, `-moz-`）が誤って削除、(3) `!important` が予期せず削除、(4) calc() 関数のスペースが詰められて演算順序が変わる、(5) hsla()のカンマ区切りが圧縮されすぎ。元CSS を <a href="/tools/css-minifier">本ツール</a>で整形してから手動修正、または Prettier で再整形を試してください。
CSS変数（カスタムプロパティ）は対応していますか？
はい、`--variable-name: value;` 形式のCSSカスタムプロパティ、`var(--variable-name)` の参照は変更されずに保持されます。ダークモード切替、テーマ切替、デザインシステムの構築でCSS変数は重要な役割を果たすため、ミニファイ後も完全に動作します。
PostCSSやcssnanoとの違いは？
本ツールは「単純なミニファイ（コメント・空白除去・短縮）」のみを行います。PostCSS + cssnano はより高度な最適化を提供します: (1) ベンダープレフィックスの自動付与、(2) 複数の同じセレクタを統合、(3) ショートハンド化（`margin: 10px 10px 10px 10px;` → `margin: 10px;`）、(4) 不要な !important 削除、(5) Z-index の連番化。本格的な本番ビルドでは cssnano + autoprefixer の組合せを推奨します。
コードはサーバーに送信されますか？
いいえ、本ツールはすべての処理をブラウザ内で完結させます。入力したCSSコードがst0z.comのサーバーや第三者に送信されることはなく、社外秘のWebアプリのスタイル、未公開のデザインシステム、独自のカスタマイズCSSも安全にミニファイできます。