HTML→Pugコンバーター
HTMLマークアップをクリーンなPug（Jade）テンプレート構文に変換
HTML入力
Pug出力
HTML→Pugコンバーターとは？
HTML→PugコンバーターはHTMLマークアップをPug（旧称Jade）テンプレート構文に変換します。Pugは冗長なHTMLをシンプルな空白ベースの構文に置き換えます。
例えば、<div class="hero"><p>こんにちは</p></div>はdiv.hero
p こんにちはになります。
HTMLをPugに変換する方法
3ステップでHTMLをPugテンプレート構文に変換します。
1
HTMLを貼り付けまたはアップロード
HTMLを左パネルに貼り付けるか、アップロードをクリックします。
2
Pug出力を確認
.class記法、#id記法、正しいインデントでPugテンプレートが表示されます。
3
コピーまたはダウンロード
コピーまたはダウンロードで.pugファイルとして保存。
このツールが役立つ場面
Express.jsプロジェクトの移行
既存のHTMLテンプレートをExpressのPugビューエンジン用に変換。
冗長なHTMLのクリーンアップ
Pugの構文はファイルサイズを30-50%削減します。
Pug構文を学ぶ
知っているHTMLのPug等価物を確認して学習できます。
プロトタイプテンプレートの生成
HTMLツールの出力をNode.js用Pugテンプレートに変換します。
よくある質問
Pugの構文とは？
Pugはインデントで閉じタグを置き換えます。クラスはドット記法（div.myClass）、IDはハッシュ記法（div#myId）、属性は括弧内（a(href="/")）。
ネストされた要素は対応していますか？
はい。コンバーターはDOMを再帰的にたどり、正しいインデントレベルで各要素を出力します。
属性はどのように処理されますか？
classとid以外の属性は括弧内に配置されます：input(type="text")。
テキストコンテンツは保持されますか？
はい。テキストノードは親タグと同じ行にインラインコンテンツとして出力されます。
データは保存されますか？
いいえ。全ての処理はブラウザ内で行われます。
関連ツール
HTMLを操作するための他のツール：