貼り付け前に見た目確認したいときのPug HTML変換
Pug（旧Jade）は角括弧の多いHTMLを、インデント中心の短い記法で書けるのが魅力です。ただ、ネストが深くなると「このブロック本当に閉じてる？」を目視で追うのが急に難しくなります。通常はNode環境で`pug` CLIを回しますが、このページならその工程をブラウザ内で完結できます。 `.pug`や`.jade`を貼り付け／アップロードすれば、右側にHTMLが即時表示されます。変換処理はページ読み込み後にローカル実行され、サーバーへ送信されません。単発の「貼って終わり」変換と違い、描画プレビューまで同時に確認できるので、CMSやチームのリポジトリへ渡す前にレイアウト崩れを先に潰せます。
インデントを頭で追うより、可視で確認したほうが速い
一般的なPug HTML変換ツールはテキストボックスとダウンロードリンクだけ、という構成が多めです。短い断片なら十分ですが、ナビゲーション、カード一覧、複雑なフッターになると検証しづらくなります。このページはソースと結果を常時並べて確認可能。インデントを1段変えるとHTMLがすぐ反映され、必要に応じて描画プレビューへ切り替えて構造と余白を実画面で確認できます。 入力欄下のステータスで、テンプレートの解析可否も即座に分かります。失敗時は無言の空白ではなく、エラー位置が明示されます。ライブHTMLとサンドボックス描画をセットで確認できる点が、実務での手戻り削減に効きます。
先に制約も明示しておきます。このツールは貼り付け／インポートしたPugをブラウザ内でコンパイルするため、プロジェクトフォルダ読み込みを必要とする`include`、`extends`、外部partialは対象外です。一方で同一入力内のmixin、条件分岐、ループ、`style.` / `script.`は通常のローカルコンパイルと同様に扱えます。 また、テンプレート先頭で複数行JavaScript（例: メニュー配列）を書く場合は、単独の`-`行の下にJSブロックをインデントして記述してください。Pugは`-`直後の1行だけをコードとして解釈するため、ここを外すと分かりにくいパースエラーになりがちです。
変換ツールへ戻るソースだけでなく描画結果まで確認
プレビュータブでコンパイル済みHTMLをサンドボックスiframe表示。見出し・リスト・リンクの実表示をその場で確認できます。
文法修正を左右対照で進められる
左にPug、右にHTML。属性名やクラス記述の修正が即時反映されるため、構造の確認が速いです。
急ぎの受け渡しでも環境構築不要
チケット対応や単発LPブロックなど、短時間でHTMLが必要な場面でも`npm install pug`なしで処理できます。
Pug HTML変換はタグ変換だけでなく画面確認まで
左右可視編集、コンパイル結果の描画プレビュー、コピー用の生HTML、各種エクスポートを、ソース未アップロードのまま実行できます。
貼り付け前に信頼できる可視変換
UIはあえてシンプルです。左にPug、右に出力。入力中にHTMLが更新され、必要ならプレビューで実際のページとして確認できます。ナビ、カード、フッターのような複合レイアウトは、角括弧の羅列だけでは見落としが出ます。可視確認を挟むことで、ラッパー欠落、クラス付け先の誤り、リンク内外のテキスト位置ミスを早期に拾えます。 また生HTMLは常に1クリックで確認可能。属性検証、CMS向け断片コピー、既存ファイルとの差分確認まで、この画面内で完結します。
このページでPugをHTMLに変換する手順
Pugソースを入力
左パネルへ貼り付けるか、`.pug` / `.jade`をアップロードします。ネストはインデントで決まるため、同一ファイル内でタブとスペースの混在は避けてください。`-`で変数や配列を宣言する場合、複数行は単独`-`行の下にJSブロックとして書きます。
HTMLとプレビューを確認
右側は初期状態で描画プレビューを表示。タグ文字列を確認したい場合はHTMLタブへ切り替えます。入力欄にエラーが出ている間は、プレビューと出力が最新化されないため先に修正してください。
コピー・ダウンロード・Playground連携
他ツールへ渡すならコピー、ファイル提出なら`.html`をダウンロード。さらに見た目調整が必要な場合は「プレビュー / HTMLを可視編集」でホームのPlaygroundへ送って続き作業ができます。
Pug HTML変換で実際によくある質問
見た目を確認した上でPugをHTMLに変換しませんか？
左右編集・描画プレビュー・コピー・ダウンロードを無料で。アカウント登録は不要です。
Pug HTML変換
- PugとHTMLを左右並列で可視確認
- エクスポート前にコンパイル結果を描画プレビュー
- コピー・ダウンロード・Playground連携に対応
- ページ読み込み後はブラウザ内ローカル実行
自己完結テンプレートのみ対応。ディスク参照の`include`/`extends`は対象外です。
