HTML to SCSS生成ツール
BEM記法対応スケルトンジェネレーター

BEM記法で書かれたHTMLコードからSCSSスケルトンを自動生成。
クラス名の階層構造を解析し、.Block__element を &__element に自動変換。
コーディング開始時の面倒な初期設定を一瞬で完了させる完全無料ツール。

🎯BEM記法解析 ✓階層構造認識 ✓スケルトン生成 ✓完全無料

コード生成エリア

📝 HTML Input

✨ SCSS Output

HTML to SCSS生成ツールについて

🎯 このツールの特徴

BEM記法で書かれたHTMLマークアップを解析し、適切にネストされたSCSSスケルトンを自動生成します。クラス名の階層構造を自動認識し、効率的なSCSSコーディングの土台を一瞬で作成できます。

主な機能

  • BEM記法の自動認識: .Block__element__sub のような深い階層も正確に解析
  • 階層構造の自動生成: HTML構造から適切なネストを自動作成
  • Modifier対応: --modifier も &--modifier として出力
  • スケルトンコード生成: 各セレクタにコメントを追加し、スタイル記述の準備完了
  • 重複排除: 同じクラス名は1つにまとめて出力

使い方

  1. 左側の「HTML Input」エリアにBEM記法のHTMLコードを貼り付け
  2. 「SCSS生成」ボタンをクリック（または Ctrl+Enter / Cmd+Enter）
  3. 右側の「SCSS Output」エリアに生成されたSCSSスケルトンが表示されます
  4. 「コピー」ボタンでクリップボードにコピーして使用

生成例

HTMLコード:

  • <div class="Card">
  •   <div class="Card__header">
  •     <h2 class="Card__header__title">タイトル</h2>
  •   </div>
  •   <div class="Card__body">内容</div>
  •   <div class="Card__footer Card__footer--fixed">フッター</div>
  • </div>

生成されるSCSS:

  • .Card {
  •   // ここにスタイルを記述
  •   
  •   &__header {
  •     // ここにスタイルを記述
  •     
  •     &__title {
  •       // ここにスタイルを記述
  •     }
  •   }
  •   
  •   &__body {
  •     // ここにスタイルを記述
  •   }
  •   
  •   &__footer {
  •     // ここにスタイルを記述
  •     
  •     &--fixed {
  •       // ここにスタイルを記述
  •     }
  •   }
  • }

このツールのメリット

  • 開発時間の短縮: HTMLからSCSSの初期構造を自動生成し、数分の作業を数秒に
  • ミスの削減: 手動でのネスト構造作成時のタイプミスを防止
  • 一貫性の確保: HTML構造と完全に一致したSCSSを生成
  • 学習ツールとして: BEM記法とSCSSの関係性を視覚的に理解

対応するクラス名パターン

  • Block: .ComponentName
  • Element: .Block__element
  • 深いElement: .Block__element__sub
  • Modifier: .Block--modifier
  • Element Modifier: .Block__element--modifier
  • 数字付き: .Block__item1 → &__item1