HTML ビューアー
フレームで HTML プレビュー。
このツールについて
HTML の断片をサンドボックス付きの iframe に表示し、別ファイルを作らずに構造を確認できます。スクリプトは隔離されるため、これはマークアップのプレビューであり、アプリ全体の実行ではありません。
使い方
断片を貼り付けてプレビューを実行し、フレームの表示を確かめてください。メール用のブロックや静的コンポーネントの下書きを数秒で見たいときに便利です。
例
サンプルはインラインスタイル付きで、すぐに表示を確認できます。
入力
<article style="font-family:system-ui;padding:1rem">
<h1 style="margin:0 0 .5rem">Preview card</h1>
<p style="margin:0;color:#334155">Sandboxed HTML viewer example.</p>
</article>出力
(rendered in the preview frame)ヒント
表示が素っ気ない場合は、フレームが読み込まない外部スタイルシートに依存していた可能性があります。
知っておきたいこと
プレビューでスクリプトは動きますか?
いいえ。フレームはスクリプト権限なしでサンドボックス化されており、マークアップと CSS だけを表示します。動作確認は実際のページで行ってください。
プレビューに Tailwind のクラスは反映されますか?
初期状態では反映されません。フレームにはスタイルシートがないため、コンパイル済み CSS への <link> を追加するか <style> ブロックに貼り付けるまで、ユーティリティクラスは何もしません。スクリプトがブロックされるため、Tailwind の Play CDN スクリプトは動きません。