HTMLライブプレビュー
HTML・CSS・JavaScriptを入力するだけで即座にプレビュー表示できる無料オンラインエディタ。上下/左右レイアウト切替・サンプル付き、CodePenの代替として軽量に動作。学習用のちょっとしたテスト・CSS調整・スクリプト動作確認に、登録不要でブラウザ完結。
HTML・CSS・JavaScriptを入力してリアルタイムでプレビュー表示できる軽量オンラインエディタです。CodePen や JSFiddle の代替として、ちょっとした確認に最適です。
// HTMLライブプレビューの機能と特徴
こんな場面で役に立ちます
「CSSのちょっとした挙動を試したい」「HTMLタグの書き方を思い出したい」「JavaScriptのスニペットを動かしてみたい」「アイデアを素早くプロトタイプしたい」「学習中の内容を試したい」といった、ちょっとした確認・実験の場面で活躍します。CodePenやJSFiddleのように登録不要で、ブラウザだけで完結する軽さがメリットです。
HTML/CSS/JS を3タブで編集
各言語ごとにタブで整理して書けます。HTML タブ内にスタイルやスクリプトを直接書いても、CSS/JS タブに分離して書いても OK。プレビューは自動で結合してレンダリングします。完全なHTMLドキュメント（`<!DOCTYPE html>` から書く）にも対応しています。
リアルタイムプレビュー
コードを入力・変更するたびに、右側（または下側）のプレビューが即座に更新されます。CSSの微調整、JavaScriptのイベント動作確認、レスポンシブの見え方確認など、書きながら結果を見られるのでトライ＆エラーが快適です。sandboxed iframe で安全に実行されます。
関連ツール
Markdown を試したいときは Markdown プレビュー、フローチャートや図を書きたいときは Mermaid プレビュー、CSS の box-shadow・グラデーションを作りたいときは CSS Box Shadow ジェネレーター や CSSグラデーション生成 が便利です。
// HTMLライブプレビューに関するよくある質問
- CodePenやJSFiddleとの違いは何ですか？
- 本ツールはアカウント登録不要・完全ブラウザ完結の軽量エディタです。CodePen 等の高度なコード共有・保存・コラボ機能はありませんが、「ちょっとした確認・動作テスト」に特化しています。すぐに開いて、すぐに閉じる用途に最適で、面倒な初期設定なしで即使えます。
- JavaScript は動きますか？
- はい、sandboxed iframe 内で実行されます。alert・DOM操作・イベントハンドラ・基本的な API 呼び出しは動作します。ただし外部APIへの fetch など一部の機能は sandbox 制限で使えない場合があります。純粋なDOM操作や UI 動作の確認には十分です。
- 外部ライブラリ（jQuery・React CDN 等）は使えますか？
- はい、HTMLタブ内に `<script src="https://cdn.jsdelivr.net/...">` のようなCDNリンクを書けば、外部ライブラリを読み込めます。React・Vue・Tailwind CSS・Bootstrap などCDN配布されているものは基本的に動きます。ただしCORS制限で一部通信できない場合があります。
- レスポンシブデザインの確認はできますか？
- プレビュー領域はエディタとの分割サイズに応じて表示されるので、ブラウザウィンドウをドラッグしてリサイズすれば大まかなレスポンシブ確認はできます。正確なデバイスシミュレーションが必要な場合はブラウザの開発者ツール（DevTools）の「デバイス モード」を併用してください。
- 入力したコードは保存されますか？
- 現バージョンではブラウザのメモリ上にのみ保存されます。ページをリロードすると消えるため、大事な内容はCOPYボタンでHTMLをコピーして手元に保存してください。今後、ローカルストレージ保存機能を追加予定です。
- 完全なHTMLドキュメントを入力しても良い？
- はい、`<!DOCTYPE html><html><head>...</head><body>...</body></html>` のような完全なHTMLをHTMLタブに入れられます。その場合はそのまま表示され、CSS/JS タブの内容は head/body に自動挿入されます。ブラウザで表示されるものと同じ結果を得られます。
- エラーが出た時のデバッグ方法は？
- プレビューが崩れた場合は、ブラウザの開発者ツール（F12キー）を開いて「Console」タブでエラー確認するのが早いです。sandboxed iframe 内のエラーもここに表示されます。CSSのタイポや JavaScript の構文エラーはこの方法で特定できます。
- 動的にfetchでAPIを叩けますか？
- 同一オリジンポリシー・sandbox制限により、多くの外部APIは呼び出せません（CORS エラー）。CORS 対応の公開API（無料の天気APIなど）や、data URIで内容を渡す方法は動きます。本格的なAPI連携テストには本ツールは向いていません。
- レイアウトを縦/横に切替できますか？
- はい、エディタとプレビューの配置を「上下（縦並び）」「左右（横並び）」で切り替えられます。横長のモニターなら左右、縦長のディスプレイなら上下、と用途に合わせて選べます。狭い画面ではプレビュー面積を最大化した縦並びが便利です。
- 入力したコードは外部に送信されますか？
- いいえ、すべての処理はブラウザ内で完結します。入力したHTML・CSS・JSはサーバーに送信されず、他人からも見られません。社内でしか使わないスニペット・機密性のあるサンプルコードも安心してテストできます。
// HTMLライブプレビューの使い方
-
コードを入力
HTMLタブにHTMLコードを入力します。必要に応じてCSS/JSタブも使い、スタイルとスクリプトを分けて書けます。SAMPLEボタンでサンプルコードを試すこともできます。
-
プレビューで動作確認
入力と同時にプレビューがリアルタイムで更新されます。上下/左右レイアウトを切り替えて、作業しやすい配置に調整してください。
-
結果をコピー
COPYボタンでHTML/CSS/JSを結合した完全なHTMLドキュメントをクリップボードにコピーできます。ファイルとして保存したり、CodePen等の共有サービスに移したい時に使ってください。
カテゴリ デザイン