# HTML ビューア

URL: https://discuvr.org/html-viewer/?hl=ja
Last updated: 2026-11-08
MCP tool: `inspect_html`

HTMLを貼り付けると、サンドボックス内でスマートフォン・タブレット・デスクトップ幅のライブプレビューが表示されます。整形、軽量化、コンソールでスクリプトを実行し、実際のマークアップの問題を確認できます。

メールのテンプレート、チケットに貼られたコード片、書き出したレポートなど、HTMLの一部がどう表示されるかをただ確認したいときがあります。貼り付けると、入力に合わせて、制限された枠の中で、選んだ画面幅でレンダリングされます。プレビューの横で、コードを整形したり圧縮したり、コンソール付きでスクリプトを実行したり、マークアップの実際の問題を一覧で確認したりできます。

## 機能

- 入力に合わせたライブプレビュー。200,000文字を超えると、「更新」を押すまで一時停止します。
- スマートフォン、タブレット、デスクトップ、全幅のプレビューサイズと全画面表示。
- スクリプトは初期状態でオフ。オンにするとコンソール出力とエラーを確認できます。
- 乱れたマークアップを整形または最小化。pre、script、style の中身には手を加えません。
- 検証レポート：要素数、見出しのアウトライン、具体的な問題点。
- ローカルの .html ファイルを開き、結果をコピーまたはダウンロード。

## 仕組み

1. HTMLを貼り付けるか、.html ファイルを開くか、サンプルを読み込みます。
2. プレビュー幅を選び、スクリプトの実行を許可するかどうか決めます。
3. 整形、最小化、検証を行い、結果をコピーまたはダウンロードします。

## プレビューがサンドボックスで動く理由

貼り付けたHTMLには、自分が書いていないスクリプト、フォーム、リンクが含まれている可能性があります。プレビューは独自の不透明なオリジン（opaque origin）を持つ sandbox 属性付きの iframe 内で動作するため、中身がこのサイトのCookieやセッションを読み取ったり、あなたの代わりに送信したり、このページを別の場所へ移動させたりすることはできません。スクリプトはオンにするまで無効のままです。

## 検証でチェックする内容

標準のHTMLパーサーでマークアップを読み、実際に見つけたものだけを報告します。開いたまま閉じられていないタグ、対応する開始タグのない終了タグ、alt テキストのない画像、重複した id、rel="noopener" なしで新しいタブを開くリンク、飛ばされた見出しレベル、http:// で読み込まれるリソース、そしてページ全体の場合は doctype、title、lang、viewport タグの欠落です。

## チェックがあえて指摘しないこと

指摘するのは誤りで、書き方の好みではありません。HTML 標準で省略が認められている終了タグ（</p>、</li>、</td>、</tr>、</option> など）は閉じ忘れとして挙げられず、<br>、<img>、<input> などの空要素にはそもそも終了タグが不要です。空の alt="" も代替テキストありとみなされ、装飾用の画像ではそれが正解です。target="_blank" のリンクは rel="noopener" か rel="noreferrer" があれば問題なしです。<a href> の通常の http:// リンクは安全でないとは数えず、数えるのは画像、スクリプト、スタイルシート、iframe など読み込まれるリソースだけです。見出しレベルを上に戻る（h4 から h2）のは問題なく、指摘するのはレベルを飛ばして下がる場合（h2 から h4）だけです。doctype、title、lang、viewport のチェックは、貼り付けたものがページ全体（doctype か html、head、body タグがある）の場合にだけ行うので、メールの一部や CMS の断片がこれで減点されることはありません。

## 送信前に HTML メールを確認する

多くの人がスマートフォンでメールを開くので、まずスマートフォン幅（375 px）で確認し、次にタブレット（768 px）とデスクトップ（1280 px）で見てください。スクリプトはオフのままに。メールソフトは JavaScript を実行しないため、スクリプトなしのプレビューのほうが受信者の見え方に近くなります。画像は https:// で始まる絶対 URL にしてください。プレビューも受信者のメールソフトも、あなたのパソコン上のファイルは見えません。最小化は通常のコメントを削除しますが、<!--[if で始まる条件付きコメント（<!--[if mso]> ... <![endif]--> など）は残します。ただし <!--[if !mso]><!--> パターンの閉じタグ <!--<![endif]--> は残らないので、このパターンを使うテンプレートは最小化しないでください。Outlook でそれ以降がすべて非表示になるおそれがあります。プレビューはブラウザでの表示です。Windows 版のクラシック Outlook は Word のエンジンでメールを描画するため、大量送信の前にそちらにもテストメールを送って確認してください。

## 質問

**HTMLはアップロードや保存されますか？**

プレビュー、整形、最小化はブラウザ内で行われます。マークアップをサーバーに送るのは検証レポートだけで、サーバーで解析されて同じレスポンスで返されます。ディスクへの書き込みやログへの記録は行わず、利用記録には件数しか残りません。

**スクリプトが動かないのはなぜですか？**

貼り付けたコードは信頼できないため、スクリプトは初期状態でオフです。「スクリプトを実行」にチェックを入れると、サンドボックス内のままJavaScriptを有効にしてプレビューが再読み込みされ、コンソール出力がプレビューの下に表示されます。

**相対パスの画像やスタイルシートが読み込まれないのはなぜですか？**

プレビューは貼り付けたテキストから作られ、あなたのPCやサーバーから読み込まれるわけではありません。そのため images/logo.png のような相対パスはこのサイト上で探され、見つかりません。絶対URLを使うか、ファイルの実際の場所を指す <base href="..."> タグを追加してください。

**整形するとページの見た目は変わりますか？**

タグ間のインデントを付け直すだけで、pre、textarea、script、style の中身には触れません。インライン要素間の空白がまれにわずかにずれることがあるため、整形後はプレビューを確認してください。

**どのくらいの大きさの文書を扱えますか？**

検証レポートは最大1,000,000文字まで受け付け、問題は最大200件まで表示します。入力を快適に保つため、ライブプレビューは200,000文字を超えると一時停止します。「更新」または Ctrl+Enter で更新できます。

**HTML メールのテンプレートをプレビューできますか？**

できます。メールの HTML を貼り付けるか .html ファイルを開き、幅を"スマートフォン"（375 px）と"デスクトップ"（1280 px）に切り替えて両方のレイアウトを確認し、"検証"を押すと alt テキストのない画像や暗号化されていない http:// で読み込むリソースが見つかります。プレビューはお使いのブラウザのエンジンで表示しますが、メールソフトはそれぞれ独自のエンジンを使い、多くは CSS の一部を無視します。そのため表示はブラウザで開いた Web メールにおおむね近いもので、すべての受信箱と同じではありません。メールソフトは JavaScript を実行しないので、"スクリプトを実行"はオフのままにしてください。本番送信の前に、読者が使うメールソフトへテストメールを送りましょう。

**人から送られてきたHTMLファイルを開いても安全ですか？**

直接開くより安全です。ファイルを開くはファイルをブラウザ内のエディターに読み込むだけで、検証を押さない限りサーバーには何も送られません。プレビューはスクリプトとフォーム送信が無効なサンドボックスの枠内で表示されるため、ページはコードの実行、フォームの送信、このサイトの Cookie へのアクセスができません。ただし完全な http(s) アドレスを持つ画像やスタイルシートは読み込まれるので、送信者にファイルを開いたことが伝わる場合があります。まずソースを読み、スクリプトを実行はオフのままにし、送られてきたページには決してパスワードを入力しないでください。

**ファイルを開くと日本語が � に化けるのはなぜですか?**

ファイルを開くは常にファイルを UTF-8 として読み込み、中にある <meta charset> タグは無視します。Shift_JIS や EUC-JP で保存されたページ（古い Windows のエディターやエクスポートでよくあります）は、日本語の文字を UTF-8 として正しくないバイトで保存しているため、それぞれが置換文字 � として表示されます。エディターでファイルを開き、UTF-8 で保存し直してから（メモ帳: 名前を付けて保存で文字コードを UTF-8、VS Code: ステータスバーのエンコードをクリックして Save with Encoding）、ここでもう一度開いてください。または、ブラウザーでファイルを開いてソースを表示し、ここに貼り付けてください。ブラウザーはページ自身の charset ですでにデコードしています。

**プレビューでフォームや新しいタブを開くリンクが動かないのはなぜですか?**

サンドボックスは、スクリプトを実行をオンにしていてもフォームの送信とポップアップを一切許可しません。そのため送信ボタンを押しても何も送られず、target="_blank" のリンクや window.open() の呼び出しはブロックされます。これにより、貼り付けたページがデータを送ったり他のサイトを開いたりできません。通常のリンクはプレビュー枠の中で開き、フレーム内での表示を拒否するサイトは空白または拒否された表示になります。フォームを確認するには、ソースで action、method、各フィールドを読んでください。検証では rel="noopener" のない target="_blank" リンクもすべて一覧表示されます。実際の送信は自分の開発サーバーで試してください。

## 開発者ツールのその他のツール

- [IPサブネット計算機](https://discuvr.org/ip-subnet-calculator/?hl=ja)
- [エンコード / デコード](https://discuvr.org/encode-decode/?hl=ja)
- [Unix タイムスタンプ変換](https://discuvr.org/timestamp-converter/?hl=ja)
- [システム構成図メーカー](https://discuvr.org/system-diagram/?hl=ja)

## よく一緒に使われるツール

- [テキスト比較](https://discuvr.org/text-diff/?hl=ja)
- [ウェブサイトセキュリティスキャン](https://discuvr.org/security-scan/?hl=ja)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.