CSS整形ツール（無料・登録不要）
登録不要 無料 ブラウザ完結
CSSを貼り付けて「整形」ボタンを押すだけ。プロパティソート・シンタックスハイライト・カラーコードプレビュー・整形前後比較・ダークモード完全対応。コードレビュー前の整形や本番デプロイ前の圧縮に。完全ブラウザ完結・サーバー送信なし。
.css / .txt ファイルをドロップしてください
入力 CSS
整形結果がここに表示されます
整形後に前後の比較が表示されます
エラー
入力 0文字
→ 出力 0文字
行数 0行
圧縮率
最近の入力（最新5件）
CSS整形ツールの使い方
- 左側の入力欄にCSSを貼り付ける（.cssファイルのドラッグ&ドロップも可）
- インデント幅・プロパティソート・空白行のオプションを選択する
- 「整形」ボタンを押す（または Ctrl+Enter）
- 右側に整形・シンタックスハイライト済みのCSSが表示される（カラーコードにはプレビュースウォッチが表示される）
- 「コピー」で即クリップボード、「.css保存」でファイルダウンロード
- 「比較」タブで整形前後の変化を確認する
1
CSSを貼り付けるか、ファイルをドロップ
圧縮されたCSS・ライブラリから取得したCSS・コードエディタからコピーしたCSSを左側の入力欄にそのまま貼り付けてください。.cssファイルをドラッグ&ドロップで読み込むこともできます。
圧縮されたCSS・ライブラリから取得したCSS・コードエディタからコピーしたCSSを左側の入力欄にそのまま貼り付けてください。.cssファイルをドラッグ&ドロップで読み込むこともできます。
2
整形オプションを選ぶ
インデント幅（2/4スペース/タブ）・プロパティソート方法（ソートなし/アルファベット/カテゴリ）を選択します。チームの規約に合わせて設定してください。
インデント幅（2/4スペース/タブ）・プロパティソート方法（ソートなし/アルファベット/カテゴリ）を選択します。チームの規約に合わせて設定してください。
3
整形・圧縮・比較
「整形」：読みやすい複数行フォーマットへ変換。「圧縮」：本番環境向けの1行CSS。「比較」タブ：整形前後の差分をサイドバイサイドで確認。整形結果はシンタックスハイライトでセレクタ・プロパティ・値・カラーコードが色分けされ、カラーコードにはリアルタイムプレビューが表示されます。
「整形」：読みやすい複数行フォーマットへ変換。「圧縮」：本番環境向けの1行CSS。「比較」タブ：整形前後の差分をサイドバイサイドで確認。整形結果はシンタックスハイライトでセレクタ・プロパティ・値・カラーコードが色分けされ、カラーコードにはリアルタイムプレビューが表示されます。
4
コピー・ダウンロード・履歴から再利用
「コピー」で即クリップボード転送、「.css保存」でファイルダウンロード。入力したCSSは自動的にLocalStorageに保存され、「履歴」から最新5件を再呼び出しできます。
「コピー」で即クリップボード転送、「.css保存」でファイルダウンロード。入力したCSSは自動的にLocalStorageに保存され、「履歴」から最新5件を再呼び出しできます。
主な利用シーン
コードレビュー前の整形
インデント・プロパティ順を統一することでチームのCSSスタイルを揃えます。PRレビュー前に整形することで、フォーマット差分によるノイズを防げます。
本番デプロイ前の圧縮
本番環境向けに空白・コメントを除去してファイルサイズを削減。CDN経由で配信する場合のネットワーク転送量を最小化できます。
外部ライブラリのCSS解析
minifyされたCSSフレームワーク（Bootstrap・Tailwind等）のソースを整形して内部構造を調査。カラーコードをプレビューで確認しながら色パレットを把握できます。
CSS学習・教材作成
崩れたCSSを整形して構造を理解。プロパティをアルファベット順やカテゴリ順に並べ直すことで、CSS設計のベストプラクティスを学べます。
プライバシー：入力したCSSはすべてブラウザ内で処理されます。サーバーへの送信は一切なく、社内システムのCSS・機密設計情報を含むコードも安心して整形できます。
CSSプロパティの順序に一貫したルールを設けることで、コードの可読性・保守性が向上します。主に3つのアプローチがあります。
| ソート方法 | 並び順の特徴 | 適した場面 |
|---|---|---|
| ソートなし（元の順序） | 入力した順序を保持 | 既存コードを崩したくない・一時的な整形 |
| アルファベット順 | background → border → color → display → font の順 | プロパティを素早く探したい・機械的に統一したい |
| カテゴリ順（Outside-In） | 配置→ボックス→ボーダー→背景→テキスト→その他 の順 | 視覚的に構造が把握しやすい・チームのCSSガイドラインに合わせたい |
カテゴリ順（Outside-In）の並び
カテゴリ順の例
/* 1. 配置・レイアウト */
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: flex;
flex-direction: column;
/* 2. ボックスモデル */
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 1rem 1.5rem;
/* 3. ボーダー */
border: 1px solid #e5e7eb;
border-radius: 8px;
outline: none;
/* 4. 背景 */
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
/* 5. テキスト */
font-family: sans-serif;
font-size: 1rem;
color: #1f2937;
CSS stylelint によるプロパティソート自動化
プロジェクトに stylelint と stylelint-order を導入することで、コミット時に自動ソートを強制できます。当ツールでの整形結果をプロジェクトのルールに合わせてコピーする使い方もおすすめです。
CSSのminifyとは、空白・改行・コメントを取り除き、ファイルサイズを最小化する処理です。本番環境への配信速度向上に直結します。
整形済み（617バイト）
.button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: #4f46e5;
border: none;
border-radius: 6px;
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
圧縮済み（146バイト・76%削減）
.button{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:#4f46e5;border:none;border-radius:6px;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}
minifyによる最適化の内容
1
空白・タブ・改行の除去
プロパティ間の空白・セレクタ後の空白・中括弧周辺の改行を全て削除します。
プロパティ間の空白・セレクタ後の空白・中括弧周辺の改行を全て削除します。
2
コメントの削除
/* ... */ 形式のコメントを全て除去します（重要コメント /*! ... */ は保持）。
3
最後のセミコロン削除
宣言ブロック内の最後のセミコロンは省略可能なため、1バイト削減します。
宣言ブロック内の最後のセミコロンは省略可能なため、1バイト削減します。
4
カラーコード短縮
#ffffff → #fff、#aabbcc → #abc へ短縮します。
5
値の先頭ゼロ削除
0.5rem → .5rem へ短縮します。
注意：本ツールのminifyはブラウザ内で完全処理します。本番環境ではwebpack/Vite/PostCSSによる自動minifyとの併用をおすすめします。
- Q CSSの整形とminifyの違いは何ですか？
- A 整形（Beautify）はインデント・改行・空白を揃えて人間が読みやすい形式にする処理です。一方minifyは空白・改行・コメントを全て除去してファイルサイズを最小化する処理です。開発時は整形版で作業し、本番デプロイ時にminify版を使うのが一般的です。
- Q プロパティのソート（並び替え）は安全ですか？
- A CSSのプロパティは基本的に順序非依存ですが、同名プロパティが複数ある場合（例: display: flex と display: -webkit-flex）は後に書いたものが優先されます。当ツールは同名プロパティが複数ある場合でも元の相対順序を保持します。ただし、プロパティのカスケードに依存したCSS（意図的な上書き）がある場合はソートに注意してください。
- Q SCSSやSassのファイルも整形できますか？
- A 現在のバージョンは標準CSSの整形に対応しています。SCSS/Sassのネスト記法・変数（$）・ミックスイン（@mixin）は正しく整形されない場合があります。SCSS/Sassは標準CSSにコンパイル後の整形、または専用ツール（prettier + prettier-plugin-scss等）をご利用ください。
- Q カラープレビューはどのカラー形式に対応していますか？
- A 出力パネルでは HEX形式（#fff、#ffffff、#aabbcc 等の3/4/6/8桁）と RGB/RGBA形式（rgb(255,255,255) / rgba(0,0,0,0.5) 等）のカラーコードにプレビュースウォッチが表示されます。HSL/HSLAは現バージョンでは対応しておらず、今後追加予定です。
- Q 大きなCSSファイル（1,000行以上）でも使えますか？
- A 対応していますが、非常に大きなCSS（数百KB以上）は処理時間が長くなる場合があります。ブラウザのJavaScriptで処理を行うため、10MB超の超大容量ファイルはブラウザがフリーズする可能性があります。大容量ファイルはNode.js環境でPrettier CLIを使う方法をおすすめします。
- Q メディアクエリ・CSS変数・calc()は正しく整形されますか？
- A はい、対応しています。@media/@keyframes/@layer 等のアットルール・CSS変数（--variable-name）・calc()/clamp()/min()/max()関数・CSSネスト（&セレクタ）も整形されます。ブラウザ完結で処理するため、最新のCSS仕様のすべてに対応できる場合とそうでない場合があります。整形結果が意図しないものになった場合は、整形前後の比較タブで確認してください。