使い方

貼り付け → 実行 → 確認 → コピー。すべてはブラウザ内で完結します。

CSS・HTML・JSON などをエディタに貼ります。アップロードはしません。

変換または実行をクリック。結果はすぐに表示されます。

生成コードと注意書きを公開前に確認します。

出力をコピーしてプロジェクトに貼り付けます。

このツールについて

ビューティファイアはフォーマッターと同じ系統のツールで、波括弧や空白の付け方をそろえてセレクターを見つけやすくします。CI に組み込む整形ツールの代わりにはなりません。

例として、あえて詰めて書いたナビゲーションの CSS を用意しています。

入力

nav{display:flex;gap:1rem}nav a{color:#0f172a;text-decoration:none}nav a:hover{color:#0284c7}

出力

nav {
  display: flex;
  gap: 1rem;
}

CI で複数の整形ツールが競合する場合は 1 つに統一し、このツールは手作業の掃除に使うとよいでしょう。