CSS整形・圧縮
CSSコードを読みやすくインデント整形したり、コメントや余分な空白を除去してファイルサイズを削減（ミニファイ）したりできます。文字列・コメント・url()・calc()などを正しく認識するトークナイザーで処理するため、data URIや擬似クラスを壊さずに変換できます。すべてブラウザ上で処理されます。
CSS整形・圧縮について
CSSは記述の自由度が高く、圧縮された1行のCSSや、逆にインデントが崩れたCSSは読み解くのに時間がかかります。整形（ビューティファイ）はセレクタや宣言ごとに改行・インデントを整えて可読性を高め、圧縮（ミニファイ）は逆に不要な空白やコメントを取り除いて配信サイズを削減します。
CSSの圧縮は単純な空白削除では壊れてしまう箇所があります。例えば「a:hover」と「a :hover」は意味が異なり、calc()内の「+」の前後の空白は必須で、url()内のdata URIにはセミコロンやコロンが含まれます。このツールはこれらを構文として正しく認識するため、意味を変えずに安全に整形・圧縮できます。
主な使い方
- 1圧縮・難読化された1行のCSSを整形して内容を確認・編集する
- 2本番配信用にCSSを圧縮してファイルサイズと通信量を削減する
- 3コードレビュー前にCSSのインデントを統一して読みやすくする
- 4他人が書いたCSSやフレームワークのCSSを整形して構造を把握する
よくある質問
Q. CSSの圧縮でスタイルが壊れることはありませんか？
A. 文字列・コメント・url()・calc()・擬似クラスのコロンなどを構文として認識して処理するため、意味を変えずに空白・コメントのみを削減します。data URIを含むurl()も保持されます。
Q. SCSSやLESSにも対応していますか？
A. 標準のCSSを対象としています。SCSS/LESS固有の記法（変数・ネスト・ミックスインなど）は正しく整形されない場合があります。
Q. 入力したCSSはサーバーに送信されますか？
A. いいえ。整形・圧縮の処理はすべてブラウザ上で完結し、外部に送信されることはありません。
関連ツール
- CSSグラデーション/box-shadowジェネレーターlinear-gradient・radial-gradientやbox-shadowをスライダーとカラーピッカーで視覚的に調整し、CSSコードを生成します。ブラウザ完結で安全です。
- カラーコード変換HEX・RGB・HSLのカラーコードを相互に変換し、色のプレビューも表示します。CSSやデザインツールで使う色の値をすばやく書き換えられます。ブラウザ内で完結し、インストール不要ですぐに使えます。
- JSON整形・検証JSONを見やすくインデント整形し、構文エラーの箇所をすぐに検出します。1行への圧縮（ミニファイ）にも対応し、APIレスポンスや設定ファイルの確認に便利。ブラウザ内で完結し、データは外部に送信されません。
- Markdown プレビューMarkdownを入力すると、見出し・リスト・表・コードブロックなどの表示結果をリアルタイムでプレビューします。READMEやブログ記事の下書き確認に便利。ブラウザ内で完結し、データは外部に送信されません。
- SQL整形1行に詰まったSQLクエリを、キーワードごとに改行・インデントして見やすく整形します。MySQL・PostgreSQL・SQLiteの方言に対応し、レビューやデバッグに便利。ブラウザ内で完結し、データは送信されません。
- YAML整形・変換YAMLを見やすく整形し、JSONとYAMLを相互に変換します。構文エラーも検出でき、KubernetesのマニフェストやDocker Composeなど設定ファイルの編集に便利。ブラウザ内で完結し、データは送信されません。