HTMLタグにclassを一括追加ツール｜タグごとに任意クラスを一括追加

HTMLタグに任意のclassを一括付与。a→link、b→bold など、タグとクラスのペアをプリセット化し、ペーストするだけで一括変換。

左側のテキストエリアにHTMLを入力し、「変換 »」ボタンをクリックすると、設定したタグに自動的にclassが付与されたHTMLが右側に出力されます。
既存class属性がある要素には追記、ない要素には新規付与されます。

デフォルトで16個のタグ→クラスペアが用意されています。タグ名・クラス名の欄は自由に書き換え可能なので、ご自身のテーマやデザインシステムに合わせてカスタマイズできます。

プリセット例	用途・使いどころ
`a` → `link`	すべてのリンクに共通スタイルを当てたいとき。テーマ側で `.link` にホバー・色を定義しておけば、HTMLを差し替えても見た目を統一できます。
`b` → `bold` / `s` → `strike` / `u` → `underline`	意味的タグ（強調・打消し・下線）に、見た目クラスを分離して付与。CSS設計の `.bold { font-weight: 700 }` 方式に揃えるのに便利です。
`h2`〜`h6` → `fz-xl`〜`fz-xs`	見出しタグにフォントサイズユーティリティクラスを一括付与。「h2 だけど見た目は小さくしたい」など、文書構造と見た目を分離できます。
`table` → `table my-0.5r` / `tr` → `rung`	テーブル要素に、テーブルスタイルと余白クラスをまとめて付与。`<th>` や `<td>` のスタイリングはテーマ側で `.table` 配下に定義しておく前提。
`picture` → `bd-bounds`	画像のレスポンシブ枠付与に。Markdownから変換した `<picture>` に対して、テーマの境界線スタイルを一括適用したいとき。
`mark` → `mk-1` / `hr` → `separator mt-3r`	マーカー・区切り線などの装飾系タグに、テーマで定義したクラスを当てるためのプリセット。