ライブ プレビューを備えた HTML ランナー

視覚的なフィードバックが即座に得られるので、HTML がリアルタイムに反映されるのを確認できます。

導入

ライブ プレビューを備えた HTML ランナーを使用すると、HTML を作成するときに可能な限り最速のフィードバック ループが得られます。ファイルを保存してブラウザを更新する代わりに、レンダリングされた出力がコードのすぐ隣にリアルタイムで表示されます。

ライブ プレビュー HTML ランナーとは何ですか?

ライブ プレビュー HTML ランナーは、HTML コードを作成しながらレンダリングするオンライン ツールです。プレビュー パネルはコードを実行するたびに更新され、ブラウザーがマークアップ、スタイル、スクリプトをどのように解釈するかを正確に示します。

これは、テキスト エディターでコードを記述し、ファイルを保存して、ブラウザーを手動で更新する従来の開発とは異なります。ライブ プレビュー ランナーを使用すると、フィードバックが即座に得られるため、追加の手順は必要ありません。

ライブ プレビューの主な機能

  • インスタント レンダリング — [実行] をクリックすると、HTML がすぐにレンダリングされるのを確認できます。
  • 並列レイアウト — 左側にエディター、右側にプレビュー（モバイル上に重ねて表示）
  • 完全なドキュメントのサポート — CSS と JavaScript はプレビュー内で実行されます。
  • コンソール出力 — JavaScript ログ、エラー、警告が表示されます。
  • サンドボックス実行 — コードは安全のために分離された iframe で実行されます。

ライブ プレビュー ランナーの使用方法

  1. HTML コード ランナー を開きます。
  2. エディターに HTML コードを記述するか貼り付けます。
  3. 「実行」をクリックするか、Ctrl+Enterを押します
  4. プレビュー パネルにはレンダリングされた出力が表示されます
  5. コードを変更して再度実行し、変更を確認します

ライブ プレビューの使用例

  • CSS レイアウトをプロジェクトに実装する前にテストする
  • 視覚的な結果をすぐに確認して HTML を学習する
  • レンダリングの問題を個別にデバッグする
  • レスポンシブデザインのプロトタイピング
  • 電子メールテンプレートのプレビュー

よくある質問

「実行」をクリックするか、Ctrl+Enter キーを押すと、プレビューが更新されます。これにより、コードをいつ実行するかを制御できるようになります。

はい。 CSS アニメーション、トランジション、キーフレーム アニメーションはすべてライブ プレビューで正しくレンダリングされます。

はい。 script タグに含まれる JavaScript は、サンドボックス化されたプレビュー iframe 内で実行されます。

関連リソース