HTML Preview

Preview HTML code

Preview HTML code ブラウザ内でローカルに実行

About the

HTML プレビューは HTML のフラグメントをライブでレンダリングするため、ファイルを保存して開かなくても、生成される内容を確認できます。これは、電子メールテンプレート、コンポーネントのマークアップ、コンテンツ管理システムからのスニペット、またはどこかに貼り付ける前に注目したいその他の短いスニペットを対象としています。編集とプレビューの切り替えは瞬時に行われるため、マークアップを調整するための高速ループになります。

Where people use the

テストを送信する前に電子メールテンプレートのフラグメントを確認します。
コンテンツ管理システムから貼り付けられたマークアップをプレビューします。
プルリクエストに貼り付ける前にスニペットの健全性をチェックします。
テーブルまたはリストが期待どおりにレンダリングされるかどうかをテストします。

How to use the

1
マークアップを貼り付けます
HTML フラグメントをエディターに入力するか貼り付けます。ドキュメント全体でも、一部だけでも機能します。
2
プレビューに切り替える
プレビューを押してレンダリングします。マークアップは、ブラウザに表示されるのと同じようにページに描画されます。
3
元に戻して調整します
[編集] を押してマークアップに戻ります。変更は保持されるため、反復することができます。
4
満足したらコピーしてください
エディターでマークアップを選択し、プロジェクトにコピーします。

ヒントとベストプラクティス

フラグメントがここにないスタイルシートに依存している場合は、インラインスタイルを追加します。
クリーンなレンダリングは有効なマークアップの証明にはなりません。ブラウザのペーパーオーバーエラー。
スクリプトの動作を伴うページ全体ではなく、スニペットのプレビューを念頭に置いてください。

よくある質問

CSSとJavaScriptはサポートされていますか?

スタイルタグとインラインスタイルがレンダリングされます。スクリプトはマークアップとしてレンダリングされますが、これはフラグメントのプレビューであるため、スクリプトの動作は信頼できないものとして扱います。

私のスニペットが私のサイトと異なって見えるのはなぜですか?

周囲のスタイルシートが欠落しているためです。ここではフラグメントは何も継承しないため、サイトの CSS に依存するものはスタイルされていないように見えます。

外部の画像やフォントを読み込むことはできますか?

はい、パブリックにアクセス可能な場合は可能ですが、周囲のページ独自のルールは適用されません。

マークアップはアップロードされていますか?

いいえ。レンダリングはブラウザーで行われるため、未公開のテンプレートと内部コンテンツはデバイス上に残ります。

HTML を検証しますか?

いいえ、それはあなたが与えたものをレンダリングします。ブラウザーはいくつかの間違いを黙って修正するため、クリーンなレンダリングはマークアップが有効であることを証明しません。