幅
HTML
プレビュー
「検証」を押すと、要素数、見出しのアウトライン、マークアップの問題一覧を確認できます。
問題
見出しのアウトライン
最も使用されているタグ
スクリプトの実行が許可されている場合、プレビューからのコンソール出力がここに表示されます。
「検証」を押すと、要素数、見出しのアウトライン、マークアップの問題一覧を確認できます。
スクリプトの実行が許可されている場合、プレビューからのコンソール出力がここに表示されます。
メールのテンプレート、チケットに貼られたコード片、書き出したレポートなど、HTMLの一部がどう表示されるかをただ確認したいときがあります。貼り付けると、入力に合わせて、制限された枠の中で、選んだ画面幅でレンダリングされます。プレビューの横で、コードを整形したり圧縮したり、コンソール付きでスクリプトを実行したり、マークアップの実際の問題を一覧で確認したりできます。
貼り付けた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 の断片がこれで減点されることはありません。
多くの人がスマートフォンでメールを開くので、まずスマートフォン幅（375 px）で確認し、次にタブレット（768 px）とデスクトップ（1280 px）で見てください。スクリプトはオフのままに。メールソフトは JavaScript を実行しないため、スクリプトなしのプレビューのほうが受信者の見え方に近くなります。画像は https:// で始まる絶対 URL にしてください。プレビューも受信者のメールソフトも、あなたのパソコン上のファイルは見えません。最小化は通常のコメントを削除しますが、<!--[if で始まる条件付きコメント（<!--[if mso]> ... <![endif]--> など）は残します。ただし <!--[if !mso]><!--> パターンの閉じタグ <!--<![endif]--> は残らないので、このパターンを使うテンプレートは最小化しないでください。Outlook でそれ以降がすべて非表示になるおそれがあります。プレビューはブラウザでの表示です。Windows 版のクラシック Outlook は Word のエンジンでメールを描画するため、大量送信の前にそちらにもテストメールを送って確認してください。
プレビュー、整形、最小化はブラウザ内で行われます。マークアップをサーバーに送るのは検証レポートだけで、サーバーで解析されて同じレスポンスで返されます。ディスクへの書き込みやログへの記録は行わず、利用記録には件数しか残りません。
貼り付けたコードは信頼できないため、スクリプトは初期状態でオフです。「スクリプトを実行」にチェックを入れると、サンドボックス内のままJavaScriptを有効にしてプレビューが再読み込みされ、コンソール出力がプレビューの下に表示されます。
プレビューは貼り付けたテキストから作られ、あなたのPCやサーバーから読み込まれるわけではありません。そのため images/logo.png のような相対パスはこのサイト上で探され、見つかりません。絶対URLを使うか、ファイルの実際の場所を指す <base href="..."> タグを追加してください。
タグ間のインデントを付け直すだけで、pre、textarea、script、style の中身には触れません。インライン要素間の空白がまれにわずかにずれることがあるため、整形後はプレビューを確認してください。
検証レポートは最大1,000,000文字まで受け付け、問題は最大200件まで表示します。入力を快適に保つため、ライブプレビューは200,000文字を超えると一時停止します。「更新」または Ctrl+Enter で更新できます。
できます。メールの HTML を貼り付けるか .html ファイルを開き、幅を"スマートフォン"（375 px）と"デスクトップ"（1280 px）に切り替えて両方のレイアウトを確認し、"検証"を押すと alt テキストのない画像や暗号化されていない http:// で読み込むリソースが見つかります。プレビューはお使いのブラウザのエンジンで表示しますが、メールソフトはそれぞれ独自のエンジンを使い、多くは CSS の一部を無視します。そのため表示はブラウザで開いた Web メールにおおむね近いもので、すべての受信箱と同じではありません。メールソフトは JavaScript を実行しないので、"スクリプトを実行"はオフのままにしてください。本番送信の前に、読者が使うメールソフトへテストメールを送りましょう。
直接開くより安全です。ファイルを開くはファイルをブラウザ内のエディターに読み込むだけで、検証を押さない限りサーバーには何も送られません。プレビューはスクリプトとフォーム送信が無効なサンドボックスの枠内で表示されるため、ページはコードの実行、フォームの送信、このサイトの 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" リンクもすべて一覧表示されます。実際の送信は自分の開発サーバーで試してください。