HTMLプレビュー
使い方
- 入力欄にHTMLコードを入力または貼り付けます。
- サンドボックス化されたiframeでリアルタイムにプレビューが更新されます。
- <style>タグでインラインCSSを含めることができます。
HTMLとは
HTML（HyperText Markup Language）は、すべてのWebページの基盤となる言語です。見出し、段落、画像、リンクなどの要素を使って文書の構造と内容を定義します。ブラウザはHTMLを読み取り、私たちが目にするWebページを描画しています。このツールでは、HTMLスニペットを書いたり貼り付けたりして、レンダリング結果を即座に確認できます。ローカル開発環境を構築することなく、手軽に実験やプロトタイピング、学習が行えます。
機能
- 入力と同時に更新されるリアルタイムプレビュー。手動でのリフレッシュは不要です。
- サンドボックス化されたiframeによる安全な表示環境。
- <style>タグによるインラインCSSのサポートで、HTMLに直接スタイルを適用可能。
- 外部依存やセットアップ不要。ツールを開いたらすぐに使えます。
- ページ読み込み後はオフラインでも動作します。
サンドボックスプレビュー
HTMLプレビューは制限付きの権限を持つサンドボックス化されたiframe内で実行されます。セキュリティのためスクリプトは無効化されています。iframeはsandbox属性を使用してナビゲーション、フォーム送信、その他の潜在的に有害な操作を防止します。
活用例
- HTMLスニペット、レイアウト、CSSスタイリングの素早い検証。
- 送信前のメールテンプレートのプレビュー。
- 視覚的なフィードバックを得ながらHTMLとCSSを学習。
- 他のツール、ジェネレーター、AIアシスタントから出力されたHTMLの確認。
- UIコンポーネントやページセクションのプロトタイピング。
- HTML断片を切り出してレンダリングの問題をデバッグ。
プライバシー
すべてのレンダリングはサンドボックス化されたiframe内のブラウザで完結します。データがサーバーに送信されることはありません。
よくある質問
プレビューでJavaScriptが動かないのはなぜですか？
スクリプトは意図的に無効化されています。プレビューはallow-scripts権限を持たないサンドボックス化されたiframeを使用するため、<script>タグやインラインのイベントハンドラは実行されません。これは不具合ではなく安全のための仕様です。
完全には信頼できないHTMLを貼り付けても安全ですか？
はい。HTMLはスクリプト・ナビゲーション・フォーム送信をブロックするサンドボックス化されたiframe内で描画され、処理はすべてブラウザ内で完結します（サーバー送信なし）。そのため、信頼できないHTMLやAI生成のHTMLでも安全にプレビューできます。
CSSによるスタイリングは使えますか？
はい。<style>タグによるインラインCSSは完全にサポートされ、プレビューに反映されるため、HTMLに直接スタイルを適用できます。外部スタイルシートやリモートリソースはサンドボックスによって制限される場合があります。
入力すると自動でプレビューが更新されますか？
はい。入力を編集するたびにリアルタイムで再描画されます。手動で更新ボタンを押す必要はありません。
本格的なコードプレイグラウンドとの違いは何ですか？
本ツールはセットアップ不要・スクリプト実行なしでHTMLとCSSを即座に描画することに特化しており、素早い確認や学習に最適です。JavaScriptの実行やバンドルを伴う本格的なプレイグラウンドとは別カテゴリのツールです。