🎨 CSSフォーマッター

CSSフォーマッターについて

このCSSフォーマッターはブラウザ内で完全に動作します。CSSを入力ボックスに貼り付け、インデントスタイルを選択し、フォーマットをクリックするだけで、きれいにインデントされた出力が得られます。通常のルール、ネストされたインデント付きの @media クエリ、@keyframes、コメントを処理します。サーバーへのアップロードは一切ありません——すべての処理はJavaScriptでローカルに行われます。

機能

• ルール —— 各ルールは selector { として独立した行に出力、プロパティは1レベルインデント、閉じ括弧は独立した行。
• @mediaクエリ —— @media 内のルールは視覚的な階層のために追加で1レベルインデント。
• @keyframes —— キーフレームのパーセンテージはプロパティのようにインデント。
• コメント —— /* ... */ ブロックコメントは独自の行に保持。
• スペーシング —— 各コロンの後に1スペース、各宣言の末尾にセミコロン。

使い方

1. CSSコンテンツを入力ボックスに貼り付け。
2. お好みのインデントスタイルを選択。
3. フォーマットをクリックしてCSSを整形。
4. コピーで結果をコピー、またはクリアでやり直し。

よくある質問

CSSはアップロードされますか？ いいえ。すべてのフォーマット処理はブラウザ内でローカルに行われます。スタイルはデバイスから離れません。

SCSSやLESSなどのプリプロセッサは？ このフォーマッターは純粋なCSSを対象としています。ネストと変数を含むSCSS/LESS構文は完璧にインデントされない場合がありますが、読みやすくなります。

既存のコメントは保持されますか？ はい、コメントは保持され、出力では独自の行に配置されます。

ベンダープレフィックス付きプロパティは処理されますか？ はい、-webkit-transform などのプロパティは他のプロパティと同様に通常インデントされます。