Responsive Preview

使い方

1. プレビューモードを選びます。外部 URL または貼り付けた HTML。
2. URL モードではアドレスを入力してプレビューを読み込むを押します —— 押すまで何も読み込みません。
3. HTML モードではパネルにマークアップを貼り付けます。各フレームは入力に合わせて更新されます。
4. 4 つのフレームを並べて確認します。375・768・1024・1440 ピクセル幅、それぞれラベル付き。
5. HTML モードではスクロール同期を有効にでき、全フレームが連動します。

よくある用途

• ブレークポイント修正の確認 —— スマホ・タブレット・デスクトップのレイアウトを 1 画面で。
• 手軽なレスポンシブ点検 —— ページを読み込み、375px で横溢れがないか確認。
• 保存前の片段プレビュー —— 断片を貼り付けて、ファイルを作らずにレイアウトを判断。
• CSS 編集中の幅比較 —— HTML を一度貼り、フレームをエディタの横に置いたまま。

よくある質問

Q: URL モードでページが読み込まれません。 A: 多くのサイトは X-Frame-Options や CSP を送り、枠内表示を禁止しています。それはサイト側の判断で、このツールでは回避できません —— タブで開いてください。

Q: URL はどこかに送信されますか？ A: どこにも送信されません。アドレスはこのページの iframe に書き込まれるだけで、取得はあなたのブラウザがサイトに直接行います。中間に代理・キャッシュ・記録はありません。

Q: URL モードでスクロール同期ができないのはなぜ？ A: クロスオリジンのフレームはスクロール位置を公開しません。セキュリティ上の当然の制約です。同期が効くのは同オリジンになる HTML モードだけです。

Q: 貼り付けた HTML のスクリプトは実行されますか？ A: されません。サンドボックスはスクリプト権限を付与しないため、script タグ・イベントハンドラ・外部リクエストはすべてブロックされます。