Softonic

レンダリング HTML ビューア

ステップ 1 / 2
次へ

メールのテンプレート、スクレイピングしたページの断片、ドキュメントの例など、どんな HTML でも貼り付けて「レンダリング」をクリックすれば、隔離された iframe 内に描画された様子を確認できます。フレームはブラウザで最も厳格なサンドボックスで動作し、スクリプトは実行されず、フォームは送信できず、マークアップはページ遷移も周囲のページへの干渉もできません。ステージングサーバーを用意することなく「このマークアップは実際どう見えるのか」に答える、最速の方法です。

HTML をプレビューする手順

  1. 1

    HTML を貼り付ける

    完全な文書でも、ばらばらの断片でも、ソース欄に入れてください。貼り付けたものが、書かれたそのままレンダリングされます。

  2. 2

    「レンダリング」をクリック

    ビューアがあなたの HTML を隔離された iframe に書き込み、その結果をページ上に直接表示します。

  3. 3

    プレビューを見る

    フレームはブラウザと同じようにマークアップを描画します。見出し、表、リスト、インラインスタイル、SVG がすべて現れます。

  4. 4

    調整して再レンダリング

    ソースを手直しして、好きなだけレンダリングし直し、各バージョンの見え方を比べられます。

なぜフレームは隔離されているのか

貼り付けた HTML には何でも含まれ得ます。<script> タグ、<img onerror="..."> の仕掛け、どこかへデータを送るフォーム、別サイトを読み込む <iframe> などです。それらがページに触れないよう、プレビューは sandbox 属性を空にした <iframe sandbox> に書き込まれます。これは存在する中で最も制限の厳しい設定です。このモードではブラウザが、スクリプトの実行、フォームの送信、ポップアップ、トップレベルのナビゲーション、同一オリジンへのアクセスを一度にすべてブロックします。マークアップに何の権限も与えずに、見た目の結果だけを確認できます。

スクリプトは決して動かないため、JavaScript に依存するもの（読み込み時にハイドレートする Web コンポーネント、自ら描画するグラフ、空の <div> にマウントするフレームワークなど）は、スクリプトによる結果ではなく、静的なマークアップだけを表示します。これは意図的な取捨選択で、対話的なプレビューよりも、安全で予測可能なプレビューを選んでいます。

ビューアがうまく描画するもの

コンテンツの種類 備考
メールの HTML テーブルベースのレイアウトやインラインスタイルは、多くのクライアントが描くとおりに表示されます
ブログ記事の本文 見出し、リスト、引用、画像はスクリプトなしですべて表示されます
スクレイピングした断片 取得したマークアップが、単独で成立するほど完全かどうかを示します
インライン SVG どんなサイズでも描画され、アイコンの確認に便利です
静的なコンポーネントのマークアップ マークアップは描画されますが、JavaScript による挙動は描画されません

このツールの良い使い方

  • メールテンプレートの QA。 メールエディタからの書き出しを貼り付ければ、自分にテスト送信せずにレイアウトを確認できます。
  • スクレイピングデータの簡易チェック。 ページから innerHTML を少し取得しました。それは意味のある見た目に描画し直せますか。できなければ、その断片はおそらく不完全です。
  • Markdown から HTML への確認。 テキストをコンバータに通し（HTML から Markdown ツールが往復変換します）、その結果の HTML をここでプレビューします。
  • 学ぶ・教える。 ドキュメントの例を貼り付け、ブラウザがそれをどう配置するかを正確に観察できます。

気をつける点

  • 相対 URL。 /assets/logo.png のような相対パスで参照される画像やスタイルシートは、解決すべきサーバーがないため読み込まれません。画像を表示したい場合は、絶対 URL の https:// か data: URI を使ってください。
  • 外部リソース。 他サイトから読み込むフォント・スタイルシート・画像は、そのサイトが許可するかどうかに依存します。中にはフレーム内での読み込みをブロックするヘッダーを送るものもあります。
  • スクリプトなし。 マークアップが JavaScript でしか動き出さない場合、プレビューはスクリプト実行前の状態を表示します。これは想定どおりで、不具合ではありません。

よくある質問

はい。プレビューは何の許可も与えられていない完全に隔離された iframe で動作するため、スクリプトは実行できず、マークアップは周囲のページに到達できません。悪意ある HTML でも、フレーム内で自分自身を描画することしかできません。

いいえ。サンドボックスはスクリプトの実行を完全にブロックするため、<script> タグやインラインのイベントハンドラは無視されます。表示されるのは静的なマークアップで、まさにそれがプレビューを安全にしています。

相対パスには解決すべき対象がなく、またホストによってはフレーム内で自分の画像が読み込まれるのを防ぐヘッダーを送ります。絶対 URL の https:// を使うか、画像を data: URI として埋め込んでください。

はい。文書全体（doctype、<head>、<body> などすべて）を貼り付ければ、書かれたそのままレンダリングされます。ばらばらの断片も使え、残りはブラウザが補います。

このツールは貼り付けた HTML をテキストとしてレンダリングし、URL を取得することは一切ありません。何をレンダリングするかを正確に制御でき、メールテンプレート、スクレイピングした断片、素早いデバッグに便利です。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

EditorConfig ジェネレーター

インデント、改行コード、文字コードのルールから .editorconfig を作成し、リポジトリで使っている言語ごとに正しいセクションを追加します。Python、Go、YAML、Makefile などに対応。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

このツールは他の言語でも利用できます