Bob's Multi Tool

CSS フォーマッター

CSSコードプライバシー: ブラウザ内処理

CSS フォーマッター

圧縮または崩れた CSS を読みやすい block に整え、style 修正と review を楽にします。

入力 / 出力

まずツールを使う

入力、出力、コピー操作をこの領域にまとめています。例と確認項目は下に分けています。

コピー用の出力

ローカルセッション

入力状態はこのブラウザだけに保存され、アカウントなしで前回の作業を復元できます。

結果のあとに確認

基本の入力/出力が終わってから、必要な例、確認リスト、関連ツールだけを開きます。

Web運用ワークベンチ

CSSスニペットをレビュー

CSSスニペットを整形し、CSSレビューレポートをコピーして、圧縮と色コントラストを確認します。

3 ツール
  1. 1. CSS

    スニペットを整形し、selector、token、cascade、specificity、checklistを含むレポートをコピーします。

  2. 2. CSS Min

    圧縮CSSを共有する場合は、圧縮率、コメント削除、minifyレビューレポートを確認します。

  3. 3. Color

    スニペットが前景/背景色を変える場合は、color tokenをWCAGコントラスト基準で確認します。

色アクセシビリティ確認

前景/背景色を変換し、WCAGコントラストレポートをコピーして、公開前にCSS tokenと視覚アセットを確認します。

3 ツール
  1. 1. Color

    HEX/RGB/HSLの組み合わせを変換し、AA/AAA基準を確認してアクセシビリティレポートをコピーします。

  2. 2. CSS

    変更をcommitする前にCSS token名、selector、重複色値を確認します。

  3. 3. Favicon

    ブランド頭文字や小さいアイコンが選んだ背景で明確に読めるか確認します。

コピー前の確認

  • selector、media query、custom property が元の block に付いているか確認します。
  • 対象 breakpoint で formatted CSS を実画面で確認します。
  • CSS フォーマッター の結果が次の作業に合うか関連ツールで続けて確認します。

よくある失敗例

  • formatting は selector specificity や cascade の結果を変えません。
  • media query や container context なしで block だけコピーすると実際の layout で違って見える場合があります。

関連ツール

CSS MinCSS の空白とコメントを削減し、圧縮率、selector 数、comment 削除リスクを確認してコピーします。次の手順: CSS の空白とコメントを削減し、圧縮率、selector 数、comment 削除リスクを確認してコピーします。CSS Unitpx、rem、em、percent を CSS layout と typography 計算向けに変換します。次の手順: px、rem、em、percent を CSS layout と typography 計算向けに変換します。Clampresponsive font-size と spacing 向けの CSS clamp() を min/max 範囲から生成します。次の手順: responsive font-size と spacing 向けの CSS clamp() を min/max 範囲から生成します。
  • selector、media query、custom property が元の block に付いているか確認します。
  • 対象 breakpoint で formatted CSS を実画面で確認します。
  • CSS フォーマッター の結果が次の作業に合うか関連ツールで続けて確認します。
CSS フォーマッター - 無料オンラインコードツール | bobob.app