HTMLビューアーとは？
サーバーを起動せずにHTMLの見た目を確認したい？それがこのツールの役割です。HTMLビューアーはHTML（HyperText Markup Language）を受け取り、コードの横のプレビューペインでリアルタイムにレンダリングします。
ランディングページのプロトタイプ作成、メールテンプレートのデバッグ、マークアップの確認など、このツールは即座にビジュアルフィードバックを提供します。ファイルの保存やローカルサーバーの起動は不要です。
すべてブラウザ内で動作します。HTMLは一切サーバーに送信されません。高速、無料、プライベートです。
HTMLビューアーの使い方
以下の手順に従って、HTMLのプレビューと作業を行ってください。
HTMLを貼り付けるかサンプルを読み込む
左のエディタにHTMLを貼り付けます。<html>、<head>、<body>タグを含む完全なページでも、スニペットだけでもOKです。サンプルボタンをクリックしてサンプルHTMLを読み込めます。
<div style="font-family: Arial, sans-serif; padding: 20px;">
<h1 style="color: #333;">こんにちは</h1>
<p>これは<strong>サンプルHTML</strong>ページです。</p>
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
</div>入力中にプレビューが自動更新されます。
ライブプレビューを確認
右のパネルがHTMLを即座にレンダリングします。ブラウザがマークアップをどう解釈するかをそのまま確認できます — スタイル、レイアウト、画像すべて含めて。
調整と反復
左パネルでHTMLを編集し、プレビューがリアルタイムで更新されるのを確認してください。スプリッターをドラッグしてパネルサイズを調整できます。
作業を共有
共有をクリックして、HTMLの共有可能なリンクを生成します。
こんな時に使える
UIスニペットのプロトタイピング
ボタンスタイル、カードレイアウト、ナビゲーションバーをすぐにテストしたい？HTMLをここに貼り付ければ、即座にレンダリングが表示されます。
メールテンプレートのデバッグ
メール用HTMLは厄介です — インラインスタイル、テーブルレイアウト、独特なレンダリング。送信前にここでテンプレートの見た目を確認しましょう。
HTMLの学習
HTMLを学んでいるなら、このツールは実験に最適です。タグを書いて何ができるか確認。さまざまな属性を試して、結果を即座に確認できます。
コードスニペットのレビュー
SlackやPRコメントでHTMLスニペットが送られてきた？ここに貼り付ければ実際の見た目がすぐわかります。
よくある質問
HTMLデータはどこかに保存されますか？
いいえ。すべてブラウザ内のJavaScriptで完全に実行されます。「共有」をクリックしない限り、HTMLがコンピューターから出ることはありません。
CSSとJavaScriptをサポートしていますか？
はい。インラインスタイルと<style>タグは正しくレンダリングされます。<script>タグ内のJavaScriptはサンドボックス化されたプレビューiframe内で実行されます。
プレビューは安全ですか？
プレビューはサンドボックス化されたiframe内でレンダリングされ、メインページから分離されています。
完全なHTMLドキュメントを使用できますか？
もちろんです。<!DOCTYPE html>、<html>、<head>、<body>タグを含む完全なHTMLドキュメントでも、<div>のようなフラグメントでも使えます。
ライブプレビューはどのように動作しますか？
エディタで入力するたびに、300msの短い遅延の後、プレビューiframeがHTMLコンテンツで更新されます。
パネルのサイズを変更できますか？
はい。2つのパネル間のスプリッターバーをドラッグしてサイズを調整できます。モバイルではパネルが縦に積み重なります。
その他のHTML＆マークアップツール
このビューアーはHTMLのプレビューに最適ですが、他のツールが必要な場合もあります：