CSSフォーマッター
このCSSフォーマッターで、圧縮されたスタイルシートや乱雑なスタイルシートを整形します。CSSを貼り付けると、解析して各ルールをセレクターごとに1行で出力します。宣言は1行につき1つとし、2つのスペースでインデントします。各コロンの後にはスペースを入れ、コンビネーターの間隔も整えます。メディアクエリなどのネストされたat-ruleにも対応します。解析エラーは報告されます。あらゆるソースのスタイルシートを読み、デバッグし、レビューするウェブ開発者やデザイナーに最適です。
よくある質問
CSSフォーマッターはどのように動作しますか？
スタイルシートをルール、宣言、at-ruleに解析し、一貫したレイアウトで再出力します。CSSを解析するため、出力にはスタイルシートの実際の構造が反映されます。
整形されたCSSはどのような見た目ですか？
各ルールはセレクターと開き波括弧で始まり、各宣言は2つのスペースでインデントして1行ずつ記述し、コロンの後にはスペースを入れ、閉じ波括弧は独立した行に置きます。セレクターのリストはカンマとスペースでつなぎ、> や ~ などの結合子の前後にはスペースを入れます。
メディアクエリやその他のアットルールにも対応していますか？
はい、@media、@supportsなどのブロック内のルールは、ネストしてインデントされます。@importなどの文は1行にまとめられ、url()の値は引用符で囲まれます。
無効なCSSの場合はどうなりますか？
たとえば波括弧が欠けているなど、パーサーがスタイルシートを読み取れない場合、ツールは処理を停止し、行番号とともにパーサーのメッセージを表示します。報告された箇所を修正して、もう一度フォーマットしてください。
コメントは保持されますか？
はい、ルール間と宣言間のどちらのコメントも保持されます。各コメントは、周囲のコードと同じインデントで独立した行に配置されます。
カスタムプロパティに対応していますか？
はい、--brand-colorなどのカスタムプロパティも、ほかの宣言と同じようにフォーマットされます。var(--brand-color)などの参照は、記述どおりに保持されます。
ここでSCSSやLessをフォーマットできますか？
いいえ、このページで扱えるのはプレーンなCSSのみです。プリプロセッサーのネストされたルールや変数は受け付けられない場合があります。それらのファイルにはSCSS FormatterまたはLess Formatterをお使いください。
インデントや波括弧のスタイルを変更できますか？
いいえ、フォーマッターにオプションはなく、常に2つのスペースを使い、開き波括弧をセレクターと同じ行に配置します。これにより、すべてのスタイルシートで一貫した結果が得られます。
結果がcssのコードフェンスで囲まれているのはなぜですか？
出力はcssと指定されたMarkdownコードブロックとして返されるため、Markdownでシンタックスハイライトされます。.cssファイルに使うには、フェンスの間の行をコピーしてください。
スタイルシートのサイズ上限はどれくらいですか？
1回の実行につき最大5 MBです。これより大きい入力はメッセージとともに拒否されます。出力はCode FormatterのCSSオプションと同じです。