CSS 整形 — pretty / minify 切替で読みやすく / 1 行に
CSS を整形 (pretty / minify) するツール。css-tree (MIT) でパースして AST → 自前の indent ロジックで書き戻す。Mode 切替: pretty (indent 2/4/タブ、改行あり、宣言ごと改行) と minify (空白・改行を除去して最小化)。@media / @supports / @keyframes / @font-face / @import などのアットルール、calc() / var() / カスタムプロパティ (--var) 、ベンダープレフィックス、ショートハンド を保持。コメント (`/* ... */`) は css-tree の parse 仕様により破棄されます。CSS-in-JS の `${expr}` のようなプレースホルダは parse できないため、純粋な CSS を入力してください。
使い方
Mode を選んで CSS を貼り付け、「実行」を押すと整形結果が出ます。Pretty はインデント (2 / 4 スペース / タブ) と改行を入れて宣言ごとに 1 行に展開し、Minify は空白・改行を除去して 1 行に圧縮します。css-tree (MIT) でパースしているため、@media / @supports / @keyframes / @font-face / @import などのアットルール、calc() / var() / カスタムプロパティ (--var) 、ベンダープレフィックス、ショートハンドはすべて保持されます。コメント (`/* ... */`) は css-tree の parse 仕様により破棄されます。
よくある質問
- ネストした CSS (Sass / Less) は使えますか?
- css-tree は標準の CSS (CSS Nesting Module を含む 2024 以降のブラウザ仕様) を parse できますが、Sass / Less / Stylus の独自構文 (変数 `$var` / mixin / parent selector `&` の Sass 拡張) は読めません。コンパイル後の純粋な CSS を入力してください。
- CSS-in-JS のテンプレートリテラル ${expr} は parse できますか?
- できません。css-tree は純粋な CSS を期待するので、`${expr}` のような JS の補間は構文エラーになります。事前に値を埋め込んでから入力してください。
- ベンダープレフィックスは保持されますか?
- はい。-webkit- / -moz- / -ms- などのプレフィックス、また `display: -webkit-box` のような値側のプレフィックスも、AST に乗っているため整形後も保持されます。
- コメントは保持されますか?
- いいえ。css-tree は parse の段階でコメント (`/* ... */`) を AST に含めないため、整形後の出力からコメントは消えます。コメントを残したい場合は CSS を整形前後に手作業で差分管理してください。コメントを保持できる formatter が必要な場合は prettier や stylelint などの専用ツールを検討してください (本ツールはブラウザ完結の軽量整形に特化)。
- 入力データはサーバーに送信されますか?
- いいえ。CSS はすべてブラウザ内で解析・整形されます。サーバーやネットワークには何も送信されません。
類似のツール
HTML 整形 — pretty / minify で読みやすく / 1 行に
HTML を整形 (pretty / minify) するツール。htmlparser2 でパースして自前の indent ロジックで Mode 切替: pretty (indent 2/4/タブ、改行入り) と minify (タグ間の空白・改行を除去して 1 行に圧縮)。HTML5 の void 要素 (`<br>` `<hr>` `<img>` `<input>` `<meta>` `<link>` など) は閉じタグなしで出力、`<script>` / `<style>` / `<pre>` / `<textarea>` の中身は変更せず保持。DOCTYPE 宣言・コメント・属性順・名前空間 (`xmlns:*`) を保持。XML を整形したい場合は xml-format を、HTML をプレーンテキストに変換したい場合は html-sanitize / markdown-html-convert を。すべてブラウザ内で処理。
XML 整形 — pretty / minify 切替で読みやすく / 1 行に
XML を整形 (pretty / minify) するツール。fast-xml-parser でパースして自前の indent ロジックで Mode 切替: pretty (indent 2/4/タブ、改行入り、属性も整列) と minify (空白・改行を除去して 1 行に圧縮)。CDATA / コメント / processing instruction (`<?xml ... ?>`) / DOCTYPE 宣言 / 自己閉じタグ / 属性順を保持。XML 名前空間 (xmlns:foo) もそのまま維持。XML を JSON に変換したい場合は xml-json-convert を、HTML を整形したいなら HTML 用の別ツールを (XML パーサは HTML の `<br>` のような未閉じタグを許容しません)。すべてブラウザ内で処理。
JSON 整形・検証 — インデント / 圧縮 / エラー表示
JSON をブラウザ内で整形 (インデント指定) ・最小化・バリデーションします。エラー行・列を表示。データは一切外部に送信されません。
CSS シャドウ ビルダー — box-shadow / text-shadow を GUI で組み立て
CSS の box-shadow と text-shadow を GUI で組み立てるツール。Mode で box / text を切り替え、offset-x / offset-y / blur / spread (box のみ) / color / inset (box のみ) をスライダーと数値入力で調整。多重シャドウ (カンマ区切りで複数重ね) に対応し、Material Design 風の影や Neumorphism / 文字の縁取り / 蛍光グロー など 9 種類のプリセットからワンクリックで開始。ライブプレビュー (実 div / 実テキスト) + 値だけ / 宣言付き コピー切替対応。gradient-css の対称ツールとして CSS スタイル系のロングテール需要を満たします。すべてブラウザ内で処理。