カテゴリー: 開発ツール
CSS フォーマッター
2または4スペースのインデントで CSS をローカルに整形・圧縮
CSS を貼り付けると、2または4スペースのインデントで整形するか、安全な範囲で最小限のサイズに圧縮します。整形時はコメントが保持されます。すべてブラウザ内で完結します。
ブラウザ内で整形しました。
結果
.tool-panel {
display:grid;
gap:16px;
padding:16px
}
/* accent border */
.tool-panel .tool-output {
border:1px solid var(--line);
border-radius:8px
}このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
CSS フォーマッターは、ネストされたセレクタやメディアクエリを見やすくするためにルールと宣言のインデントを整えます。一方、圧縮ツールはコメントや不要な空白を取り除き、本番環境向けにスタイルシートを縮小します。このツールは空白の整形のみを行い、与えられた CSS を評価・実行することはありません。
使い方
- CSS を入力欄に貼り付けるか、サンプルを読み込みます。
- 読みやすい出力にするには「整形」、最小サイズにするには「圧縮」を選びます。
- 結果をコピーします。整形時は2または4スペースのインデントを選べます。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- CSS はどこかにアップロードされますか?
- いいえ。整形と圧縮はページ内で実行される JavaScript によって行われるため、スタイルシートが端末から出ることはありません。
- コメントは保持されますか?
- 整形時はコメントを独立した行として保持します。圧縮時は、多くの本番ビルドツールと同様にコメントを削除します。
- CSS の検証は行われますか?
- いいえ。空白とインデントの整形のみを行うため、プロパティ名の誤りや不正な値は検出されません。