CSS 圧縮/整形 - CSS をオンラインで圧縮・整形
CSSを圧縮して空白を除きファイルサイズを削減、または整形して読みやすく復元。アップロード不要でブラウザ内で完結する無料のCSSフォーマッターです。
CSS を貼り付けると、このツールが即座に圧縮（minify）します。コメント・改行・余分な空白・不要な文字を取り除いてファイルサイズを小さくし、ページの読み込みを高速化します。逆に「整形」モードに切り替えれば、1行に圧縮された CSS を読みやすいインデント付きコードに戻せるので、編集や確認のときに便利です。処理はすべてブラウザ内で完結し、スタイルシートがサーバーへアップロードされることは一切ありません。インストール不要で、VSCode などのエディタを開かずにこのページだけで圧縮も復元も完了します。
なぜオンラインでCSS 圧縮/整形を使うのですか？
圧縮してサイズを削減し、整形して可読性を向上させます。
CSS を貼り付けると、このツールが即座に圧縮（minify）します。コメント・改行・余分な空白・不要な文字を取り除いてファイルサイズを小さくし、ページの読み込みを高速化します。逆に「整形」モードに切り替えれば、1行に圧縮された CSS を読みやすいインデント付きコードに戻せるので、編集や確認のときに便利です。処理はすべてブラウザ内で完結し、スタイルシートがサーバーへアップロードされることは一切ありません。インストール不要で、VSCode などのエディタを開かずにこのページだけで圧縮も復元も完了します。
CSS 圧縮/整形ツールの使い方
- 1
CSS を貼り付ける
圧縮または整形したい CSS を入力欄に貼り付けます。1つのルールから、スタイルシート全体までそのまま貼り付けて構いません。
- 2
「圧縮」か「整形」を選ぶ
「圧縮」を押すと CSS を1行のコンパクトな形にまとめます。圧縮済みの CSS を元に戻したいときは「整形」を押すと、読みやすいインデント付きコードに復元できます。
- 3
結果を確認する
変換後の出力を確認します。CSS の構文が無効な場合はエラーとして表示されるので、コピーする前に修正できます。
- 4
出力をコピーする
「コピー」ボタンで圧縮または整形した CSS を取得し、プロジェクトに貼り付けます。やり直すときは「クリア」で入力を消せます。
参考リンク
- MDN — CSS
CSS の構文・プロパティ・値に関する Mozilla のリファレンス。圧縮や整形のあとにルールが正しいか確認するのに役立ちます。
- W3C — CSS Snapshot
有効なスタイルシート構文を定義する CSS 仕様の公式まとめ（W3C）。
関連ツール
よくある質問
- CSS 圧縮ツールは何をしてくれますか？
- CSS 圧縮ツールは、ブラウザが描画に必要としない部分（コメント・改行・余分な空白・不要な文字）をすべて取り除きます。スタイルの見た目はそのままに、ファイルサイズだけを小さくするので、ダウンロードが速くなりページの表示速度が改善します。
- 圧縮した CSS を元に戻すことはできますか？
- できます。圧縮済みの CSS を入力欄に貼り付けて「整形」を押すだけで、インデントと改行が復元され、1行にまとまった CSS が読みやすいコードに戻ります。「css圧縮 戻す」「元に戻す」をしたいときはこの整形モードを使ってください。
- CSS を圧縮する方法を教えてください。
- CSS を入力欄に貼り付けて「圧縮」ボタンを押すだけです。専用ツールやビルド設定は不要で、コピー&ペーストですぐに圧縮できます。手早く1ファイルだけ圧縮したいときに最適な方法です。
- VSCode の拡張機能を使わずに圧縮できますか？
- はい。このツールはブラウザだけで動くため、VSCode やエディタ拡張機能のインストールは不要です。プロジェクトに組み込む前にちょっと圧縮したい、共有された CSS を確認したい、といった場面ではこのページだけで完結します。本格的なビルドに組み込む場合は cssnano などのビルドツールと併用するとよいでしょう。
- 圧縮するとスタイルの見た目は変わりますか？
- 変わりません。圧縮ではブラウザが無視するコメントや空白だけを削除します。セレクタ・プロパティ・値はそのまま残るので、レンダリング結果は同じまま、ファイルだけが小さくなります。
- 貼り付けた CSS はサーバーに送信されますか？
- 送信されません。圧縮も整形もすべてブラウザ内のクライアントサイド処理で行われます。スタイルシートが端末の外に出ることはないので、社内用や機密性の高い CSS も安心して扱えます。