CreaTools LogoCreaTools
Tech Notes
CSS Formatter

CSS Formatterの使い方｜CSS/SCSS/LESSを整形・圧縮

2026-01-19

まず、ここに貼ってください

min.css を読みたい、tailwind.css を整形したい、配信用に縮めたい。CSS関連で「読めない」「揃ってない」「サイズが気になる」のいずれかなら、考える前に CSS Formatter に貼ってください。

整形はPrettier（postcssプラグイン）、圧縮は軽量なregex方式。CSS / SCSS / LESS どれも同じUIで扱えます。

即断テーブル

困っていること操作補足
ミニファイされたCSSを読みたい「整形」ボタンPrettier準拠
配信用にサイズを減らしたい「圧縮」ボタン改行・空白・コメント削除
SCSSも揃えたい「言語」を SCSS にネスト・変数を保持して整形
LESSを扱いたい「言語」を LESS にmixin・変数を保持して整形

このツールで解決できる3つの問題

1. 「Tailwindビルド済みCSSが読めない」

globals.css のようなビルド出力は1行にまとまっていて、特定のクラスを探すのも難しい状態です。

→ 貼り付けて「整形」をクリック

セレクタごとに改行され、プロパティも1行ずつになります。何が定義されているか目視できる状態に戻せます。

2. 「素のCSSをサイズ削減して配信したい」

PostCSSやcssnanoを使うほどではない、でも改行・空白は削りたい。

→ 貼り付けて「圧縮」をクリック

このツールの圧縮はregex方式の軽量実装で、以下を行います:

  • コメント /* ... */ を削除（/*! */ 形式は当ツールでは現状削除対象）
  • 改行・タブ・連続スペースを1個に
  • セレクタ・ブロック前後の空白を削除
  • 末尾セミコロン ;} を } に

文字列リテラル（url("...") や content: "..."）は保護してから処理されるため壊れません。

3. 「SCSS / LESS の整形ルールを統一したい」

チームのSCSSコードが揃っていない、ネストが深いと読みづらい、というケース。

→ 「言語」を SCSS に切り替えて「整形」

PrettierのpostcssプラグインがSCSS構文を理解して整形します。@mixin、@include、&__element などのネスト記法も保持されます。LESSも同様。

ボタンの違い

ボタン動作使うとき
整形Prettierで整形読みやすく
圧縮regex方式でminify配信、サイズ削減

オプション

項目選択肢備考
言語CSS / SCSS / LESS整形時のparser指定
インデント2スペース / 4スペース / タブ整形時のみ反映

圧縮は言語によらず同じregexで処理されます。

圧縮の注意点

項目動作
ライセンスコメント (/*! */)現在の実装では削除されます
カスタムプロパティ (--foo)そのまま保持
calc() 内の空白圧縮されますが演算子周りは保護
メディアクエリ (@media (...))( 直前の空白は復元

ライセンスコメントを残したい配布用CSSの場合は整形のみで済ませてください。

判断フロー

CSSで困った
    ↓
CSS Formatterに貼る
    ↓
何をしたい？
    ├── 読みたい → 「整形」
    ├── 縮めたい → 「圧縮」
    └── SCSS/LESSを整形 → 言語を切り替えて「整形」

関連記事

記事読むタイミング
CSS minifyの仕組み圧縮で何が削られるか知りたいとき
CSS / SCSS / LESS の違いと整形時の注意どの言語で整形するか迷ったとき