HTMLライブプレビュー

HTMLライブプレビューは、HTML、CSS、JavaScriptを記述して結果を 即座に確認できる、無料のブラウザベースコードエディタです。 CodePenやJSFiddleの軽量な代替として機能しますが、決定的な違いが あります。すべての処理がブラウザ内で完結するため、コードが サーバーに送信されることはなく、機密性の高いマークアップや 独自のスタイルでのプロトタイピングに安全に使用できます。

エディタはHTML、CSS、JavaScriptの3つのパネルに分かれており、 最後のキー入力から300ミリ秒後に自動更新されるライブプレビューが 付いています。プレビューはsandbox="allow-scripts"属性を 持つサンドボックス化された<iframe>内で実行されるため、 JavaScriptは実行できますが、親ページへのナビゲーションや コンテキスト外のCookieへのアクセスはできません。

組み込みのコンソール出力パネルは、スクリプトからの console.log、console.error、 console.warn、console.infoの呼び出しを キャプチャするため、ブラウザのDevToolsを開かずにデバッグ できます。キャッチされなかったランタイムエラーも、可能な場合は 行番号付きでキャプチャ・表示されます。

水平レイアウト（エディタが上、プレビューが下）と垂直レイアウト （エディタが左、プレビューが右）を画面サイズや好みに応じて 切り替えられます。CSS Flexboxデモ、CSS Gridデモ、フォーム レイアウト、アニメーション例など6つのプリセットテンプレートが 用意されており、すぐに実験を始められます。完了したら、結合 されたHTMLドキュメントをクリップボードにコピーするか、 スタンドアロンの.htmlファイルとしてダウンロードできます。

1. ドロップダウンからテンプレートを選択するか、ゼロから始めます。
2. HTMLタブにHTMLを記述または貼り付けます。プレビューは短い遅延後に自動更新されます。
3. CSSタブでスタイルを追加し、JSタブでJavaScriptロジックを記述します。
4. プレビュー下のConsoleパネルでconsole.log出力やエラーメッセージを確認します。
5. レイアウトボタンでHorizontalとVerticalレイアウトを切り替えます。
6. Run をクリックしてプレビューを強制更新、Copy HTML で完全なドキュメントをコピーします。
7. Download で結合されたHTMLをファイルとして保存、Clear で全エディタをリセットします。
8. キーボードショートカット：Ctrl+Shift+C で結合HTMLをクリップボードにコピー。