CSS を圧縮・整形する

本番環境向けに CSS を圧縮し(空白・コメントの削除、ルールの統合)、デバッグ用に圧縮済み CSS を整形します。

1

ミニファイされた CSS は、本番環境でファイルサイズとパース時間を削減します。整形された CSS は、開発やデバッグで読みやすくなります。同じソースを、デプロイ用にはミニファイし、検査用には整形できます。
2

CSS フォーマッター →
CSS を貼り付けてください。ツールはモードに応じて、整形(インデント、1 行 1 ルール)またはミニファイ(空白、コメント、不要なセミコロンを除去)ができます。
3

HTML ミニファイア →
インラインの <style> ブロックを含む HTML ドキュメント全体をミニファイする場合は、style タグ内の CSS をドキュメントの一部として処理する HTML ミニファイアを使ってください。
4

本番用にミニファイするときはソースマップを保持してください。ミニファイされたルールをデバッグ用のソースに対応付けます。クリティカル CSS(ファーストビュー)は、遅延読み込みされる完全なスタイルシートとは別に保持してください。

よくある質問

ミニファイでどれくらい節約できますか?: よく書かれた CSS では通常ファイルサイズの 15〜30%、コメントの多い冗長なスタイルシートではそれ以上です。より大きな効果が出るのは、ミニファイに加えた gzip/brotli 圧縮です。サーバーレベルで両方を有効にしてください。
ミニファイで CSS の挙動は変わりますか?: 正しいミニファイは、すべてのセレクター、プロパティ、値を保持します。除去されるのは空白、コメント、冗長な構文(末尾のセミコロン、0px→0 のようなゼロの単位)だけです。等価であることを確認するために、ミニファイ出力を整形して元の CSS と必ず差分比較してください。

このタスクを解決するワークフロー

CSS フォーマットと LESS 変換

CSS をフォーマットし、プリプロセッサ使用のために LESS に変換する。

パイプライン

関連ツール

CSS フォーマッター

Beautify or minify CSS online. Expand rules with indented properties or compress to a single line。無料、プライベート、100%クライアントサイド。

HTML ミニファイア

Minify HTML by removing comments and whitespace。無料、プライベート、100%クライアントサイド。

CSS グラデーションジェネレーター

Generate CSS gradient code for linear, radial, and conic gradients with custom angles and color stops。無料、プライベート、100%クライアントサイド。