CSS 整形とは？

CSS 整形とは、カスケーディングスタイルシートに一貫したインデント、改行、スペースを追加して、コードを人間が読みやすくするプロセスです。ブラウザは CSS 内の空白を完全に無視します。1 行に圧縮されたコードと整然とインデントされたスタイルシートは、まったく同じレンダリング結果を生み出します。違いは可読性のみです。整形された CSS なら、セレクターをひと目で把握し、セミコロンの欠落を見つけ、カスケードの全体像を素早く理解できます。

CSS フォーマッター（CSS ビューティファイアやプリティプリンターとも呼ばれます）は、圧縮されたり書き方が不統一だったりする CSS を、均一なインデント・1 行 1 宣言・一貫した波括弧の配置で書き直します。これはミニファイの逆操作であり、美化（ビューティフィケーション）またはプリティプリントとも呼ばれます。ミニファイが本番環境向けにファイルサイズを削減するために空白を除去するのに対して、整形は開発・コードレビュー・コードベースの保守のために構造を復元します。

CSS 仕様（W3C CSS Syntax Module Level 3）はスタイルシートの文法を定義していますが、空白の規約については何も規定していません。整形ルールはチームの判断によるものです。タブかスペースか、2 スペースか 4 スペースか、波括弧のスタイル、ルールセット間の空行。フォーマッターは選択した規約を、すべてのファイルにわたって一貫して適用します。多くのチームはその選択を .prettierrc や .editorconfig ファイルに記述しています。

この CSS フォーマッターを使う理由

CSS を貼り付けるだけで、ミリ秒単位で適切にインデントされた出力が得られます。エディタープラグインのインストールも、設定ファイルの作成も、アカウント登録も不要です。

⚡

即時整形

入力または貼り付けと同時に出力が更新されます。ビルドステップの待機や CLI コマンドの実行なしに、整形済み CSS がすぐに得られます。

🔒

プライバシー優先の処理

すべての整形はブラウザ内で JavaScript を使って実行されます。CSS がデバイスの外に出ることはなく、サーバーに送信されることもありません。

🎨

インデントの設定

プロジェクトのコードスタイルに合わせて、2 スペース・4 スペース・タブのいずれかを選択できます。出力はそのままコードベースに貼り付けられる状態になっています。

📋

ログイン不要

ページを開いて CSS を貼り付け、結果をコピーするだけです。サインアップ、レート制限、機能制限は一切ありません。ツールの全機能に毎回アクセスできます。

CSS フォーマッターの使用例

フロントエンド開発

ベンダーライブラリや CDN から圧縮された CSS を受け取ったとき、整形することでセレクターを読み通し、自分のスタイルシートの何を上書きしているかを把握できます。

バックエンドエンジニアリング

サーバーレンダリングされたページは、クリティカル CSS を 1 行でインライン挿入することがよくあります。その CSS を整形することで、初期 HTML ペイロードにどのスタイルが含まれているかを監査しやすくなります。

DevOps と CI パイプライン

フォーマッターの出力をコミット済みファイルと比較することで、プルリクエストで一貫した CSS 整形を強制できます。不統一な空白は差分にノイズを生み、実際の変更を見えにくくします。

QA とバグ調査

表示上のバグをデバッグするとき、DevTools から取得した計算済み CSS を整形することで、どのプロパティがどの詳細度の順序で適用されているかを素早く特定できます。

データ移行

コンテンツ管理システムやメールビルダーは CSS をデータベースフィールドに保存することが多く、空白が除去された状態になっています。抽出した CSS を整形することで、再インポート前に内容を確認できます。

CSS の学習

CSS を学んでいる方は、チュートリアルや Stack Overflow の回答からサンプルを貼り付けて整形することで、ネスト構造とカスケードの仕組みを視覚的に理解しやすくなります。

CSS プロパティ順序リファレンス

ほとんどの CSS フォーマッターはプロパティの並び順を変更しません。ただし、多くのスタイルガイドでは関連するプロパティをグループ化することを推奨しています。以下の表は、Stylelint の order プラグインや CSScomb などのツールで使われる一般的なグループ化規約を示しています。

グループ	プロパティ例	目的
Position & Layout	position, display, float, clear	Defines the element's rendering mode
Box Model	width, height, margin, padding	Controls dimensions and spacing
Typography	font-size, line-height, color	Text styling properties
Visual	background, border, box-shadow	Decorative properties
Animation	transition, animation, transform	Motion and transform effects
Misc	cursor, overflow, z-index	Behavioral and stacking properties

このグループ化は規約であり、CSS の要件ではありません。ブラウザはルールブロック内のプロパティの位置に関係なく、詳細度とソース順に基づいて宣言を適用します。フォーマッターは空白とインデントに注力し、プロパティの並び替えは Stylelint などのツールが担う別のリント上の問題です。

CSS 整形 vs. CSS ミニファイ

整形とミニファイは逆の操作で、開発の異なる段階で使われます。

CSS フォーマッター（このツール）

インデント、改行、スペースを追加して CSS を読みやすくします。開発中やコードレビュー時に使用します。ファイルサイズは増加しますが、ブラウザのレンダリングには一切影響しません。出力は人間のためのものです。

CSS ミニファイアー

ファイルサイズを削減するために、不要な空白・コメント・冗長な構文をすべて除去します。本番ビルドに使用します。出力はブラウザや CDN 向けであり、読むためのものではありません。

コード例

さまざまな言語と環境で CSS をプログラム的に整形する方法を示します。

JavaScript (Prettier API)

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

Python (cssbeautifier)

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

CLI (Prettier)

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

PHP (sabberworm/php-css-parser)

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

よくある質問

CSS フォーマッターと CSS リンターの違いは何ですか？

CSS フォーマッターはインデント・改行・コロンや波括弧周りのスペースといった空白のみを変更します。実際の CSS 宣言は修正しません。CSS リンター（Stylelint など）はコードのエラー・悪い慣行・スタイル違反を分析し、空白以外の問題も提案または自動修正することがあります。チームは通常、一貫したスペーシングのためにフォーマッター、ミスの検出のためにリンターを併用します。

CSS を整形するとブラウザでの表示が変わりますか？

いいえ。ブラウザは W3C CSS Syntax Module に従って CSS を解析しており、すべての空白（スペース・タブ・改行）を同等のトークン区切り文字として扱います。宣言・セレクター・値の間に空白を追加または削除しても、計算済みスタイルには影響しません。例外は content: "hello world" のような文字列値内の空白で、フォーマッターはそのまま保持します。

CSS のインデントは何スペースにすべきですか？

最も一般的な規約は 2 スペースと 4 スペースです。Google のスタイルガイドと Prettier のデフォルトはどちらも 2 スペースを使用します。WordPress の CSS コーディング標準はタブを使用します。パフォーマンスに差はありません。チームがすでに使っている規約、または既存の JavaScript・HTML コードと同じ規約を選び、一貫性を保ってください。

このツールで SCSS、LESS、その他の CSS プリプロセッサを整形できますか？

このツールは標準的な CSS 構文を整形します。SCSS と LESS は CSS の構文を大部分共有しているため、シンプルなプリプロセッサコードは正しく整形されることが多いです。ただし @mixin・@include・ネストされたルールセットなど SCSS 固有の構文は期待どおりに処理されない場合があります。SCSS には、SCSS パーサーを使った Prettier または sass-formatter 拡張機能の使用をお勧めします。

CSS 整形と CSS ビューティフィケーションは同じものですか？

はい。CSS フォーマッター、CSS ビューティファイア、CSS プリティプリンターはすべて同じ操作を指します。CSS コードに一貫した空白を追加することです。ツールによって名称は異なりますが、出力は同じです。1 行 1 宣言の、インデントされた読みやすい CSS です。

整形後の CSS が元のファイルと行数が異なるのはなぜですか？

圧縮された CSS は複数の宣言を 1 行にまとめたり、ルールセット間の改行を省略したりすることがあります。フォーマッターは各宣言の後に改行を追加し、ルールセット間に空行を挿入するため、行数が増加します。実際の CSS の内容（セレクター・プロパティ・値）は変更されません。

バージョン管理には整形済みと圧縮済みのどちらの CSS をコミットすべきですか？

整形済み CSS をコミットしてください。バージョン管理の差分は行単位で表示されるため、1 行 1 宣言の整形済み CSS はクリーンでレビューしやすい差分を生み出します。圧縮済み CSS は 1 行の差分になり、内容のレビューが事実上不可能です。ミニファイはソースフォーマットとしてではなく、ビルドステップとして実行してください。PostCSS・cssnano・バンドラーの CSS プラグインが本番用の圧縮を自動で処理します。

CSS Formatter