Softonic

CSSフォーマッター

ステップ 1 / 2
CSS を整形

DevToolsで本番用のスタイルシートを開くと、すべてが1行にまとまっています。このフォーマッターは圧縮されたCSSを読みやすい形に展開します。1宣言につき1行、2スペースのインデント、ルール間の空行を整えます。生のCSS、SassやPostCSSの出力、インラインの<style>ブロック内のCSSに対応しています。貼り付けたCSSは整形のために当社のサーバーに送信され、ツールのステップ間を移動する間はページのリンクに含まれます。整形時、ブロックコメントは削除されます。

CSSを整形する手順

  1. 1

    CSSを貼り付ける

    1行に圧縮されたもの、一部だけ整形されたもの、すでにきれいなもの、どれでも構いません。パーサーは形式を問いません。

  2. 2

    整形する

    [CSSを整形] を押します。各宣言は2スペースのインデントで専用の行に移動し、ルールの間には空行が入ります。

  3. 3

    確認する

    出力を確認します。プロパティの順序は保持されますが、ブロックコメントは削除されます。

  4. 4

    コピーする

    整形したCSSをクリップボードにコピーし、プロジェクトに貼り戻します。

整形前と整形後

入力（圧縮された状態）：

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

出力（整形後）：

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

フォーマッターの動作

動作 値
宣言 1行に1つ、2スペースでインデント
ルール間の空行 1
開き波括弧 セレクターと同じ行
閉じ波括弧 専用の行
プロパティの順序 保持され、並べ替えられることはありません
ブロックコメント 整形時に削除

フォーマッターが削除するもの

/* このコメントは整形すると消えます */
.button { background: #2563eb; }

ブロックコメント（/* ... */）は出力から取り除かれます。必要であれば、整形する前に元のファイルのコピーを保存しておいてください。

ネストしたルール（Sass / 最新のCSSネスト）

フォーマッターは、ネストしたルールをその深さに応じてインデントします：

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

（&を使わない）Sass/Lessの構文も許容されます。@mixin、@include、@extendといったSass固有のatルールはそのまま通過しますが、深く再整形はされません。Sassを完全に整形したい場合は、PrettierのようなSass対応ツールをご利用ください。

整形すべきでない場合

  • 本番環境では：整形ではなく圧縮しましょう。整形されたCSSは圧縮版の2〜3倍のサイズになります。
  • 差分（diff）を取る前には：両方を整形しましょう。圧縮ファイルと整形済みファイルの差分を取ると、読めない差分になります。
  • ビルドパイプラインの中では：Prettierやフレームワークのフォーマッターに一貫性を任せましょう。このツールは単発のクリーンアップに使ってください。

よくある質問

標準的なCSSとCSSネスト（2023年の仕様）に対応しています。@mixin、@include、@extendといったSass固有の構文や$付きの変数はそのまま通過しますが、深く再整形されることはありません。Sassを完全に整形するには、PrettierのようなSass対応ツールをご利用ください。

はい。整形は当社のサーバーで実行されるため、貼り付けたCSSは整形リクエストのたびに送信され、ツールのステップ間を移動する間はページのリンクに含まれます。いずれのアカウントにも保存されず、後で再利用されることもありません。

構文的に正しければ変わりません。CSSの空白は値の内部を除いて意味を持たず、フォーマッターは空白と改行を並べ替えるだけです。宣言の順序と値そのものは保持されます。

はい。<style>タグの中のCSSをコピーして貼り付け、整形してから貼り戻してください。フォーマッターはCSSのみを対象とするため、周囲のHTMLではなくCSSの内容を貼り付けてください。

出力を統一するため、フォーマッターはブロックコメント（/* ... */）を取り除きます。残したい場合は、整形する前に元のCSSのコピーを保存しておいてください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。