CSSフォーマッター：CSSを無料で整形・圧縮 | オンラインツール

A いいえ、当ツールは空白、インデント、改行のみを調整します。プロパティ名、値、セレクタなどの機能部分は一切変更しません。不安な場合はフォーマット前後で差分を確認してみてください。3,000行以上のファイルでも問題なく動作することを確認済みです。元のファイルは必ずバックアップしておくことをおすすめします。

A SassやLessからコンパイルされたCSS出力であれば、このツールで整形できます。変数やネスト、ミックスインを含む生のプリプロセッサ構文は有効なCSSではないため、正しく整形されません。APIから生成されたスタイルシートを扱うバックエンド開発者にも便利です。まずコンパイルしてから、そのCSSをここに貼り付けてください。300行のコンパイル済みコードでテスト済みです。生の.scssファイルは避けてくださいね。

A いいえ、このフォーマッターは壊れたCSSを直しません。セミコロン不足や括弧の閉じ忘れがあると、出力が乱れるか何も表示されません。まずCSSバリデーターでコードをチェックしてから使ってください。構文が正しくなったら、ここに貼って整形してください。フォーマットは最終仕上げであり、エラーチェッカーではありません。

A フォーマットはインデントとスペースを整えるだけで、構文エラーは修正しません。波括弧の閉じ忘れや、'color'を'colour'と書いてもツールは検出しません。W3C CSS Validatorで先にチェックしてください。私はセミコロン欠落でレイアウトが崩れ、20分も無駄にした経験があります。バリデーションは整形よりも先に行いましょう。

A 厳密な制限はありませんが、2〜3MBを超えるファイルではブラウザが重くなり始めます。5,000行のスタイルシートを貼り付けると少し待たされますが、それでも動作します。大きなファイルは分割してフォーマットするのがおすすめです。変更を確認しやすくなります。1MBを超えるCSSなら、先にミニファイしてください。データ量が減り、フォーマッターの処理も速くなります。

A 乱雑なCSSをこのツールに貼り付けて、出力が宣言を並べ替え、ネストしたセレクタをインデントする様子を観察してください。2スペースのインデントを選び、全てのプロジェクトでそれに従いましょう。「正しい」スタイルは存在しませんが、一貫性は選択そのものより重要です。Gitにコミットする前にコードをフォーマットする習慣をつけてください。チームメイトが読みやすいdiffをレビューできます。どんなスタイルガイドよりも速く目が鍛えられます。

A いいえ、カスタムプロパティは完全にそのまま残ります。フォーマッターが触るのは空白、インデント、改行だけです。`--main-color: #ff6600;` のような値は、書いた通りの状態を保ちます。私自身、200以上のCSS変数を含むファイルをフォーマットし、diffツールで差分を確認しましたが、機能的な変更はゼロでした。注意点が1つ：`--x: 1px solid red` のように意図的に複数スペースを使う場合、その構造は保持されます。スペースを詰めると値が壊れる可能性があるため、あえてその仕様にしています。安心して使ってください。

A はい、むしろそれが一番映えます。検証ツールはスタイルを改行もインデントもない1行にまとめてコピーします。それをここに貼り付けて「2スペース」を選べば、40個のルールが1秒以内に読みやすいブロックへ変わります。ただし検証ツールは`-webkit-`などのベンダープレフィックスやインラインスタイルを勝手に付けることがあります。コミット前に削除してください。デバッグには最適、本番コードには不向きです。

A GitHubやCodePenから無料のスターターテンプレートをダウンロードして、このツールで試してみてください。500行のBootstrapコードを貼り付けて、インデントの処理を確認しましょう。サイトを一から作らなくても、実際のプロダクションファイルで動作テストができます。テスト用にいくつかのリポジトリをブックマークしておくと便利です。

A いいえ、ミニファイアーはファイルサイズを縮小するためにコメントを完全に削除します。一度削除されたデータはコード内に存在しないため、ツールで復元することはできません。メモは手動で書き直す必要があります。元の非圧縮ファイルはリポジトリに保存しておきましょう。