無料 CSS フォーマッター＆ビューティファイアー

CSSフォーマットとは?

CSS フォーマッタ("beautifier" や "pretty-printer" とも呼ばれる)は、すべての形の CSS、ミニファイされた本番出力から、ブラウザのインスペクタから貼り付けられた1行のフラグメント、一貫しないインデントで手書きされたスタイルシートまで、を取り、慣習的なインデント、改行、一貫したセレクターと宣言のフォーマットで再出力します。ブラウザの CSS パーサーは parse 段階で空白を無視するので、レンダリングされたページはソースの組版方法に関係なく同じに見えます。目的は純粋に人間の読みやすさです、インデントされた階層は @media ネストを可視にし、プロパティごとに1行は目がルール内の宣言を素早くスキャンできるようにし、リポジトリ全体で一貫したフォーマットは diff のレビューを高速化します。4つの実際のワークフロー:(1) ルールが適用されない理由を理解するために DevTools Inspector から貼り付けられた本番ミニファイ CSS をデバッグする;(2) ブラウザの「Computed」パネルから抽出された CSS を再フォーマットしてソースと比較する;(3) 別の慣習を使用する貢献者からのマージ後にチーム間のフォーマット差異を正規化する;(4) ソースが密集した行に劣化したコードレビュー用の CSS を準備する。

主要な CSS フォーマッタ

js-beautify(Einar Lielmanis、2007年から)は JavaScript エコシステムの歴史的なフォーマッタです、その CSS の半分が公開された beautifier.io のフロントエンドを動かし、歴史的に多数の「format CSS online」サイトを動かしてきました。Prettier(James Long、2017年1月、CSS サポートは2017年6月3日の v1.4 で追加)は、現代のフロントエンドエコシステムを支配するに至った「opinionated」フォーマッタです。Prettier の設計哲学は「ほぼ設定なし」、単一のインデントスタイル(デフォルトで2スペース)、単一の行幅ターゲット、予測可能な折り返しです。Prettier 拡張機能がインストールされている場合、VS Code の CSS のデフォルトフォーマッタです。Stylelint(David Clark + Maxime Thirouin、2015)はフォーマッタというよりリンターですが、--fix オプションを介して保存時フォーマットをサポートし、チーム内で CSS 規約を強制するための事実上の選択です、100 以上の組み込みルールが「重複セレクターなし」から「rgb() より hex を優先」、「単一引用符のみ」までをカバーします。clean-css(Jakub Pawlowicz、2011)は主にミニファイしますが、その逆を行う「beautify」モードがあります。4つすべてが最終的に PostCSS(Andrey Sitnik、2013年9月7日リリース)を介して CSS を渡します、現代の CSS エコシステムの大部分(Autoprefixer、cssnano、Tailwind の処理)を動かす普遍的な CSS パーサーです。2026年の現代プロジェクトには、保存時の Prettier がデフォルトです、このブラウザ内ツールはプロジェクトコンテキスト外のワンオフケース用です。

インデントとセレクターの慣習

2026年の CSS 慣習は2スペースインデントに強く傾いています、Prettier のデフォルト、Tailwind ソース、Bootstrap の Code Guide、Google CSS Style Guide、npm に公開されたほとんどの CSS パッケージのデフォルトです。古い4スペースの慣習は一部のレガシーコードベースに残ります。CSS では特にタブはまれです(JS/TS でより一般的)。セレクターについて:カンマ区切りのセレクターリストは慣習的に1行に1つ書かれ(.btn,<br>.btn-primary,<br>.btn-secondary {)、行を再フローせずにセレクターを追加または削除しやすくします。コンビネータ(>、+、~)は通常両側に1スペースを持ちます。pseudo-class チェーン(:hover:focus)はタイトに保ちます。普遍セレクター(*)と子孫コンビネータ(暗黙のスペース)はフォーマッタにとってニュートラルです。

宣言のフォーマット

1宣言1行が現代のデフォルトです、color: red; が独自の行に、padding: 10px; が次に。代替の「コンパクト」(同じ行に複数の宣言)は今日の本番 CSS でまれです、ほとんどのチームは読みやすさと清潔な diff のために1行ごとに切り替えました。コロンの後に1スペース:color: red; ではなく color:red;。最後の宣言の末尾セミコロン:CSS 仕様によって技術的にオプションですが、すべての現代のフォーマッタは diff にやさしくするために含めます、新しいプロパティの追加で前の行を変更する必要がありません。ルール間の空行:オプションでチーム依存。Prettier は特定のスタイルを強制するのではなく、入力に存在する空行を保持します。プロパティの引用:スペースを含むフォント名は引用が必要(font-family: "Helvetica Neue", sans-serif;)、URL は慣習的に引用される(url("image.png"))が引用なしも有効です。値の正規化:キーワードを小文字に(RED → red)、hex 短縮(#FFFFFF → #fff)、ゼロユニットの削除(0px → 0)、ほとんどはフォーマッタよりミニファイの仕事ですが、一部のフォーマッタは無損失なものを適用します。

CSS の特殊ケース

@media クエリは内部のルールを追加のインデントレベルでネストし、条件構造を視覚的に明白にします。@keyframes ブロックはパーセントルール(0% { ... }、100% { ... })を含み、同じようにネストします。@font-face 宣言には複数の src/format ペアがあり、1行ごとに恩恵を受けます。CSS カスタムプロパティ(--brand-color: #3b82f6;)は他の宣言と同じようにフォーマットされますが、プロパティ名はケースを保持します(カスタムプロパティ名はケース敏感、標準プロパティと異なります)。calc() 式は演算子の周りにスペースを要求します、calc(100% - 20px) は正しい、calc(100%-20px) は無効な CSS です。フォーマッタは calc() 内の必要なスペースを保持しながら周囲のコンテキストを正規化します。CSS Nesting(CSS Nesting Module Level 1、ベースライン2023+)、ネストされたルールが親の下にインデントできる比較的新しい機能、はフォーマッタがネストされた構文を扱う方法を変えました、現代の Prettier と Stylelint はネイティブ構文を理解します。

プロパティのソート、驚くほど議論される慣習

一部のチームは各ルール内のプロパティ順を強制します。3つの慣習が競合します。アルファベット順(このツールの「Sort properties」トグル):最も簡単、機械的に強制しやすい、「プロパティ X はここで既に宣言されているか?」を素早いスキャンに変えます。Google CSS Style Guide はベンダープレフィックスへの譲歩を伴うアルファベット順を推奨します。概念別(positioning → box → typography → visual → animation):関連プロパティをグループ化します。SMACSS アーキテクチャ本がこのアプローチを普及させました。タイプ別(display 最初、次に box、次に text、次にその他):より堅いグループ化を持つ「概念別」のバリアント。Stylelint の order/properties-order ルールは設定を介してこれらのいずれかをサポートします。3つのいずれもレンダリングを改善しません、選択はルールをスキャンするときに見つけやすいメンタルモデルに純粋に依存します。このツールはオプションとしてアルファベット順ソートを提供します、他の慣習には実際のプロジェクトの Stylelint 設定ファイルが必要です。

現代の CSS パイプライン

ビルドパイプラインを持つプロジェクトには、2026年のデフォルトはエディタで保存時に実行される Prettier と、Husky + lint-staged を介して各コミットで Stylelint です。VS Code は拡張機能がインストールされているとき CSS、SCSS、LESS ファイルのデフォルトフォーマッタとして Prettier を埋め込みます。Pre-commit フックは Husky を介して Stylelint と Prettier をステージングされたファイルでコミットを許可する前に実行します。CI チェックは stylelint --check と prettier --check をプルリクエストで実行します。開発でフォーマットされた後、本番 CSS は cssnano(PostCSS ベース、現代のミニフィケーション標準)を通過し、フォーマッタが行ったすべてを反転して配信用の圧縮バイトを生成します。これらのいずれも他の場所から貼り付けられたワンオフフラグメントには重要ではありません、まさにそれがこのブラウザ内ツールが対応するものです。長期プロジェクト作業には、ローカルで Prettier + Stylelint をセットアップしてください、ブラウザ内ツールは他のすべての場合のためのフリクションのないオプションです。

一般的な用途

• コードレビュー · チームと共有する前にCSSを読みやすくします。
• デバッグ · 適切にフォーマットされたCSSは、スタイルの問題を見つけて修正しやすくします。
• リファクタリング · 明確なインデントと組織化により、CSSの構造をよりよく理解します。
• ブラウザインスペクタのクリーンアップ。 DevTools の「ルールをコピー」ボタンは密集した読みにくい CSS を生成します、スタイルシートに貼り付ける前にフォーマットしてください。
• 本番のミニフィケーション。「Minify mode」トグルはフォーマットを反転します、すべてのバイトが重要な本番に CSS をデプロイするのに有用です。
• チームの標準化。 PR を提出する前にチームのフォーマット規約に揃えます。

プライバシー、なぜブラウザ専用がここで重要か

CSS にはほとんど明示的な秘密が含まれませんが、独自のスタイルシートはサイトの内部クラス分類、デザインシステムトークン、セレクタ名にエンコードされた A/B テストの仮定、未リリースの機能についての情報を明らかにします。サーバー側フォーマッタは CSS をサードパーティサービスにアップロードし、そこにログとして残ります。このツールは JavaScript を介して完全にブラウザで実行されます、Format をクリックする間に DevTools の Network タブを確認するか、読み込み後にページをオフライン(機内モード)にしてもフォーマッタはまだ動作します。独自のスタイルシート、デザインシステムのソース・オブ・トゥルースファイル、A/B テストバリアント、または見知らぬ人のハードドライブにコピーされたくない CSS に安全です。

よくある質問

CSS美化とは?

CSS美化は、適切なインデントと改行を追加して、コードを読みやすくフォーマットし直します。これはミニファイの逆で、デバッグをはるかに簡単にします。

ミニファイされたCSSはいつ使用すべきですか?

ミニファイされたCSSはすべての空白を削除し、サイズと帯域幅を削減するために本番環境に最適です。デバッグを容易にするために、開発中は美化されたCSSを使用します。多くのビルドツールは、デプロイ時に自動的にミニファイします。

プロパティのアルファベット順ソートは何のためですか?

このオプションは、各ルール内のCSSプロパティをアルファベット順に並べ替えます(例: borderはcolorの前、displayの前)。一部の開発者は、CSSのレンダリングには影響しませんが、より簡単に閲覧するためにこのアプローチを好みます。

「1プロパティ1行」は何をしますか?

各宣言を独自の行に置きます、color: red; が1行、padding: 10px; が次の行、それらを単一の行に積み重ねるのではなく。本質的にすべての本番 CSS の現代のデフォルトです、なぜなら diff をより清潔にし(プロパティを追加 = 行を追加、変更しない)、各宣言を個別に読みやすくするからです。逆、1行に複数の宣言、は2026年の本番コードで単一ルールの非常にコンパクトなフラグメント以外まれです。

私のプロジェクトが既に Prettier や Stylelint を使っている場合、これを使うべきですか?

おそらく違います、エディタの Prettier 統合は既に保存時にそれを行っています、PostCSS を介した CSS AST の完全な認識で、Stylelint は各コミットでチームの規約を強制します。このツールはビルドパイプラインがカバーしないケースのためです:ブラウザのインスペクタから貼り付けられた CSS、メールや Stack Overflow からのフラグメント、プロジェクトコンテキスト外のワンオフフォーマット。長期プロジェクト作業には、ローカルで Prettier + Stylelint をセットアップしてください、ワンオフフリクションフリーの作業には、このツールが正しい形式です。

CSS ファイルはアップロードされますか?

いいえ。フォーマットは JavaScript を介して完全にブラウザで実行されます。貼り付けた CSS はネットワークを横断しません、Format をクリックする間に DevTools の Network タブを確認するか、読み込み後にページをオフライン(機内モード)にしてもツールはまだ動作します。独自のスタイルシート、デザインシステムのソース・オブ・トゥルースファイル、A/B テストバリアント、または見知らぬ人のハードドライブにコピーされたくない CSS に安全です。

関連ツール