CSS フォーマットツール

CSS入力

インデントサイズ：

出力結果

行数: 1文字数: 0バイト数: 0

行数: 1文字数: 0

CSSフォーマットとは？

CSSフォーマットは、乱雑なCSSコードを規範的で読みやすいフォーマットに整理するプロセスです。良好なCSSフォーマットはコードの保守性を向上させ、チームコラボレーションを容易にし、スタイル問題を素早く特定できます。フォーマットには、統一インデント、プロパティ整列、適切な改行、セレクター最適化などが含まれます。圧縮はすべての空白とコメントを削除し、ファイルサイズを大幅に削減し、ページ読み込み速度を向上させます。

使い方

左側の入力ボックスに CSS コードを貼り付けるか入力
インデントサイズとフォーマットスタイルを選択
「フォーマット」でコードを整形、「圧縮」でサイズを縮小
右側にシンタックスハイライト付きで結果を表示
「コピー」をクリックしてクリップボードにコピー

フォーマットスタイルオプション

展開形式各プロパティを 1 行ずつ表示し、開発やデバッグに適しています

コンパクト形式セレクタとプロパティを 1 行にまとめ、素早く閲覧できる形式

キーボードショートカット

Ctrl + Enterフォーマット
Ctrl + Shift + C結果をコピー

フォーマットのヒント

フォーマットは空白やレイアウトを変更するものであり、セレクタの動作は変わりません。複雑なカスケードやメディアクエリのコードを編集した後は、必ずテストしてください。
ミニファイは配信や埋め込みに使う場合のみ行ってください。レビューや保守のために読みやすいソースは別に残しておきましょう。

利用シーン

圧縮されたCSSを読みやすいルールに変換するバンドルやCMSフィールド、ブラウザのDevTools、メールテンプレートから取得したCSSを貼り付け、2スペース・4スペース・タブでフォーマットします。セレクターや宣言、ネストされたメディアクエリブロックが見やすくなるだけでなく、ルール順序も監査可能になり、カスケードの上書きや予期しないメディアクエリの追跡に役立ちます。

編集したCSSをミニファイして軽量な引き渡し用にするスニペットを編集した後、ミニファイモードに切り替えてコメントや不要な空白を除去し、結果をコピーまたはダウンロードしてメールテンプレートやCodePenプロトタイプ、静的ページに素早く埋め込みます。読みやすいバージョンを先にフォーマットしてどのセレクターが変更されたか明確にしておき、stylelintやプロジェクトリンターでミニファイ結果を検証しましょう。ミニファイではセレクターの特異度や重複プロパティ、意図しないカスケード上書きはチェックされません。

スニペット用途として利用し、完全なCSS解析とは考えないフォーマッターはブラウザ上の軽量な実装で、引用符付き文字列やurl()の内容、コメントを宣言内で保持しますが、ベンダー構文やソースマップ、リント、本番ビルドの検証を担うPostCSSパイプラインの代替にはなりません。SassやLess、CSS ModulesをまずプレーンCSSにコンパイルしてから、レビュー用にこのツールに通しましょう。本番チェックにはstylelintやPurgeCSS、CSS監査ツールを使用してください。

ベンダープレフィックスやプリプロセッサー出力を正規化するSassやLess、PostCSSからコンパイルされた出力をフォーマットし、-webkit-、-moz-、-ms-プレフィックスを揃え、メディアクエリのカスケード順序をコードレビュー中に一目で確認できるようにします。展開されたブロックでは@supportsや@containerルールのネストも把握しやすくなり、カスケードの優先度の監査に役立ちます。

プロジェクトのスタイルガイドに合わせたインデント幅を選択する2スペース・4スペース・タブを事前に選んでおくことで、フォーマット済みスニペットをリント処理なしでそのままリポジトリに投入できます。共有のデザインシステムファイルに貼り付ける際に特に重要です。2スペースは深いネストでも読みやすく、タブは各開発者が自分の好みの幅に設定できます。

仕組み

CSS のフォーマットは完全なパースではなく、トークナイズ＋プリティプリントの問題です。仕様準拠の CSS パーサー（CSS Syntax Module Level 3、W3C Recommendation）はフォーマッターに必要なものよりも重く、スタイルルール、アットルール、宣言、コンポーネント値を持つ AST を構築し、パースのエッジケース（未終了の文字列、括弧の不一致、ベンダープレフィックス付きプロパティ）を解決します。このページではより軽量なトークナイザーを使用し、文字列ストリームを走査して同じトークンクラス（ident、at-keyword、hash、string、bad-string、number、dimension、percentage、url、function、punctuation、comment）を認識し、フラットなリストとして出力します。その後、プリティプリンターが選択されたインデント、括弧スタイル、空白ルールに基づいてトークンを再構成します。 CSS の 2 つの構造単位は、ルールブロック（selector { declarations }）とアットルールブロック（@media、@supports、@container、@keyframes が 1 つ以上のルールブロックを囲む）です。フォーマッターはトークンストリームを走査し、括弧の深さを追跡します：{ で深さを増加させ（改行とインデントが続く）、} で深さを減少させ（対応する { に合わせてインデントを縮小）。セレクターはそのまま出力されます。フォーマッターはセレクターをパースしません。なぜなら `.foo > .bar:hover:not(.baz)` のようなセレクターのパースは別の問題（CSS Selectors Level 4）だからです。セレクターはバイト単位で保持され、空白の正規化のみ行われます（複数のスペースを 1 つに縮約し、末尾の空白を除去）。圧縮された `.a,.b,.c` は `.a, .b, .c` に変換されます。宣言は選択されたスタイルでフォーマットされます：'expanded'（各プロパティを別行に、最も可読性が高い）、'compact'（ルールごとに 1 行、複数の宣言を詰め込む、本番 CSS で最も一般的）、'compressed'（圧縮、空白なし、最小の出力）。プロパティ名の後のコロンの後には常にスペース 1 つが入ります。値はいくつかの正規化を除いてそのまま出力されます（`0.500` の末尾ゼロを `.5` に、`0px` の単位を `0` に除去。古典的な CSS 圧縮の手法です）。圧縮は逆方向の処理です：コメントの除去、宣言内および宣言間の空白の縮約、ブロック内の最後の宣言の末尾セミコロンの削除（CSS 2.1 §4.1.7 で許容）、同じセレクターとメディコンテキストを持つ隣接ルールブロックのマージ、カラー値の正規化（`#ffffff` -> `#fff`、可能な場合は `rgb(255,255,255)` -> `#fff`）。モダンな圧縮ツール（cssnano、lightningcss、clean-css）は構造的な最適化も行います：ロングハンドからショートハンドへのマージ（`margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;` -> `margin: 1px;`）、ルール内の重複宣言の除去、どの要素にもマッチしないルールの除去（デッドコード除去パスでの `div:has-no-children { color: red; }`）。圧縮出力には標準変換を適用し、人間が読みやすい出力には選択されたインデントと括弧スタイルを適用します。 CSS Nesting Module（CSSWG、2023 年ドラフト、2024 年 Baseline）はネイティブのネストを導入します：`.a { color: red; & .b { color: blue; } }` はモダンブラウザ（Chrome 112+、Firefox 117+、Safari 16.5+）で有効な CSS です。2024 年以前のネストにはプリプロセッサーの書き換え（Sass の `&` や Less の `&` によるセレクターチェーン）が必要でした。このページは両方に対応します：プリプロセッサーネストされた CSS は SCSS/Less としてフォーマットされ（`&` を保持）、ネイティブネストされた CSS（`&` 不要）はルールブロックの走査でフォーマットされます。このページが処理するその他のアットルール：@keyframes と @counter-style はネストされたルールブロックではなく宣言のボディを取るため、異なるフォーマットになります（アットルール内の宣言、ネストされた括弧なし）。@media、@supports、@container、@layer はルールブロックのボディを取ります。@import、@charset、@namespace はトップレベル専用で、独自の行に出力されます。@property（登録済みカスタムプロパティ）は宣言ブロックを取ります。@font-face は複雑なセレクターなしの宣言を持つ単一のルールブロックです。ページは名前ではなく仕様で定義されたボディの形状に基づいて処理します。最もよくあるフォーマットの落とし穴は文字列リテラル内のコンテンツを壊すことです：`content: "hello world";`、`font-family: "Arial Black", sans-serif;`、`background: url("image.png")` — フォーマッターは文字列内のスペースを縮約してはならず、URL を `/` で分割してはならず、`/* ... */` 内のコメントテキストに触れてはなりません。文字列状態とコメント状態を正しく追跡するトークナイザーが、ユーザーのコンテンツを往復変換できるフォーマッターと壊すフォーマッターの違いです。このページのトークナイザーは手書きで、目視検証可能なほど小さなもので、本番フォーマッターは postcss や lightningcss を使用し、内部レキサーに同じ義務を負います。

字句解析（CSS Syntax Level 3）：文字列ストリームを走査し、ident / at-keyword / hash / string / number / dimension / percentage / url / function / punctuation / comment トークンを出力。文字列とコメントには状態があり、トークナイザーの不具合は `content: "hello world";` を壊す。
2 つの構造単位：ルールブロック（selector { declarations }）とアットルールブロック（@media、@supports、@container、@layer がルールブロックを囲む）。フォーマッターは括弧の深さを追跡し、各 { で新しいレベルにインデント。対応する } でレベルを縮小。
セレクターは空白を正規化してそのまま出力：`.a,.b,.c` -> `.a, .b, .c`。フォーマッターはセレクターをパースしない（CSS Selectors Level 4 は別の問題）。スペースとカンマのクリーンアップのみ。
出力スタイル：'expanded'（宣言ごとに 1 行、最も可読性が高い）、'compact'（ルールごとに 1 行、本番で一般的）、'compressed'（空白なし、圧縮済み）。プロパティ名の後のコロン＋スペースが唯一の共通フォーマットルール。
圧縮：コメント除去、空白縮約、末尾 `;` 削除、同一セレクタールールのマージ、`#ffffff` -> `#fff`、`0.500` -> `.5`、`0px` -> `0` への正規化。構造的マージ：ロングハンド -> ショートハンド（`margin-top: 1px; ... margin-left: 1px;` -> `margin: 1px;`）。
CSS Nesting（CSSWG 2023、Baseline 2024）：`.a { & .b { ... } }` は Chrome 112+、Firefox 117+、Safari 16.5+ でネイティブ CSS。2024 年以前のプリプロセッサーネスト（Sass `&`、Less）も有効。ページはルールブロック構造の走査で両方をフォーマット。
アットルールのボディ：@keyframes と @counter-style は宣言を取り、@media / @supports / @container / @layer はルールブロックを取り、@import / @charset / @namespace はトップレベル文、@property と @font-face は宣言ブロックを取る。ページは名前ではなく仕様で定義されたボディの形状で処理。
安全境界：文字列リテラル（content、フォント名、URL）とコメントテキストはすべての変換でそのまま保持。バイト単位の正確な往復変換が CSS フォーマッターの正しさのテスト。コンテンツ文字列を壊せばユーザーはすぐに気づく。

使用例

圧縮された CSS の整形

入力:  .btn{color:red;background:#fff;padding:8px 16px;border-radius:4px}
出力:
.btn {
  color: red;
  background: #fff;
  padding: 8px 16px;
  border-radius: 4px;
}

ネストされたルールの展開

入力:  .card{padding:16px}.card h2{margin:0 0 8px}.card p{color:#666}
出力:
.card {
  padding: 16px;
}
.card h2 {
  margin: 0 0 8px;
}
.card p {
  color: #666;
}

メディアクエリの整形

入力:  @media(max-width:768px){.nav{display:none}.menu{width:100%}}
出力:
@media (max-width: 768px) {
  .nav {
    display: none;
  }
  .menu {
    width: 100%;
  }
}

よくある質問

CSSフォーマッタは何をしますか？

CSSを読みやすいレイアウトに整形します。一貫したインデント、1宣言1行、コロン周りのスペース、1ルール1行などです。セレクタの詳細度やプロパティ値は変更せず、純粋に空白とブラケットの配置のみを調整します。

CSSの圧縮（minify）もできますか？

「minify」または「compress」トグルがあれば可能です。圧縮ではコメントと空白を削除し、HEXカラーを短縮し（#ffffff → #fff）、ルール内の最後の宣言の末尾セミコロンを削除します。逆方向（beautify）では読みやすさを復元します。

なぜ無効なCSSを修正してくれないのですか？

これはフォーマッタであり、バリデータではありません。括弧の不一致、欠落したセミコロン、認識されないプロパティはそのまま通過します。CSSリンター（Stylelint）を使用するか、ブラウザの開発者ツールにCSSを読み込ませて構文エラーを確認してください。

モダンCSS（ネスト、コンテナクエリ、カスタムプロパティ）に対応していますか？

ほとんどのビルドでは現行構文を理解するCSSパーサーを使用しており、@container、@supports、カスタムプロパティ（--var）、ネスト、@layerに対応しています。パーサーが古い場合、新しい構文では整形が崩れる可能性があるため、CSSを貼り付けて結果を確認してから使用してください。

コメントは保持されますか？

はい。/* ... */ ブロックコメントはフォーマッタによって保持されます。一部のminifierはデフォルトでコメントを削除するので、必要な場合はオフにしてください。単一行の // コメントは標準CSSではないため削除されることがあります（これらはCSSではなくSCSSで使われます）。

CSSはアップロードされますか？

いいえ。整形はJavaScriptのCSSパーサー/プリンタを使用してブラウザ内で行われます。貼り付けたCSSは送信されません。

インデントを設定できますか？

はい。通常、2スペース、4スペース、またはタブから選べます。プロジェクトの既存スタイルに合わせて選択してください。元の混在したインデントは選んだ値に正規化されます。