コード整形ツール

CSS Formatter

CSSのセレクター、宣言、メディアクエリ、キーフレーム、カスタムプロパティを整形します。

Ctrl / ⌘ + Enterで実行
読み取り専用の結果

CSSのセレクター、宣言、メディアクエリ、キーフレーム、カスタムプロパティを整形します。

このツールでできること

CSS Formatter は、Prettier の PostCSS 解析プラグインを介してルール、宣言、および at-rules を理解します。単純な文字置換では中括弧を処理しないため、文字列、コメント、calc()、およびカスタム プロパティ値を区別できます。

  • 一般的な最新 CSS、メディア クエリ、キーフレームをサポートします。
  • テキストの書式設定のみを行い、現在のページにスタイルを挿入しません。
  • 無効な構文ではパーサー エラーが表示されます。

使い方

  1. CSSを貼り付けます。
  2. インデントの幅を選択します。
  3. 「CSSのフォーマット」をクリックします。
  4. formatted.css をコピーまたはダウンロードします。

主な用途

  • 単一行または読みにくいスタイルシートをクリーンアップします。
  • チームのコード スニペットの形式を統一します。
  • ネストされたメディア クエリとアニメーション構造を観察するのに役立ちます。

CSS Formatterの機能

CSS セレクター、宣言、メディア クエリ、キーフレーム、カスタム プロパティを解析して美化します。日常的な開発、デバッグ、データの並べ替え、コードの最適化のシナリオに適しています。処理結果を直接閲覧、コピー、ダウンロードすることができます。

FAQ

カスタム プロパティは間違って分割されますか?

パーサーは CSS 宣言コンテキストを理解し、一般的な --custom-property 値を正しく処理します。

書式を設定するとセレクターの効果が変わりますか?

目標はレイアウトのみを変更することです。ただし、自動ツールを使用して処理する前に、ソース ファイルを保持し、プロジェクトをテストすることをお勧めします。

このページに CSS が適用されますか?

いいえ、入力と出力の両方がテキスト ボックス内に残ります。

開発者向けツール一覧に戻る