CSS 整形

コンパクトな CSS を読みやすいルール、セレクター、宣言にフォーマットします。

入力

出力

0 文字 0 行

スタイルシートを読みやすく、レビューしやすくする

CSS 整形は、コンパクトな CSS を読み取り可能なセレクター、宣言ブロック、プロパティ、および値に拡張します。 コピーされたスタイルのデバッグ、生成された CSS のレビュー、フレームワーク出力の検査、またはサンプルの準備に役立ちます。

カスケードセマンティクスではなく、レイアウトを美しく変更します。セレクターの順序、重複した宣言、カスタムプロパティ、コメント、メディアクエリ、およびレイヤーの順序は、最終的なスタイルに影響を与える可能性があるため、そのままにしておく必要があります。

使い方

CSS コードを入力エディターに貼り付けます。
「CSS を整形」をクリックして、ルールと宣言をリフローします。
保存されたセレクターの順序、コメント、および at-rules の出力を確認します。
クリップボードには コピー、ファイルには ダウンロード、リセットには クリア を使用します。

CSS ビューティファイヤーとは何ですか?

CSS 整形 は、スタイルシートをスキャンしやすくするためのブラウザベースのユーティリティです。ルールブロックと宣言が分離されているため、高密度の 1 行ファイルを読み取らなくても、セレクター、プロパティ、値、および at-rules を検査できます。

CSS の動作は、カスケード順序、特異性、継承、レイヤー、およびカスタムプロパティの解決によって異なります。書式設定では、ルールや宣言を並べ替えてはなりません。ブラウザでの重要なスタイルシートの変更を確認します。

入力に関する注意

@media、@supports、@layer などのアットルールを含む、CSS のみを貼り付けます。出力をプロジェクトにコピーし直すときは、セレクターと宣言の順序を変更しないでください。

例

各宣言を独自の行に配置すると、密集 CSS のスキャンが容易になります。

--- Minified Input ---
body{margin:0;padding:0;font-size:16px;}.container{max-width:1200px;}

--- Beautified Output ---
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  max-width: 1200px;
}

MCP 連携

MCP (Model Context Protocol) により、AI エージェントやアプリは Coding.Tools のユーティリティを発見し、変換、整形、ハッシュ、生成ワークフローで実行できます。

MCP ツール名: css-beautifier

MCP エンドポイント: https://coding.tools/mcp

まず tools/list を呼び出してください。各ツールには inputSchema、outputSchema、examples が含まれるため、AI エージェントやクライアントは推測せずに有効な引数を作成できます。

tools/call では、表示用の値は result.content[0].text、機械処理用の値は result.structuredContent を読みます。ツール単位の失敗は isError: true、プロトコル単位の失敗は JSON-RPC error を返します。

tools/call リクエスト例:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"css-beautifier","arguments":{"input":".button{color:white;background:#3366cc;padding:8px 12px;}"}}}'

ほとんどのテキストおよびデータツールは input 文字列と任意の options を受け取ります。ブラウザの画像 API が必要な画像ツールは発見用に公開され、必要に応じて Web UI へのリンクを返します。