0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
設定
CSS や SCSS のスタイルシートを一貫したインデントでフォーマットおよび整理します。インデントや行幅のオプションを設定し、コードをエディタに貼り付けて フォーマット してください。
ソースコード
ライン:0キャラクター:0

仕組み

圧縮されたり整形が崩れたりした CSS や SCSS のスタイルシートをインデントし直して整え、読みやすくします。圧縮されたスタイルを調べたり、他者の CSS を確認したり、保存前に書式を統一したりするのに役立ちます。

インデントの種類(スペースまたはタブ)、インデント幅、改行コードを選べます。各宣言はそれぞれの行になり、カンマ区切りのセレクターは別々の行に配置されます。

処理はすべて js-beautify を使ってブラウザー内でローカルに行われます。整えるのは見た目で、圧縮・プロパティの並べ替え・ルールの正しさの検証は行いません。

a,b{color:red;margin:0}a, b { color: red; margin: 0 }セレクターは行ごとに分けられ、各プロパティがインデントされます。

ユースケース

  • サイトの圧縮された .css ファイルを読みやすくする。
  • コミット前にスタイルシートのインデントを統一する。
  • フレームワークやライブラリの CSS ルールを確認・比較する。
  • ドキュメントやジェネレーターから貼り付けた SCSS を整える。

よくある質問

SCSS や LESS でも使えますか?

CSS と、ネストされたルールを含む SCSS などの互換構文を整形します。SCSS や LESS を CSS にコンパイルすることはなく、インデントと改行を並べ替えるだけです。

プロパティを並べ替えたりグループ化したりしますか?

いいえ。セレクターと宣言の元の順序を保ちます。読みやすさのために、空白・インデント・改行だけを変更します。

CSS の圧縮と同じですか?

いいえ、逆です。整形は読みやすくするためにスペースや改行を追加し、圧縮はファイルサイズを減らすためにそれらを取り除きます。圧縮するには圧縮ツールを使ってください。

私のコードはサーバーにアップロードされますか?

いいえ。整形はすべてブラウザー内で行われ、CSSがコンピューターから外に出ることはありません。