HTML Preview

使い方

1. HTML を左側に貼り付けます — head 付きの完全なドキュメントでも、style ブロックだけの断片でも構いません。
2. レンダリングを押します。押さなくても、入力を止めて少し待てば自動的に再描画されます。
3. ビューポート幅を 375・768・1024・全幅で切り替え、レスポンシブの効き方を確認します。
4. ステータス行に、貼り付けた内容のバイト数と直前の描画時間が出ます。
5. クリアで入力とフレームの両方を空にします。

描画にはスクリプト権限のないサンドボックス iframe を使っています。貼り付けたマークアップはコードを実行できず、ウィンドウを開いたり外側のページを移動させたりできません。

よくある用途

• メディアクエリの確認 — スタイルを貼り付けて 375 px に切り替え、モバイル側の分岐が本当に効くか確かめます。
• 貼り付ける前の目視 — 断片が実際にどう描画されるか、ソースを読んで推測するより確実です。
• 開発サーバなしでのレイアウト確認 — カード、グリッド、フォームをプロジェクトを起動せずに確認できます。
• 出自不明のマークアップを安全に見る — サンドボックスで描画すれば、自分のページの文脈から切り離せます。

よくある質問

Q: JavaScript が動きません。なぜ？ A: サンドボックスが意図的にスクリプト権限を与えていないためです。これは「自分が書いていないマークアップを安全にプレビューできる」ことの前提です。CSS、CSS アニメーション、フォーム部品は動作します。

Q: メディアクエリは本当に幅の切り替えに反応しますか？ A: はい。切り替えているのは iframe の幅で、中のドキュメントはその幅に対して自分のメディアクエリを評価します。

Q: 外部 CSS やフォントを読むページもプレビューできますか？ A: マークアップが参照していてネットワークが到達可能なら動作します。外部リクエストは遮断していません。完全にオフラインで確認したい場合は、CSS を style ブロックにインライン化してください。