使い方
- 入力欄にCSSを貼り付けるか、.cssファイルを開くか、例をお試しください。
- 読みやすいコードにするには「Beautify」、最小の出力にするには「Minify」を選択します。
- 整形時は、2スペース、4スペース、またはタブを選びます。
- 結果をコピーするか、.cssファイルとしてダウンロードします。波括弧や引用符の対応が取れていない場合は、エラーに行と列が表示されます。
仕組み
フォーマッターはまずスタイルシートをトークンに分割します。シングルクォートまたはダブルクォートで囲まれた文字列、url(…) の値、コメント、波括弧、セミコロンです。文字列と url() は単一のトークンとして扱われるため、データ URI 内のセミコロンや content: "{ }" 内の波括弧が構造を混乱させることはなく、その内容はそのままコピーされます。
Beautify では、セレクターリストの各セレクターを個別の行に配置し、子・兄弟・隣接コンビネーター（>、~、+）の前後にスペースを追加し、各宣言を「property: value;」として個別の行に記述します。@media、@supports、@layer、@container、および CSS のネイティブな入れ子内のブロックは、深さごとに 1 レベルインデントされます。ブロックの最後の宣言の後にセミコロンがない場合は追加されます。コメントは元の場所に保持されます。
Minify では、コメント（/*! … */ のライセンス表記を除く）を削除し、空白を圧縮し、波括弧、コロン、セミコロン、カンマ、セレクターコンビネーターの前後のスペースを削除し、各閉じ波括弧の前のセミコロンを省略します。意味が変わるスペースは保持されます。「.a .b」の子孫コンビネーター、「a :focus」のスペース、calc(100% - 2px) などの値の内側のスペースです。「! important」は「!important」に正規化されます。
このツールは値を書き換えません。色、単位、ゼロは記述されたまま維持され、ルールが結合されたり並べ替えられたりすることはありません。通常の入れ子を使用した SCSS や Less ファイルは通常は動作しますが、// 行コメントやミックスインなど独自の構文は解釈されません。
使用例
圧縮されたフレームワークファイルを読む
1 行の bootstrap.min.css の抜粋を貼り付け、Beautify で 2 スペースを選択すると、各ルール、メディアクエリ、およびそのネストされたルールが、それぞれ別の行にインデント付きで表示されます。
手書きのスタイルシートを配布する
コメントとインデントを含む 12 KB のスタイルシートを、メールテンプレートやページの head にインラインで追加する前に Minify します。概要には処理前後の文字数が表示されます。
閉じ波括弧の欠落を見つける
スタイルシートが途中から適用されなくなります。フォーマッターは、閉じ波括弧がないルールの行とともに「この { は対応する } で閉じられていません」と報告します。
よくある質問
このツールで圧縮したCSSは本番環境で安全に使えますか？
CSSが無視するコメントと空白のみを削除するため、ルールの動作は変わりません。ルールの統合や色の短縮など、ビルドツールが行う深い最適化は行わないため、結果はそれらより少し大きくなることがあります。
「a :focus」に空白が残るのはなぜですか？
セレクター内の空白は子孫結合子です。「a :focus」はリンク内のフォーカスされた要素を意味し、「a:focus」はフォーカスされたリンクを意味します。この空白を削除すると、一致する要素が変わります。
SCSSやLessを整形できますか？
通常のネストされたルールは正しく整形されます。// コメント、引数付きミックスイン、@if ブロックなどのプリプロセッサ専用構文は認識されないため、整形が不自然になる場合があります。結果を確認してください。
圧縮時にライセンスコメントは削除されますか？
/*! で始まるコメントは保持されます。これはライセンスや著作権表示の一般的な慣例です。その他のコメントはすべて削除されます。
プライバシー
お使いのCSSはブラウザ内でのみ処理されます。アップロード、保存、アクセス解析への利用は一切ありません。