Utilore

CSS 整形

1 行にまとめられたスタイルシートでも、貼り付ければまた読めるようになります。宣言ごとに行を分け、入れ子のブロックには相応の字下げを付け、コメントは元の位置に残します。

コードはこのページから出ません。整形はブラウザ内で行われます。

使い方

  1. 最初の欄に CSS を貼り付けます。
  2. インデントを選びます。スペース 2 つ、4 つ、またはタブです。
  3. 結果をコピーします。「圧縮」を押せば再び詰められます。

知っておくと便利

素朴な整形がスタイルシートを壊す理由

セミコロンと波かっこのたびに切る方法は、うまく動くように見えます。ところが content: "a;b" や、url() の中に SVG を収めたデータ URI が現れた途端に破綻します。どちらも実際の CSS ではありふれた書き方です。このツールは 1 文字ずつ読み進めるので、引用符の中の文字列やコメントは最初の記号で切られず、ひとまとまりのまま運ばれます。

役に立つ入れ子表示

メディアクエリ、supports ブロック、最近の入れ子規則は、それぞれ 1 段深くなり、字下げもそれに従います。最上位の規則のあいだには空行を入れるので、2000 行のスタイルシートも文字の壁ではなくブロックの一覧として読めます。

よくある質問

コメントは残りますか。

残ります。単独のコメントは独立した行に、宣言のうしろに付いたコメントはその宣言と一緒に置かれます。

CSS の内容は変わりますか。

プロパティの名前変更も並べ替えも削除も行いません。動くのは空白だけで、動作は以前とまったく同じです。

コードはサーバーに送られますか。

送られません。すべてブラウザ内で動くため、秘密保持契約下のスタイルシートも端末に残ります。

SCSS や LESS はどうですか。

入れ子規則やコメントはきれいに整形されます。変数・ミックスイン・制御構文は解釈せず、そのまま通します。

関連ツール