Skip to content

CSSフォーマッター・美化・圧縮ツール

CSSをブラウザ内で即座に整形・美化・圧縮。乱雑なスタイルシートをきれいに整えるか、配信用に圧縮できます。無料・プライベートで、CSSが端末外に送信されることはありません。

トラッキングなし ブラウザで動作 無料
インデント
整形済みCSS

🔒 100%ブラウザ内処理 — CSSが端末外に出ることはありません。

レンダリング安全な整形と可逆圧縮についてレビュー済み — Go Toolsエンジニアリングチーム · Jun 5, 2026

CSS整形とは？

CSS整形（美化・プリティプリントとも呼ばれます）は、スタイルシートの構造が読みやすくなるように、一貫したインデント、改行、スペースでスタイルシートを書き直すことです。スタイルは整形の前後で同一にレンダリングされます — 変わるのは空白だけです。圧縮はその逆で、コメントを取り除きCSSを最小サイズに折りたたんで、ページの読み込みを高速化します。このツールはその両方を、完全にブラウザ内で実行します。

主な機能

整形と圧縮

乱雑なCSSを可読性のために美化するか、最小の配信サイズに圧縮するか — 1つのツールで対応。

バイト削減量の表示

圧縮によって何バイト削減されたかを正確に確認でき、ペイロードへの影響を把握できます。

100%プライベート

すべての処理はブラウザ内で実行されます。CSSがサーバーに送信されることはありません。

スタイル設定

チームの規約に合わせて2スペース・4スペース・タブのインデントを選択できます。

サンプル

圧縮されたルールセット

body{margin:0;padding:0;font-family:system-ui}.card{display:flex;gap:1rem;padding:16px;border-radius:12px;background:#fff}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}

1行のスタイルシートを読みやすいインデント付きのルールに展開します。

メディアクエリ

@media(max-width:640px){.nav{flex-direction:column}.nav a{padding:8px 0}}

ネストされたアットルールをインデントし、ブレークポイントを見やすくします。

カスタムプロパティ

:root{--primary:#6366f1;--gap:8px}.btn{color:var(--primary);margin:var(--gap)}

CSS変数とvar()の使用をきれいに整形します。

キーフレーム

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

アニメーションのキーフレームを1行ずつ整列させます。

よくある使用場面

引き継いだCSSの整理
圧縮されたり不統一なスタイルシートを美化し、読んで編集できる状態にします。
コードレビュー
プルリクエスト前にCSSを整形し、レビュアーが一貫した差分を確認できるようにします。
軽量な配信
本番用CSSを圧縮してバイト数を削減し、ページの読み込みを高速化します。
サンプルから学ぶ
サイトからコピーしたスニペットを貼り付けて整形し、構造を理解します。

技術的詳細

js-beautifyによる美化
人気のオンライン美化ツールで実績のある同エンジンを使用し、予測可能で設定可能な出力を提供します。
CSSOによる圧縮
安全に圧縮 — 空白をまとめてコメントを取り除き、スタイルのレンダリングには影響を与えません。
ブラウザベース
完全にクライアントサイドで動作し、CSSが端末外に出たりサーバーに送られたりすることはありません。

ベストプラクティス

ソースは整形、本番は圧縮
リポジトリには可読性の高いCSSを保持し、圧縮はビルド・デプロイ時のステップとしてのみ行います。
インデントスタイルを統一する
差分をきれいに保つため、チーム全体で2スペース・4スペース・タブのどれかに統一します。
最後に圧縮する
すべての編集が終わってから圧縮を実行します — 圧縮済みCSSは手動でのメンテナンスが困難です。

よくある質問

CSSをオンラインで整形するには？
入力ボックスにCSSを貼り付けて「整形」をクリックします。ツールが一貫した改行とスペースでスタイルシートを再インデントし、コピーできるようにします。すべての処理はブラウザ内でローカルに実行され、何もアップロードされません。
CSSを圧縮するには？
CSSを貼り付けて「圧縮」をクリックします。ツールがコメントを取り除いて空白を折りたたみ、最も小さい同等のスタイルシートを生成し、削減されたバイト数を表示します。圧縮されたCSSは元と同一にレンダリングされます。
CSSの整形と圧縮の違いは何ですか？
整形（美化）はインデントと改行を追加してCSSを読みやすくします。圧縮はその逆で、コメントと空白を取り除いてファイルを縮小し、読み込みを高速化します。どちらも元と同一にレンダリングされるスタイルを生成します。
整形するとスタイルの見た目が変わりますか？
いいえ。整形と圧縮は空白とコメントのみを変更し、セレクター・プロパティ・値は決して変更しません。ページは整形の前後でまったく同一にレンダリングされます。
このツールでCSSは安全ですか？
はい。すべての整形と圧縮はJavaScriptを使ってブラウザ内でローカルに実行されます — CSSがサーバーに送信されたり、記録されたり、保存されたりすることはありません。貼り付けたものすべてのコピーを受け取るサーバーサイドのフォーマッターとは異なり、独自または未公開のスタイルでも安全に使用できます。
SCSSやLessも整形できますか？
標準CSSの整形と圧縮に対応しています。有効なCSSでもあるプレーンなSCSS/Lessは通常問題なく整形できますが、プリプロセッサー固有の構文（ネスト、ミックスイン、$や@の変数）はプリプロセッサー自身のフォーマッターで処理することをお勧めします。
CSSにはどのインデントを使うべきですか？
2スペースは最も一般的なデフォルトで、差分をコンパクトに保ちます。4スペースは深くネストされたルールの可読性を高めます。タブを使えば開発者ごとに好みの幅で表示できます。1つを選んで一貫して適用してください — このツールは3つすべてに対応しています。

関連ツール

すべてのツールを見る →

HTMLフォーマッター・美化・圧縮ツール

コード

HTMLをブラウザ内で即座に整形・美化・圧縮。乱雑なマークアップをきれいに整えるか、配信用に圧縮できます。無料・プライベートで、HTMLが端末外に送信されることはありません。

JavaScriptフォーマッター・圧縮ツール

コード

JavaScriptをブラウザ内で即座に整形・美化・圧縮。乱雑なコードをきれいに整えるか、Terserで圧縮して配信できます。無料・プライベートで、コードが端末外に送信されることはありません。

SQLフォーマッター・整形ツール

コード

SQLをブラウザ内で即座に整形・美化・圧縮。PostgreSQL、MySQL、SQL Server、BigQuery、Snowflake、Oracle、SQLiteに対応。無料・プライベートで、SQLが端末外に送信されることはありません。

進数変換ツール — 2進数・16進数・10進数・8進数

単位変換

無料オンライン進数変換ツール。2進数、8進数、10進数、16進数および任意の基数（2-36）間で数値を瞬時に変換。BigInt対応で桁数制限なし。登録不要・サーバー送信なし、すべての処理がブラウザ内で完結。コピーボタンやコードリテラル出力で開発作業を効率化。

Base64エンコーダー＆デコーダー

エンコーディングとフォーマット

Base64のデコード・エンコードが無料でオンラインで行えます。リアルタイム変換、UTF-8・絵文字対応。100%ブラウザ上で動作しデータは外部に送信されません。登録不要。

Base64 画像変換ツール

エンコーディングとフォーマット

Base64 文字列やデータURIをブラウザ上で画像に戻します。プレビューし、寸法と MIME を確認して、PNG・JPG・GIF・SVG としてダウンロード。アップロード不要。