CSSフォーマッターは何をしますか？
Cascading Style Sheets（CSS）のコードをインデントして整形します。
ブラウザーツール
CSSフォーマッター
CSS Beautifyでコードを処理し、変換した出力を確認します。コードを入力し、処理オプションを選んで結果をコピーします。
ツールの作業領域
入力が必要入力はこのブラウザー内にとどまります。
続行するには必要な入力を追加してください。
結果はここに表示されます
続行するには必要な入力を完了してください。
直接回答
CSSフォーマッターの機能
CSSフォーマッターは開発用テキストを処理します。コピーする前に対象CSSの構文を確認します。
結果
得られるもの
読みやすい空白でインデントしたCSSルールを返します。処理はブラウザーで実行されます。
このツールを使う
CSSフォーマッターの使い方
- このツールにテキストまたはデータを指定します。
- 既定の書式オプションでCSS Beautifyを実行します。
- 小さく既知のCSSフォーマッター例と出力を比較します。
例
安全なサンプルで試す
入力: .card{color:red;margin:0 1rem}
設定: CSSフォーマッターで既定の書式オプションを使ってCSS Beautifyを実行します。
結果: 読みやすい空白でインデントしたCSSルールを返します。処理はブラウザーで実行されます。
この例はCSSフォーマッターの安全なテストを示します。
一般的な用途
CSSフォーマッターが役立つ場面
- 小さく代表的なサンプルでCSSフォーマッターを使います。
- 別の場所で使う前に、CSSフォーマッターの結果を確認します。
- 結果の確認が終わるまで、元のテキストまたはデータを保持します。
制限
結果を確認
- 書式設定はブラウザー互換性を検証しません。
- 対象CSSの構文確認が曖昧な場合、別の言語を推測できません。
- CSSフォーマッターの処理はブラウザー内に残ります。