CSSフォーマッター
構文ハイライト付きでCSSをフォーマット・整形
CSS入力
フォーマット済みCSS
CSSフォーマットの例
ミニファイされたCSSは読みにくいです。フォーマットでインデントと改行を追加します。例：
コンテナとボタンのスタイル
ミニファイ入力：
フォーマット出力：
上のサンプルをクリックしてミニファイされたCSSをエディターに読み込みます。
CSSフォーマッターとは？
CSS（Cascading Style Sheets）はすべてのウェブサイトをスタイリングします。ミニファイされたまたはフォーマットの悪いCSSは読みにくくデバッグも困難です。CSSフォーマッターは生のまたはミニファイされたCSSにインデントと改行を追加し、セレクター、プロパティ、ネストを明確に表示します。W3C CSS仕様が言語を定義しています。
このツールはCSSをパースして一貫したインデントで再フォーマットします。完全にブラウザ内で動作します。サーバーには何も送信されないため、本番スタイルシートに安全に使用できます。CSSのミニファイにはCSSミニファイアーを、検証にはCSSバリデーターを使用してください。
このツールの使い方
貼り付けまたはアップロード
CSSをコピーして左のエディターに貼り付けます。アップロードをクリックして.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なCSSはエラーを表示します。
出力を確認
右のパネルは自動更新されます。有効なCSSは適切なインデントでフォーマットされます。<strong>ミニファイ</strong>で空白を削除し本番用のコンパクト版を取得できます。
フォーマッターの仕組み
ツールはCSSをパースして一貫したインデントで再フォーマットします。セレクター、プロパティ、ルールが検出され、括弧とセミコロンは保持されます。W3C CSS仕様が言語を定義しています。フォーマットは可読性のため改行とスペースを追加しますが、動作は変わりません。@media、@keyframes、@importなどのアットルールに対応しています。処理はブラウザ内で行われ、サーバーには何も送信されません。
Vite、Webpack、ParcelなどのビルドツールはミニファイされたCSSを出力することが多いです。その出力をここに貼り付けると読みやすくなります。SCSSやLessのソースの場合は、まずSCSSをCSSにまたはLessをCSSにでコンパイルしてからフォーマットしてください。
CSSフォーマットが役立つ場面
多くの開発者は本番サイトのスタイルを確認するとき、サードパーティのCSSをデバッグするとき、ビルドツールのミニファイ出力をレビューするときにフォーマッターが必要です。圧縮されたCSSをここに貼り付けるとセレクターとルールがすぐに見えます。BootstrapやTailwindのコンパイル出力はミニファイされていることが多く、フォーマットで構造が分かります。
チームとスタイルを共有する前やプルリクエストのレビュー前にもフォーマットが役立ちます。ベンダープレフィックスを追加するにはCSSプレフィクサーを、インラインスタイル（例：メール）への変換にはCSSをインラインにを、検証にはCSSバリデーターを使用してください。
よくある質問
データはプライベートですか？
はい。フォーマットは完全にブラウザ内で行われます。データはサーバーに送信されません。ブラウザのネットワークタブで確認できます。
SCSSやLessに対応していますか？
このツールはプレーンCSSをフォーマットします。SCSSやLessの場合は、まずSCSSをCSSにまたはLessをCSSにでコンパイルしてからフォーマットしてください。
ミニファイは何をしますか？
フォーマット済み出力から空白、改行、コメントを削除し、本番用の最小版を生成します。CSSミニファイアーの専用ページもあります。
コメントは保持されますか？
フォーマットはコメントを保持します。ミニファイではミニファイアーによってコメントが削除される場合があります。本番使用前に出力を確認してください。
CSSカスタムプロパティは？
CSS変数（--var-name）に対応しています。フォーマッターはカスタムプロパティ、@media、@keyframesを含むモダンなCSS構文を処理します。