ZenovayTools

CSSフォーマッター

CSSコードをフォーマットして整形します。ミニファイされたCSSを展開し、インデントを修正し、空白を正規化し、プロパティをオプションで並べ替えることができます。

CSSフォーマッターの使い方

  1. 1CSSコードをエディターに貼り付けます。
  2. 2インデントサイズを選択します（2または4スペース）。
  3. 3一貫性のためにオプションのプロパティ並べ替えを有効にします。
  4. 4フォーマットされたCSSの出力をコピーします。
Zenovayアナリティクス

創業者のためのアナリティクス。

  • リアルタイムの訪問者トラッキング
  • プライバシーファースト、クッキーバナーなし
  • 2分でセットアップ
Zenovayを見る

関連ツール

JSON フォーマッター & バリデーター
JSON データをフォーマット、検証、美しく整えます。構文強調表示とエラー検出が可能です。
JWT デコーダー
JWTトークンをデコードして検査します。ヘッダー、ペイロード、署名を表示します。
Base64 エンコード/デコード
テキストを Base64 にエンコードするか、Base64 をテキストにデコードします。UTF-8 およびバイナリデータに対応しています。
URLエンコード/デコード
URLコンポーネントをエンコードまたはデコードします。特殊文字、クエリ文字列、完全なURLを処理できます。

よくある質問

CSSフォーマッターは何をしますか？▾
フォーマッターは、ミニファイされた、または一貫性のないフォーマットのCSSを取り、一貫したインデント、改行、スペーシングで書き直します。各セレクターブロックは開き括弧を同じ行に取得し、各プロパティは末尾のセミコロン付きで独自の行に、閉じ括弧は独自の行にあります。アットルール（@media、@keyframes、@supports）はネストされたフォーマットで処理されます。出力は即座に読みやすく、diffに適しています。
どのCSS機能がサポートされていますか？▾
標準的なCSSプロパティと値、疑似クラス（:hover、:focus、:nth-child）、疑似要素（::before、::after）、属性セレクター（[type="text"]）、ネストされたアットルール（@media、@supports、@keyframes、@layer、@container）、複数のセレクター（カンマで区切られた）、カスタムプロパティ（--var-name）、モダンCSS関数（clamp()、calc()、var()）。CSSコメント（/* ... */）は保持されます。
プロパティソートとは何ですか？▾
プロパティソートが有効な場合、各ルールブロック内のCSSプロパティはアルファベット順にソートされます。これにより、スタイルシートをスキャンしやすくなり（「background」は常に「color」の前に来ることを知っている）、コードレビューでプロパティの順序についての議論を排除し、プロパティが追加されたときにより一貫したdiffを生成します。Stylelintの「order」プラグインなどのツールは、これを自動的に強制します。
フォーマッターはCSS値を変更しますか？▾
いいえ。空白とインデントのみが変更されます。プロパティ名、値、セレクター、アットルール条件はそのまま保持されます。フォーマッターは色を正規化したり、ベンダープリフィックスを追加したり、短縮プロパティを書き直したりはしません。これは純粋な外観上のリフォーマッターであり、プリプロセッサーではありません。
ワークフローでCSSをフォーマットするにはどうしますか？▾
チームワークフローでは、Prettierとcssプラグイン（prettier --write *.css）またはStylelintと--fixフラグを使用します。どちらもVS Code、ESLint、CIパイプラインと統合します。ツールチェーンセットアップなしでワンタイムフォーマットを行う場合は、このオンラインフォーマッターを使用します。PostCSSユーザーの場合、postcss-prettifyプラグインはプログラムでCSSをフォーマットできます。