CSSフォーマッター
乱れたCSSや圧縮されたCSSを読みやすく整形し、必要なときは同じ画面でCSS圧縮もできます。CSS整形、CSSフォーマッター、CSS minifierの流れを一つのブラウザー内エディターにまとめました。
すぐ使えるように。
- 最初の操作が見える入力位置と結果位置をはっきり分けます。
- 結果を先に重要な出力を先に見せ、説明は必要な分だけにします。
- 手間を減らす登録や不要な入力なしで使えるようにします。
CSSフォーマッターは、読みやすいCSSと配布用の圧縮CSSを行き来するための道具です
CSSには、読むための形と配布するための形があります。レビューするときはセレクター、宣言、メディアクエリが行ごとに見えるほうが扱いやすく、公開用のコピーでは余分な文字が少ないほうが向いています。このCSSフォーマッターは、その2つを同じエディターに置いています。
コード整形は中括弧、セミコロン、カンマを手がかりに改行し、選んだSpace/Sizeに合わせてインデントを入れます。CSS圧縮は通常コメントと重複する空白を減らし、末尾セミコロン、繰り返しHEX色、0の単位などを保守的に短くします。プロパティ順は入れ替えないため、cascadeの確認は実際の画面で行ってください。
CSS整形で変わるところ
.button{color:#fff;margin:0} のような1行のCSSは、確認したいときに読みにくくなります。コード整形を使うと、セレクターと宣言を行に分け、選択したインデント幅を反映します。値やプロパティ順は書き換えません。
CSS圧縮で減らすもの
CSS圧縮は配布用コピーを作るための反対方向の処理です。通常コメント、改行、連続する空白、{}:;,>+~ の周りの余分な空白、閉じ中括弧直前のセミコロンを減らします。短くできるHEX色と0単位も控えめに短縮します。
先に整形したい場面
受け取ったCSS、古いサイトのスタイル、CMS欄から取り出したCSSを読むときは、まず整形すると確認しやすくなります。セレクターの終わり、メディアクエリの範囲、重複している宣言を目で追いやすくなります。
圧縮を使う場面
編集と確認が終わったあと、公開用のコピーを作るときにCSS圧縮を使います。編集用のCSSは読みやすい形で残し、圧縮結果はコピーまたはダウンロードして配布段階で使うのが安全です。
例で見る整形と圧縮
.card{margin:0px;padding:16px;color:#ffffff} は、整形すると宣言ごとに行が分かれます。圧縮すると .card{margin:0;padding:16px;color:#fff} のように短くなります。どちらも同じCSSを扱いますが、使う場面が違います。
検索語が違っても作業は近い
CSSフォーマッター、CSS整形、CSS beautifier、CSS code formatterは、多くの場合「読みやすく整える」ことを指します。CSS minifierやCSS圧縮は「配布用に文字数を減らす」ことです。このページではその2つを同じ作業面にまとめています。
このツールで判定しないこと
この画面は整形と圧縮のための道具で、CSSの正しさを保証する検証器ではありません。ブラウザー対応、チームのコーディング規約、SCSS・Less・CSS-in-JSの完全な構文解析が必要な場合は、ビルド環境やStylelintでも確認してください。
FAQ
入力したCSSはサーバーに送信されますか？
いいえ。整形と圧縮は現在のブラウザー内で処理されます。コピーまたはダウンロードするまで、入力したコードはこの画面内で扱われます。
CSSフォーマッターとCSS beautifierは同じですか？
このページでは同じ作業として扱います。どちらも、崩れたCSSや圧縮CSSを改行とインデントのある読みやすい形に戻す機能です。
CSS minifierやCSS圧縮は何を減らしますか？
通常コメント、重複する空白、改行、CSS記号の周りの余分な空白、閉じ中括弧前のセミコロンを減らします。短縮できるHEX色と0単位も整理します。
整形や圧縮でCSSの動きが変わることはありますか？
プロパティ順は変えませんが、壊れたCSSや標準外の構文では確認が必要です。公開前に実際のブラウザーやプロジェクトで結果を見てください。
SCSS、Less、CSS-in-JSも整形できますか？
標準CSSを対象にしています。変数、ネスト、mixin、テンプレート文字列が多いコードは、専用のビルド環境でもう一度整形・検証するほうが安全です。