CSSコード入力
CSSに/* コメント */や意図しない配列、完全ではないコード等を含めている場合、正常に処理されません
プロパティの並び順設定（現在460種に対応）
ドラッグ＆ドロップでプロパティの順序を変更できます
整形されたCSS
設定
プリセット管理
プリセット管理機能では、カスタマイズしたプロパティの並び順を保存して後で再利用することができます。お気に入りの並び順を設定したら、名前を付けて保存しましょう。
CSS整形ツールの使い方
1. CSSコードの入力
テキストエリアに直接CSSコードを貼り付けるか、CSSファイルをアップロードします。
- テキストエリアに手動でコードを入力または貼り付け
- 「ファイルをアップロード」ボタンをクリックしてCSSファイルを選択
- 不要になったら「クリア」ボタンで入力内容を消去
2. プロパティの並び順をカスタマイズ（オプション）
デフォルトでは一般的な並び順を採用していますが、こだわりがある場合は、「プロパティ順序」タブでカスタマイズできます。
- ドラッグ＆ドロップでプロパティを並べ替え
- 各プロパティの横にある上下矢印ボタンでも移動可能
- 左側のグループから特定のカテゴリのプロパティのみ表示
- プロパティにマウスオーバーすると簡単な説明と使用例を表示
3. CSSの処理
入力したCSSコードをカスタマイズした順序で整形します。
- 「CSSを処理」ボタンをクリックして整形を実行
- 大規模なCSSな場合、処理に時間がかかる可能性があります。その際はローディング画面が表示されますので完了までお待ちください。
- 処理が完了すると、自動的に「出力」タブに移動
4. 結果の取得
整形されたCSSコードを取得して利用します。
- 「コピー」ボタンでクリップボードにコードをコピー
- 「ダウンロード」ボタンでCSSファイルとして保存
- 出力されたコードはプロパティの順序のみが変更され、コメントや変数定義などの他の要素はそのまま保持されます
CSSに/* コメント */等、意図しないものが含まれている場合、正常に処理されません。出力されたコードはテスト環境で動作確認を行った上でのご使用を推奨します。
5. プリセットの活用（オプション）
カスタマイズしたプロパティ順序を保存して再利用できます。
- 「設定」タブでプリセット名を入力して「現在の並び順を保存」をクリック
- 次回使用時は保存したプリセットを選択して「読み込み」をクリック
- 不要になったプリセットは「削除」ボタンで削除可能
- 「設定をエクスポート」で設定をJSON形式でダウンロード
- 「設定をインポート」で他の環境から設定を読み込み
