👁️ HTMLプレビュー

HTMLプレビューについて

このライブプレビューエディタは、すべてブラウザ内で完結します。3つのボックスにHTML・CSS・JavaScriptを入力し、実行をクリックすると統合結果がiframe内にレンダリングされます。サーバーへのアップロードは一切なく、プレビューはJavaScriptによりあなたのデバイス上でローカルに構築されます。

プレビューの構築方法

実行をクリックすると、3つの入力を1つのHTMLドキュメントに統合します：CSSはheadの <style> タグで囲み、JavaScriptはbody末尾の <script> タグで囲み、HTMLはbodyに配置します。統合ドキュメントは srcdoc でiframeに書き込まれ、分離されたサンドボックスでレンダリングされます。

エディタの使い方

1. HTMLボックスにHTMLマークアップを入力します。
2. CSSボックスにスタイルを追加します。
3. JavaScriptボックスにスクリプトを追加します。
4. 実行をクリックして、下のプレビュー領域に統合結果をレンダリングします。
5. クリアで3つのボックスとプレビューをリセットできます。

よくある質問

外部ライブラリは使えますか？ はい。HTMLボックス内に <script src="..."> や <link> タグを追加して外部リソースを読み込めます。

JavaScriptが実行されないのはなぜですか？ JSが有効で構文エラーがないことを確認してください。本ツールはiframeのコンソールエラーを表示しません。複雑なスクリプトはブラウザの開発者ツールでテストしてください。

コードはアップロードされますか？ いいえ、すべての処理はローカルブラウザの分離されたiframe内で行われます。