HTMLライブプレビュー
HTML・CSS・JavaScriptをリアルタイムでプレビュー表示できる無料オンラインエディタ。コードを入力するだけで即座に結果を確認でき、簡単なWebページの動作テストやCSS調整に最適。登録不要で上下/左右レイアウト切替・サンプル付き。
HTML/CSS/JSを入力してリアルタイムでプレビュー表示する簡易エディタです。上下/左右レイアウト切替・サンプルコード対応。
// 詳細
HTML/CSS/JS 3タブ構成
HTML・CSS・JavaScriptをタブで切り替えて編集できます。HTMLタブにスタイルやスクリプトを直接書くこともでき、CSS/JSタブで分離して書くこともできます。完全なHTMLドキュメントにも対応。
リアルタイムプレビュー
コードを入力・変更するたびにプレビューが即座に更新されます。CSSの微調整やJavaScriptの動作確認を素早く行えます。sandboxed iframeで安全に実行します。
レイアウト切替
エディタとプレビューの配置を上下（縦並び）と左右（横並び）で切り替えられます。画面サイズや作業スタイルに合わせて最適なレイアウトを選べます。
// FAQ
- CodePenやJSFiddleとの違いは？
- 本ツールはアカウント登録不要・完全ブラウザ完結の軽量エディタです。コードの保存・共有機能はありませんが、ちょっとしたHTML/CSSの確認やスニペットのテストに最適です。
- JavaScriptは実行されますか？
- はい。sandboxed iframe内でJavaScriptが実行されます。alertやDOM操作、イベントハンドラなどの基本的なJSが動作します。ただし、外部APIへのfetchなど一部の機能はsandbox制限により制限されます。
- 外部ライブラリ（CDN）は使えますか？
- はい。HTMLタブ内に<script src="https://...">タグを記述すれば、外部CDNのライブラリを読み込めます。ただし、sandbox制限によりCORSエラーが発生する場合があります。
- レスポンシブデザインの確認はできますか？
- プレビュー領域はレイアウトに応じたサイズで表示されます。正確なレスポンシブテストには専用のデバイスエミュレータをお勧めしますが、簡単な表示確認には十分です。
- 入力したコードは保存されますか？
- コードはブラウザのメモリ上にのみ存在し、サーバーには送信されません。ページをリロードするとコードは消えるため、COPYボタンで結合HTMLをコピーして保存してください。
- 完全なHTMLドキュメントも入力できますか？
- はい。<!DOCTYPE html>やhtml/headタグを含む完全なHTMLドキュメントを入力した場合、そのまま表示されます。CSS/JSタブの内容はhead/bodyに自動挿入されます。
// 使い方
-
コードを入力
HTMLタブにHTMLコードを入力します。必要に応じてCSS/JSタブも使います。SAMPLEボタンでサンプルを試せます。
-
プレビューを確認
入力と同時にプレビューがリアルタイムで更新されます。上下/左右レイアウトを切り替えて見やすい配置にできます。
-
結果をコピー
COPYボタンでHTML/CSS/JSを結合した完全なHTMLドキュメントをクリップボードにコピーできます。