[完全無料]HTMLプレビューで即チェック！初心者でも簡単にデザイン確認！

操作方法

1. 画面上部の「エディタ」欄に、HTMLを貼り付け/入力する。
2. 右上トグル
   • 簡易サニタイズ：<script>…</script>、on*=属性、javascript:URL を除去。
   • ミニスキン：読みやすい最小スタイル（余白・見出し・表・コード等）を自動付与。外したい場合はチェックを外す。
3. 幅/高さスライダーでプレビューの表示サイズを調整（幅 320–1280px、高さ 380–1200px）。
4. 下部ボタン
   • コピー：エディタ内のHTMLをクリップボードへ。
   • .html保存：エディタ内のHTMLを**snippet.htmlとしてダウンロード**。
5. 「プレビュー」欄の埋め込みフレームに即時反映（ライブ更新）。

成果物（得られるもの）

• 安全にレンダリングされたライブプレビュー（Shadow DOM + sandbox iframe）。
• スタイル付きの見やすい試写（ミニスキン有効時）。
• コピー済みHTML（ワンクリック）。
• 単一HTMLファイル（snippet.html）の即時ダウンロード。
• 幅/高さを変えた画面想定での見え方確認。

注意点

• プレビュー iframe は sandbox="allow-same-origin" のため、スクリプトは実行されません（allow-scriptsを付けていない）。
  • サニタイズOFFでも実行は不可。サニタイズONだとスクリプトや危険属性は削除されます。
• 外部フォント/スクリプトは反映されません。CSSは基本OK（インライン/埋め込み）。
• 画像のクロスオリジン制約で表示できない場合があります。
• ミニスキンは見出し・表・コードなどの基本スタイルを上書きします。オリジナルの見た目を厳密検証したい場合はOFFにしてください。
• クリップボードの書き込みはブラウザの権限に依存し、環境により失敗することがあります。
• ウィジェットはShadow DOM内に隔離されており、ページ側のCSS/JSではウィジェット内部を直接上書きできません。