CSS整形について
DevTools、minify 済みバンドル、デザイン引き渡しからコピーした CSS を整えます。「整形」でレビュー用に、「圧縮」で embed やサイズ比較向けの短い文字列にできます。
セレクタ・宣言・@ 規則は意味を保ったままインデントと改行が揃い、diff やプロジェクトへの貼り戻しがしやすくなります。
PR 前の整形、デモ用の圧縮などに使います。FAQ では @layer、ネストルール、圧縮エラーも触れています。
できること
CSS 整形
compact な CSS をインデント付きブロックに展開します。セレクタと宣言が行分けされ、ルール間に空行が入ります。@media や @keyframes も構文が合法なら処理できます。
CSS 圧縮
整形に成功したあと、コメントと余分な空白を落として短い 1 行に近い文字列にします。embed、デモ、サイズチェック向けです。
@media と @keyframes
ネストした at ルールと内側のセレクタも段インデントされ、ブレークポイントやアニメーション定義をコードレビューで追いやすくします。
カスタムプロパティとネスト
ネストセレクタ構文や var(--token) も、パーサが受け付ける dialect であれば通常ルールと同様に整形されます。
よくある使い方
CSS を整形する手順は？
CSS を入力欄に貼り「整形」します。セレクタとプロパティがインデントされ、長い @media ブロックも読みやすくなります。
minify 済み CSS を美化するには？
DevTools やビルドから 1 行 CSS を貼り「整形」します。改行と 2 スペース相当のインデントが戻り、セレクタと値は変わりません。
本番向けに CSS を短くするには？
CSS を貼ったあと「圧縮」します。コメントと余分な空白が除かれ、コピー可能な compact な stylesheet になります。
よくある質問
- CSS を整形する手順は？
- CSS を入力欄に貼り「整形」します。セレクタとプロパティがインデントされ、長い @media ブロックも読みやすくなります。
- minify 済み CSS を美化するには？
- DevTools やビルドから 1 行 CSS を貼り「整形」します。改行と 2 スペース相当のインデントが戻り、セレクタと値は変わりません。
- 本番向けに CSS を短くするには？
- CSS を貼ったあと「圧縮」します。コメントと余分な空白が除かれ、コピー可能な compact な stylesheet になります。
- 整形と圧縮の違いは？
- 整形は人間向けに段と空行を足します。圧縮は合法 CSS のまま文字数を減らし、転送や inline 向けです。
- 圧縮が失敗するのはなぜ？
- 構文エラー — 閉じ括弧不足、壊れた @ 規則、切れたペーストが多いです。先に「整形」して問題行を特定し、直してから再圧縮してください。
- SCSS / LESS は整形できますか？
- 対象はプレーン CSS です。SCSS/LESS はビルドでコンパイルするか、DevTools の computed/Styles からコンパイル後 CSS を貼ってください。
- 圧縮で未使用ルールも消えますか？
- いいえ。空白とコメントだけです。デッドコード削除は PurgeCSS やバンドラー側で行ってください。