データ

CSS フォーマッター

圧縮されたり手で詰め込まれたりした CSS は、たいてい一本の長い行になります。インデントもなく、ルール間の空きもなく、宣言が端から端までびっしり並びます。ブラウザーでは動きますが、読むことも、レビューすることも、編集することもできません。この整形ツールはその文字の塊を、スタイルシート本来の姿に並べ直します。宣言は 1 行に 1 つ、インデントは一貫し、ルールの間には空行が入ります。先に CSS を本物の構文木へ解析するので、描画結果はそのままで、変わるのは体裁だけです。インデントの種類を選べて、すべてブラウザー内で完結します。

  • 一行や圧縮済みの CSS を、宣言 1 行ずつ・インデント一貫の読めるスタイルシートに戻す
  • 本物の構文木から整形するので、セレクター・値・at ルール・描画結果はそのまま
  • インデントは 2 スペース・4 スペース・タブから選んでプロジェクトの流儀に合わせられる
  • 完全にブラウザー内で動作し、ベンダー CSS・受託案件・未公開のものも端末から出ない
工具/CSS フォーマッター
整形エンジンを読み込み中
8%
Prettier エンジンは一度だけのダウンロードで、この訪問の間はキャッシュされます。
インデント

概要

自分が書いていないスタイルシートや、ビルドで潰されたスタイルシートを読むには、まず目で追える形に戻すことから始まります。このツールは CSS の意味を勝手に解釈し直すことなく、それを行います。

  1. 01

    パーサーベースの再整形

    CSS はいったん構文木に読み込まれてから書き出されるので、ツールはセレクター・宣言ブロック・at ルールを理解しており、改行を当て推量しません。構文木から出た整形が、値を静かに壊したりルールを落としたりすることはありません。

  2. 02

    一貫して予測できるレイアウト

    宣言はそれぞれ 1 行に収まり、ネストは終始同じインデントで、ルールは空行で区切られます。同じ入力は常に同じ出力になるため、コミットや diff に耐える安定した結果です。

  3. 03

    インデントは好みで

    2 スペース・4 スペース・タブを選び、ネストをチームの期待どおりに読めるようにします。すべてのブロックを一括で折りたたみ・展開でき、結果を見ながら折り返しの切り替えも可能です。

  4. 04

    at ルールと最新 CSS を理解

    メディアクエリ・コンテナクエリ・supports ブロック・キーフレーム・カスタムプロパティ・ネストはすべて、プレーンテキスト扱いではなく正しいインデントで並びます。

  5. 05

    行数とバイト数

    出力パネルには整形後のスタイルシートが何行に展開され、どれくらいの大きさかが表示され、元がどれだけ密だったか一目で分かります。

  6. 06

    コピー・ダウンロード・アップロード

    クリップボードから貼り付け、ディスクから .css ファイルを開き、整った結果をコピーしたり保存したりできます。一連の流れは端末内で完結し、サーバーには触れません。

使い方

読めない CSS の塊を、整った一貫インデントのスタイルシートに数ステップで変えます。

  1. 01

    圧縮された、または雑然とした CSS を入力パネルに貼り付けるか、「アップロード」で .css ファイルを開きます。

  2. 02

    インデントの種類を選び、流儀に合えばシングルクォートをオンにします。

  3. 03

    右側で整形された CSS を確認します。宣言は 1 行ずつ、ルールの間は空き、オプションの調整に合わせて更新されます。

  4. 04

    結果をコピーするか .css ファイルとしてダウンロードし、エディターに入れて読む・レビューする・作業を続けます。

詳細

整形結果を信頼でき、扱いやすくする細部です。

  • Prettier をベースに、改行位置を推測するのではなく解析済みの表現から再整形します。
  • 入力やオプションの変更に合わせて即座に整形され、結果を見るのにボタンを押す必要はありません。
  • 構文エラーはその場でメッセージとともに表示され、半端な整形や空の出力にはなりません。
  • 入力も整形結果も完全な CSS シンタックスハイライト付きで、ライト・ダーク両テーマに対応します。
  • アップロードもログもありません。貼り付けた CSS はブラウザー内に留まり、タブを閉じれば消えます。

活用シーン

密な CSS を読める形に戻すことが効いてくる場面です。

  1. 圧縮スタイルシートを読む

    スタイルシートの唯一の控えが本番や CDN 上の圧縮ファイルだけのとき、ここで整形すれば、ルールとセレクターが実際にどう構成されているか分かります。

  2. ベンダーや生成 CSS のレビュー

    フレームワーク・CSS-in-JS ツール・サードパーティのウィジェットの出力は潰されて配信されがちです。整形して初めて、コードレビューや監査が可能になります。

  3. 詳細度や上書きの不具合を調べる

    並んだ CSS なら、重複したセレクター・置き場所を誤った宣言・静かに上書きしている at ルールをはるかに見つけやすくなります。

  4. きれいな diff を作る

    スタイルシートの 2 つの版を同じように整形すれば、diff ツールは空白ノイズに埋もれず、本当の変更を見せてくれます。

  5. 貼り付けた CSS を整える

    ドキュメント・ネットの回答・チャットからコピーした断片は空白の流儀がバラバラです。一度通せば、あなたのインデントの流儀に揃います。

  6. 教材や例を共有する

    一貫して整形されたスタイルシートは、チュートリアル・コードコメント・プルリクエストで、場当たりな空白のものより説明しやすくなります。

関連情報

読むのではなく配信する番なら、CSS 圧縮 が同じ CSS を逆向きに圧縮します。スクリプトにはJavaScript フォーマッター が JavaScript を同じように読みやすく整えます。

整形と圧縮

整形と圧縮は同じ考えを逆向きにしたものです。どちらもブラウザーが無視する文字だけを扱い、意味は変えません。一方は CSS を読みやすくする空白を足し、もう一方はそれを取り除きます。

  1. 整形は可逆で安全

    インデントや改行、空白を足しても、ページの描画は何も変わりません。ブラウザーは 1 行も 40 行も同一とみなすので、整形は人のための見た目の変更であって、スタイルの書き換えではありません。

  2. 圧縮された CSS が読めない理由

    ビルドはバイトを節約するため任意の空白と改行をすべて取り除きます。配信には理想的ですが、セレクター・そのブロック・次のルールが視覚的な境目なくつながった一行が残ります。

  3. 「逆圧縮」ではない

    整形が戻すのはレイアウトであって、元のソースではありません。圧縮が剥ぎ取ったコメントは戻らず、統合・並べ替えされたルールはそのままです。得られるのは読める CSS であって、作者が書いた内容のバイト単位の複製ではありません。

  4. 設計上べき等

    整形済みの CSS を再び整形しても、まったく同じテキストになります。出力が決定的なので、保存ごとやコミットフックで実行しても、ノイズだけの差分を生みません。

  5. 標準 CSS のみ

    整形するのはプレーンな CSS です。Sass や Less などのプリプロセッサ構文は先にコンパイルする必要があります。パーサーはブラウザーが実際に受け取る CSS を前提とするためです。

  6. 読み・レビューのためのツール

    狙いは理解です。潰された、または見慣れないスタイルシートを、走り読み・diff・推論しやすくします。配信にはやはり圧縮を使い、それがこの工程の鏡像です。

使い方のヒント

CSS の整形を活かしきる習慣です。

  • 整形ツールは読みとレビューに使い、読める元ソースがあるときはそれを正とします。
  • プロジェクトごとにインデントの種類を 1 つに決めて守れば、整形済みファイル同士がきれいに diff できます。
  • 整形はコメントを取り戻したり、圧縮が統合したルールを元に戻したりはしないことを忘れずに。戻すのはレイアウトであって元ソースではありません。
  • 自分のコードベースには、エディターやコミットフックに整形を組み込めば、毎回手で貼らなくてもファイルが揃います。
  • Sass や Less は整形前にプレーンな CSS へコンパイルします。プリプロセッサ専用の構文は、それ単体では正しい CSS ではありません。

制限事項

このツールがすること、他の工程に委ねることです。

  • 標準 CSS の 1 ブロックを再整形します。import のバンドル・URL の解決・ベンダープレフィックスの付与は行いません。
  • 戻すのはレイアウトで、失われた情報ではありません。圧縮で取り除かれたコメントや構造は戻りません。
  • Sass・Less・Stylus などのプリプロセッサのソースは先に CSS へコンパイルが必要です。ここでは標準 CSS のみ解析できます。
  • 構文エラーは整形を止めて報告されるので、大きく壊れた入力が静かに半端な出力を出すことはありません。

よくある質問

CSS の整形と、いつ使うかについてのよくある質問です。

整形すると CSS の描画は変わりますか？

いいえ。ブラウザーが無視する空白と改行、つまりインデント・ルール間の空き・宣言 1 行ずつを足すだけです。セレクター・値・at ルールはそのままなので、ページの描画は前後でまったく同じです。

圧縮を完全に元へ戻せますか？

戻せるのはレイアウトであって情報ではありません。整形は読める空白とインデントを復元しますが、圧縮が剥いだコメントは消えており、統合・並べ替えされたルールはそのままです。読んで追えるきれいな CSS にはなりますが、元ソースのバイト単位の複製ではありません。

どんなインデントの選択肢がありますか？

2 スペース・4 スペース・タブを選べます。シングルクォートのオプションは安全な範囲で文字列と url() のクォートを切り替え、結果を読むときはすべて折りたたみ・展開や折り返しの切り替えもできます。

ここで Sass・Less・SCSS を整形できますか？

直接はできません。本ツールはブラウザーが受け取る標準 CSS を整形します。Sass や Less は先に CSS へコンパイルしてから貼り付けるか、プリプロセッサ構文を理解する整形ツールを使ってください。

メディアクエリやカスタムプロパティは保たれますか？

はい。メディアクエリ・コンテナクエリ・supports ブロック・キーフレーム・カスタムプロパティ・ネストは正しく解析され並びます。構造はプレーンテキストではなく理解されるため、正しい CSS は整形後も変わりません。

CSS はどこかにアップロードされますか？

いいえ。すべてブラウザー内で動作します。貼り付けた CSS も開いたファイルもローカルで処理され、送信も保存もされず、タブを閉じれば消えるので、ベンダーのスタイルや未公開の作業も安全です。

関連ツール

データと変換のツールキットの続きへどうぞ。