HTML to CSS ひな形ジェネレーター

コーディングの「準備時間」をゼロにする魔法のツール

SWELLやWordPressのブロックエディタで組んだHTMLを見て、「CSSを書くためにクラス名をコピペして、ネストを作って……」という作業にうんざりしたことはありませんか？

この HTML to CSS (SCSS) Extractor は、そんな「虚無な時間」を完全に排除するために開発された、Web制作者のための強力な時短ツールです。

なぜこのツールが必要なのか？

WordPressのブロックエディタが出力するHTMLは、以下のような「スタイリングには不要なクラス」で溢れています。

• wp-block-group
• swell-block-fullWide
• is-layout-flow
• alignfull

これらが混ざったコードから、自分が付けた 「デザイン用のクラス（p-top-hero や __title）」だけ を探し出してCSSファイルを作るのは、非常に手間がかかる作業でした。

このツールを使えば、HTMLを貼り付けるだけで、不要なクラスを自動で捨て去り、必要なクラスだけを綺麗なSCSSのネスト構造にして出力します。

このツールのすごい機能 5選

1. SWELL・WordPressに完全最適化

初期設定で wp- や swell-、is-style- といったテーマ側デフォルトのクラスを「無視」するように設定されています。あなたが書いたオリジナルのクラス名だけが、魔法のように抽出されます。

2. NpCSS（BEM）記法を理解する「賢い解析」

HTMLの階層構造を読み取り、SCSSの入れ子（ネスト）を自動生成します。 さらに、NpCSS記法の Element（__）や Modifier（--）も自動検知。

• __element は親要素の中にネスト。
• __element同士のネストは禁止。HTML構造に関わらず並列で記載。
• --modifier は &.--modifier として親に結合。 といった「プロの書き方」で出力されます。

3. ユーティリティクラスの自動整理

オプションの「u-, c- クラスをルートに出力」がオン（デフォルト）になっていると、汎用的なクラス（u-mb-20 や c-btn）をネストの深い場所から救出し、CSSの最後にまとめて出力します。これにより、CSS設計が崩れるのを防ぎます。

「u-, c-」は、一般的なBEM記法としてSWELLでも使用されています（例：u-mb-ctrl u-mb-10）。
u-mb-を除外クラスに設定してもよいですが、制作者側で使う可能性もあるプレフィックスとして残しています。
ある程度のチェックを前提としたツールではありますが、面倒であれば除外してください。

4. レスポンシブ記述も1秒で完了

「自動挿入」のチップをクリックしておけば、出力されるCSSのルートに @media クエリや :hover の枠を自動で追加します。 「スマホ用」「PC用」などのメディアクエリを毎回手書きする必要はもうありません。

こちらの機能単体で使っても良いですね！

5. 設定はブラウザに保存

「抽出したいクラスのルール」や「無視したいクラス」の設定は、自動的にあなたのブラウザに保存されます。次回アクセスした時も、あなた好みの設定ですぐに使えます。

例えばEmanon Premium をよく使う方はebp-を除外したり、特定のツールのプレフィックスを抜き出したい場合はそのプレフィックスを抜き出したり、SWELL制作以外にも幅広く使用できます。

変更はリアルタイムに保存されるので、一時的に除外/抽出クラスを変更したい場合はシークレットモード「Shift + Ctrl + N」を使用してください。

🛠 使い方

1. コピー: WordPressのコードエディタやデベロッパーツールから、HTMLコードをコピーします。
2. ペースト: 左側のエリアに貼り付けます。
3. 完了: 右側にSCSSコードが完成しています。「コピー」ボタンを押して、あなたのCSSファイルに貼り付けるだけです。

🔒 セキュリティについて

このツールは、すべての処理をお客様のブラウザ上（JavaScript）で行っています。
入力されたHTMLコードやデータがサーバーに送信されたり、保存されたりすることは一切ありませんので、安心してご利用ください。