HTML ビューアー

HTML コードを記述または貼り付けて、ブラウザでのレンダリングを即時確認します。

レイアウト:スクリプトはサンドボックス化されており実行できません。

HTML コード

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

プレビュー

このツールについて

HTML ビューアーは HTML コードを記述または貼り付けると、ブラウザでのレンダリング結果を即時確認できるツールです。プレビューはスクリプトが無効化されたサンドボックス iframe に表示されるため、信頼できないソースの HTML も安全に確認できます。

完全な HTML ドキュメント（head、インライン CSS、style ブロック含む）と HTML フラグメントの両方に対応しています。すべての処理はブラウザ内でローカルに行われます。

使い方

左のコードエディターに HTML を入力または貼り付けてください。
レンダーボタンをクリックしてプレビューを更新してください。
上下分割レイアウトに切り替えてより広いプレビューエリアを利用してください。
エディターで Tab キーを使用してインデントできます。

活用事例

フロントエンド開発者の HTML スニペットテスト、メール開発者の HTML メールテンプレートのプレビュー、HTML を学ぶ学生の学習、コードレビュアーのレンダリング結果確認に活用できます。

よくある質問

スクリプトが無効化されているのはなぜですか？ — プレビュー iframe は sandbox="allow-same-origin" 属性を使用して JavaScript の実行を防ぎます。これにより不明なソースの HTML を安全にプレビューできます。
CSS をプレビューできますか？ — はい。HTML に style タグを含めるかインラインスタイルを使用してください。他のオリジンの外部スタイルシートは CSP によってブロックされる場合があります。
完全な HTML ドキュメントをサポートしていますか？ — はい。DOCTYPE、head、body タグを含む完全な HTML ドキュメントを貼り付けることができます。