CSS フォーマッター
乱れた・圧縮された CSS をブラウザで整形。
使用例
圧縮CSSを整形
入力
.btn{color:#fff;background:#000;padding:8px 16px;}出力
.btn {
color: #fff;
background: #000;
padding: 8px 16px;
}不揃いな間隔を整理
入力
a{color:blue;} a:hover{color:red;}出力
a {
color: blue;
}
a:hover {
color: red;
}このツールについて
この無料オンラインCSSフォーマッターは、乱雑・圧縮されたスタイルシートをきれいにインデントされたCSSに変えます — 高速なCSS整形・pretty-printツールです。CSSを貼り付けてインデントスタイルを選ぶと、整形結果が即座に表示されます。すべてアップロードなしにブラウザ内で動作するので、コードが端末を離れることはありません。
使い方
- 入力ボックスにCSSを貼り付けます（サンプルを押して試せます）。
- スペース2つ・4つ・タブからインデントを選びます。
- 右の出力ボックスで整形されたCSSを確認します。
- コピーボタンで結果をコピーします。
CSSフォーマッターを使う場面
ビルド済みバンドルから圧縮CSSをコピーしたとき、間隔が不揃いなスタイルシートを引き継いだとき、あるいは編集前にルールを読みたいときに便利です。一貫したインデントはセレクタとネストを明確にし、差分をきれいに保ちます。
よくある質問
このCSSフォーマッターは無料ですか?
はい — 登録も制限もない完全無料オンラインCSSフォーマッター・整形ツールです。好きなだけCSSを整形・インデントできます。
CSSはサーバーにアップロードされますか?
いいえ。アップロードなしのツールです — CSSはすべてブラウザ内で整形されるため、コードが端末を離れません。非公開・内部スタイルシートにも安全です。
CSS整形ツールは何をしますか?
各ルールと宣言をそれぞれの行に置き、波括弧・コロン・セミコロン周りの間隔を正規化し、全体を再インデントして、圧縮・乱雑なCSSを読みやすくします。
インデントを選べますか?
はい — スペース2つ、4つ、またはタブを選べます。選択はブラウザに保存され、次回も保たれます。
SCSSやLessも扱えますか?
構造がCSSに近いので、ほとんどのSCSS・Less構文をインデント・整理の面でうまく扱えます。コンパイルではなく整形なので、ネストや変数を展開はしません。
圧縮CSSを展開しますか?
はい。1行や圧縮されたスタイルシートを貼り付けると、適切にインデントされた読みやすいルール群に展開し直します。
オフラインやモバイルでも動きますか?
ページ読み込み後はローカルで動作するので不安定な接続でも機能し、レイアウトはスマホ・タブレットで完全レスポンシブです。
関連ツール