🖼 HTML 貼り付けプレビュー
HTML を貼り付けると右側のサンドボックス iframe に即時レンダリング。HTML メールのモックアップや Outlook 互換性確認、デバイス幅切替に最適。
🔒 プライバシーとセキュリティ
- ・レンダリングはローカルのサンドボックス iframe (sandbox=allow-same-origin) で実行されます
- ・script タグは実行されません (sandbox により無効化)
- ・HTML テキストはサーバーに一切送信されません
- ・ライブラリ不要・純 JS で動作します
📝 HTML 入力
👁 プレビュー
📖 つまずきやすいポイント
貼り付けた HTML をサンドボックス iframe に即時描画し、幅と背景を切り替えて確認できます。<script> は実行されず、HTML はサーバーに送信されません。ここで見えているのは「モダンブラウザで表示した場合の見た目」だけです — HTML メールの用途で使うなら、この結果と受信箱での見え方は別物だと最初から考えてください。メールクライアントはそれぞれ独自のレンダリング処理を持ち、届いた HTML を書き換えてから表示するからです。
| ケース | 何が起きるか | どうする |
|---|---|---|
| ここでは崩れないのに Outlook だけ崩れる | Windows デスクトップ版の Outlook は、ブラウザではなく Word のレンダリングエンジンで HTML を描画します。その結果、float・position・max-width・background-image・角丸・box-shadow がまとめて無視されます。<div> を並べたモダンなレイアウトはほぼ確実に 1 カラムに潰れ、ここでのプレビューでは絶対に再現できません。世界のメール開封の相当数がまだこの経路を通ります。 |
メール用の HTML は入れ子の <table> で組み、幅は CSS ではなく width 属性で指定してください — 2000 年代の書き方に見えますが、これが現在も唯一確実な方法です。全体幅は 600px が事実上の標準です。背景画像がどうしても要るなら <!--[if mso]> の条件分岐で VML を書き足します。最終確認は必ず実機で行ってください — 自分宛に送って Outlook・Gmail・iOS Mail の 3 つで開くだけでも、致命的な崩れはほぼ捕まえられます。 |
| CSS のクラスが効かない・style タグごと消える | 多くのメールクライアントは、受け取った HTML から <head> ごと <style> を取り除きます。本文だけを自分のページに埋め込んで表示する仕組みなので、<head> の中身が残らないのです。Gmail は一部を残しますがクライアントとバージョンで挙動が違い、Web 版では効いたのにモバイルアプリでは効かない、ということが普通に起こります。ここのプレビューは <style> をそのまま解釈するので、この差は絶対に見えません。 |
スタイルはすべて style= 属性にインライン化してください。手で書くのは非現実的なので、Premailer や juice のようなインライナーをビルド工程に入れます — <style> で書いた CSS を各要素の属性に展開してくれます。ただしメディアクエリと擬似クラスはインライン化できません。したがってレスポンシブ対応は「メディアクエリで作り分ける」のではなく、最初から 1 カラム・画像は width:100%・フォントサイズは 14px 以上、という「どの幅でも壊れない作り」で吸収するのが確実です。 |
| 画像が表示されない | プレビューで出ない場合は相対パスがほぼ原因です。./img/logo.png と書いても、iframe には基準となるページが無いので解決先がありません。ところが本番のメールでは、絶対 URL にしても最初は表示されないのが普通です — Gmail も Outlook も既定で外部画像をブロックし、受信者が「画像を表示」を押すまで読み込みません。つまり多くの受信者にとって、最初に目に入るのは画像が抜けた状態のメールです。 |
プレビューでは絶対 URL か data URI を使ってください。本番では、画像がブロックされた状態で意味が通るかどうかが実質的な設計要件になります — alt を必ず書き、ロゴやボタンの背後には近い色の bgcolor を敷いて、画像が出なくても文字が読めるようにします。本文を 1 枚の画像にするのは最悪の選択です (ブロックされると本文が完全に消え、迷惑メール判定も上がります)。data URI での埋め込みは、Gmail が対応していないので実務では使えません。 |
幅のプリセットはビューポートの幅を変えているだけで、実機の再現ではありません。iOS Mail と Gmail のダークモードは、届いた HTML の色を自動で反転させます — 白背景に濃い色の文字で作ったメールが、受信箱では暗い背景に薄い文字で表示され、ロゴの周りだけ白い四角が残るのはこれが原因です (透過 PNG を使えば回避できます)。セキュリティ面では、sandbox はスクリプトを止めますが、貼り付けた HTML が安全になるわけではありません。CSS だけでも本物そっくりのログイン画面は作れますし、<a href> は生きています。出所の分からない HTML をプレビューしたときは、中のリンクを踏まないでください — 見た目を確認するのが目的なら、リンク先を見る必要はないはずです。
📖 使い方
-
1
HTML を貼り付け左側のテキストエリアに HTML を貼り付け、または .html ファイルを読み込みます。
-
2
デバイス幅を選択デスクトップ / タブレット / Email 600 / モバイル 375 のいずれかを選んでレスポンシブ確認。
-
3
背景を切替白・暗色・市松模様の 3 種類で表示確認。HTML メール用途では白基調が定番です。
❓ よくある質問
script タグは動きますか？
HTML メールのプレビューに使えますか？
HTML はサーバーに送信されますか？
🔗 関連ツール
🐛 このツールで問題が発生しましたか？
完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
ご報告ありがとうございます！
運営者に届きました。改善の参考にさせていただきます。