CSS整形
1行に1宣言。あるいは全部で1行。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
出力
上に貼り付けるか入力すると、ここに結果が表示されます。
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
例：1行に詰まったお知らせ欄のCSSを読める形に直し、修正後にまた1行に戻す
社内サイトのお知らせ一覧に使われているCSSが、圧縮されて1行（209文字）になっています。日付の色を少し濃くしたいので、まず整形して読み、直してから圧縮して戻します。設定は「整形する」「スペース2つ」。
- 貼り付けると、セレクタと宣言が1行ずつに分かれ、ルールのあいだに空行が入って21行になります。@media の中のルールは、もう1段インデントされます。
- content: "【お知らせ】" のような文字列の中身は、全角の記号も含めてそのままです。
- .news-list .date の color: #666; を #555 に直し、先頭に /* お知らせ一覧（2026年11月 改修） */ とコメントを足します（296文字）。
- 「圧縮する」に切り替えると、コメントと改行・インデントが消えて1行209文字に戻ります。.news-list li のような子孫セレクタの空白は残ります。
| 操作 | 入力 | 結果 |
|---|---|---|
| 整形する（スペース2つ） | 1行・209文字 | 21行 |
| 整形する（タブ） | 1行・209文字 | 21行（インデントがタブ） |
| 圧縮する | 21行＋コメント・296文字 | 1行・209文字（コメントは消える） |
整形した21行で直したい箇所を見つけて直し、圧縮した1行をサイトに戻せます。プロパティの並び順や #555 のような値は変わりません。整えるだけで、書き直しはしません。
使い方
- CSSを貼り付けます。
- 整形すると、セレクタと宣言がそれぞれ1行になり、ルールの間に空行が入ります。
- 圧縮すると、コメントと無意味な空白がすべて消えます。
- 結果をコピーするか保存します。
よくある質問
- 文字列やurl()の中の波かっこはどうなりますか。
- そのままです。波かっこで分割する前に、引用符で囲んだ文字列・コメント・url() をひとかたまりとして読むので、content: "}" もルールが割れずに正しく整形されます。引用符なしの url(data:image/png;base64,…) も、中のセミコロンで行が分かれることはありません。
- 圧縮しても .a .b の空白は残りますか。
- 残ります。あれは子孫セレクタで意味があり、コロンや波かっこの前後の空白には意味がありません。意味のないものだけを取り除きます。
- セミコロンを書き忘れていたら。
- 問題ありません。ブロックの最後の宣言はセミコロンを省くことが多いので、出力時に補います。
- プロパティを並べ替えたり短くしたりしますか。
- しません。まとめも短縮も移動もせず、#ffffff は #ffffff のままです。これは書いたものを整えるだけで、書き直す道具ではありません。
- 整形するとき、@media の中はどうなりますか。
- @media のブロックの中のルールは、もう1段深くインデントされます。スペース2つなら、セレクタが2つ、宣言が4つ下がります。インデントはスペース2つ・スペース4つ・タブから選べ、どれを選んでも行数は同じです。
- 入力した内容はどこかに送られますか。
- いいえ。ブラウザの中で動くので、貼り付けた内容はお使いのパソコンから出ません。