HTML、CSS、JavaScript を作成すると、入力中にライブのサンドボックス化されたプレビューが表示されます。レスポンシブなデバイス幅、Monaco 構文の強調表示、Prettier 書式設定、ローカル自動保存、HTML、印刷または PDF エクスポート。無料、サインアップなし。
ライブ プレビューを備えたこのオンライン HTML エディターは、入力をやめてから約 300 ミリ秒後に、コードの横に HTML、CSS、JavaScript をレンダリングします。デスクトップ、タブレット (768px)、モバイル (375px) の幅でレイアウトを確認し、Prettier でマークアップを整えて、.html または PDF にエクスポートします。コードはこのブラウザにのみ自動保存され、アップロードされることはありません。
このライブ HTML エディターは、入力時にコードの横にマークアップをレンダリングするため、プロジェクトを設定せずにレイアウトのプロトタイプを作成し、スニペットをテストし、実験して学習することができます。構文の強調表示と自動補完に Monaco (VS Code の背後にあるエディタ エンジン) を使用し、サインアップなしで完全にブラウザ内で実行されます。
文書全体または断片を入力します。 CSS を <style> タグに配置し、JavaScript を <script> タグに配置するか、https 経由で CDN から読み込みます。
プレビュー ペインは、入力をやめてから約 300 ミリ秒後に再レンダリングされます。ワークスペースを配置するには、分割ビュー、コード ビュー、またはプレビュー ビューを使用します。
デスクトップ (全幅)、タブレット (768 ピクセル)、モバイル (375 ピクセル) を切り替えて、レイアウトがどのようにリフローするかを確認します。
「Prettify」をクリックすると、文書が Prettier で再インデントされます (スペース 2 個のインデント、行数 100 文字)。
正確なコードを .html としてダウンロードし、[印刷] → [PDF として保存] を使用して選択可能な複数ページのテキストを表示するか、[PDF] をクリックして画像を簡単にキャプチャします。
コードをエディターに貼り付けると、実行ボタンを押す必要がなく、プレビューが自動的に更新されます。 <!DOCTYPE html>、<head>、<body> を含む完全なドキュメントを貼り付けることも、いくつかのスタイルを含む <div> などのフラグメントだけを貼り付けることもでき、ブラウザによって欠落している構造が埋められます。プレビュー ビューに切り替えて結果をフル サイズで表示するか、書き込み余地が必要な場合はコード ビューに切り替えます。何かが正しく見えない場合は、まず [Prettify] をクリックします。インデントがきれいであれば、閉じられていないタグや間違って配置された </div> を見つけやすくなります。
エディターは単一の HTML ドキュメントで動作するため、CSS と JavaScript はその中に組み込まれます。スタイルを <head> の <style> ブロックに追加するか、インライン スタイル属性として追加します。また、動作を <body> の末尾の <script> ブロックに追加するか、onclick などのイベント属性として追加します。 https URL を指す通常の <link> または <script src> タグを使用して、Google Font、Tailwind の Play CDN、グラフ作成ライブラリなどの CDN からライブラリまたはフレームワークを読み込むこともできます。プレビューでは、実際のブラウザ エンジンでスクリプトが実行されるため、DOM イベント、タイマー、キャンバス、CORS 対応 API へのフェッチ呼び出しはすべて、ライブ ページ上と同様に動作します。
プレビューの上にあるデバイス ボタンを使用して、プレビューの幅を制限します。 <meta name="viewport" content="width=device-width,initial-scale=1"> を <head> に含めると、メディア クエリが電話の場合と同じようにプレビュー幅に応答します。
| プリセット | プレビュー幅 | 何を確認するか |
|---|---|---|
| デスクトップ | ペイン全体の幅 | 最大幅のコンテナ、複数列グリッド、ホバー状態 |
| 錠剤 | 768px | 一般的な md ブレークポイント: ナビゲーションの折りたたみ、2 列のレイアウト |
| 携帯 | 375px | 文字折り返し、タップ対象サイズ、画像はみ出し、横スクロール |
プレビューは、コードからロードされたサンドボックス フレームです。安全のため、その起源は不透明です。スクリプトはこのサイトの Cookie やストレージを読み取ることができず、このサイトはあなたのページを読み取ることができません。この設計では、コードではなくエディターのデバッグに時間を費やさないように、以下に示すいくつかの予測可能な制限が発生します。
| 作品 | うまくいかない（そしてその理由） |
|---|---|
| インライン <style>、スタイル属性、および <script> | src="img/logo.png" のような相対パス: サーバー上にそれらを解決するフォルダーがありません。完全な https URL またはデータ URI を使用する |
| https 経由の CDN からの CSS と JS | スクリプト内の localStorage、sessionStorage、および Cookie: サンドボックスはそれらをブロックします (これらは SecurityError をスローします)。 |
| alert()、confirm()、新しいタブで開くフォームとリンク | CORS ヘッダーを送信しない API への fetch() : 実際のサイトと同様に、ブラウザーは応答をブロックします。 |
| 公開 URL からの画像とフォント | 複数のファイル、npm インポート、またはビルド ステップ: プロジェクト IDE ではなく、単一ドキュメント エディターです |
Prettify は、Prettier の HTML フォーマッタをブラウザで実行します。ネストされたタグをスペース 2 つで再インデントし、長い行は 100 文字で折り返し、タグの幅が広すぎる場合は属性を独自の行に配置します。 HTML 構造に合わせて調整されているため、<style> ブロックと <script> ブロックの内容はほとんど作成したままになります。ページのレンダリング内容は変わりません。マークアップに Prettier が解析できない構文エラーがある場合は、メッセージが表示され、コードはそのまま残されます。
エクスポート オプションは 3 つあり、それぞれ異なるジョブに適しています。 .html ダウンロードはエディター内のバイト単位のコードであり、ブラウザーで開いたり、プロジェクトにドロップしたりすることができます。 [印刷] では、レンダリングされたプレビューがブラウザーの印刷ダイアログに送信されます。[PDF として保存] を選択すると、選択可能なテキスト、機能する複数ページ区切り、および JavaScript が描画したものを取得できます。 PDF ボタンは、静的な HTML と CSS を画像としてキャプチャし、A4 ページに分割してダウンロードするワンクリックのショートカットです。画像なのでテキストは選択できず、JavaScript で作成されたコンテンツは表示されません。クイック PDF が失敗する場合、通常の原因は CORS ヘッダーのない外部画像です。代わりに印刷を使用してください。
電子メール クライアントがサポートする HTML および CSS はブラウザよりもはるかに少ないため、電子メール テンプレートは古い規則に従っています。つまり、テーブルベースのレイアウト、幅約 600 ピクセルのコンテンツ列、<style> ブロックではなくインライン スタイル属性、および固定幅属性を持つ画像です。ここでそのように構築し、375px プリセットに切り替えて、電子メールが電話でどのようにスタックされるかを確認します。プレビューには、最新のブラウザーが電子メールをどのようにレンダリングするかが表示されます。これは、最初の確認に適しています。一部のクライアント、特に Windows 上の Outlook では表示方法が異なるため、キャンペーンを開始する前に必ず実際の受信トレイにテストを送信してください。
短いパターンを入力して適応させることができます。それぞれに数行しか必要とせず、その結果はプレビューにすぐに表示されます。
| スニペット | キーコード | それが教えてくれること |
|---|---|---|
| 中央に配置されたカード | ボディ{display:grid;place-items:center;min-height:100vh} | 1 つのルールでグリッドを中心に配置する |
| フレックスボックスのナビゲーションバー | ナビ{display:flex;justify-content:space-between;gap:1rem} | 1 行の項目の間隔 |
| レスポンシブ列 | 表示:グリッド;グリッドテンプレート列:repeat(auto-fit,minmax(200px,1fr)) | メディアクエリなしで折り返される列 |
| クリックカウンター | <button onclick="this.textContent=++n">0</button> (<script> 内で let n=0) | イベントとDOMの更新 |
| ダークモード対応ページ | @media (配色を優先: ダーク){body{background:#111;color:#eee}} | 訪問者のシステムテーマの尊重 |
CSS ジェネレーターを使用してグラデーション、シャドウ、その他の CSS を生成するSVG Forge を使用してインライン SVG アイコンを最適化するモックアップ用のサイズを変更したプレースホルダー画像を作成する
入力した内容はサーバーには送信されません。次の訪問の間に作業を維持するために、エディターはコードをこのデバイス上のこのブラウザーのローカル ストレージに自動保存します。そのため、コードは更新後もそこに残りますが、他のデバイスや他のブラウザーには同期されません。 [リセット] をクリックすると、コードがサンプル ドキュメントに置き換えられます。ブラウザの設定でこのサイトのデータをクリアすると、保存されたコピーが削除されます。共有コンピュータでは、離れる前に [リセット] を押してください。
このエディタは、アカウントを必要とせずに、スニペットのテスト、HTML の学習、電話の幅でのレイアウトのチェック、電子メール ブロックのプレビューなど、単一ファイルの高速かつプライベートな作業用に構築されています。複数のファイル、npm パッケージ、フレームワークのビルド ステップ、共有可能なリンク、またはリアルタイム コラボレーションが必要な場合は、CodePen、JSFiddle、PlayCode などの完全なプレイグラウンドの方が適しています。多くの開発者は、このようなチェックのための簡単なスクラッチパッドと、共有したいプロジェクトのための完全なプレイグラウンドの両方を使用しています。
カラーコントラストチェッカーでテキストと背景のコントラストをチェックするJSON Formatter を使用して API 応答を検証し、整形して表示する
HTML をエディターに入力するか貼り付けます。入力をやめてから約 300 ミリ秒後にプレビューが再レンダリングされ、実際のブラウザーでコードがどのように表示されるかを示します。 [実行] ボタン、インストール、サインアップはありません。
はい。 CSS を <style> ブロックまたはスタイル属性に配置し、JavaScript を <script> ブロックまたは onclick などのイベント属性に配置します。 https URL を使用して CDN からライブラリとフォントをロードすることもできます。これは単一ドキュメント エディターであるため、個別の .css ファイルと .js ファイルはサポートされていません。
乱雑な HTML または縮小された HTML を貼り付け、[Prettify] をクリックします。 Prettier は、ページのレンダリング方法を変更せずに、ネストされたタグを 2 つのスペースで再インデントし、長い行を 100 文字で折り返します。 HTML に Prettier が解析できない構文エラーがある場合、コードはそのまま残され、メッセージが表示されます。
はい、2 つの方法があります。 「印刷」→「PDF として保存」では、ブラウザーの印刷エンジンが使用され、選択可能なテキスト、複数ページの出力、JavaScript がレンダリングしたものすべてが表示されます。 PDF ボタンを使用すると、ワンクリックで静的な HTML と CSS を A4 ページに分割した画像を簡単にキャプチャできます。テキストは選択できず、JavaScript 出力は含まれません。
自分のブラウザ内でのみ。エディターはこのブラウザーのローカル ストレージに自動保存されるため、作業内容は更新後も残りますが、サーバーには何もアップロードされず、他のデバイスと同期されません。このサイトのデータを削除するには、[リセット] をクリックするか、このサイトのデータをクリアします。
img/logo.png やstyles.css などの相対パスには、解決対象となるフォルダーがありません。これは、プレビューがサーバー上のファイルではなくコードから構築されるためです。完全な https URL を使用するか、CSS を <style> ブロックに貼り付けるか、小さな画像をデータ URI に変換します。
プレビューは、不透明なオリジンを持つサンドボックス フレームで実行されるため、このサイトのデータに触れることができません。その結果、localStorage、sessionStorage、および cookie がコードで利用できなくなり、SecurityError がスローされます。ローカル ファイルまたは完全なプレイグラウンドでストレージ ロジックをテストします。
はい。タグを入力すると、結果がすぐに表示されます。基本的な構造 (<h1>、<p>、<a>、<img>) から始めて、<style> ブロックを追加して、色やレイアウトを試してください。この即時フィードバックは、ファイルを編集してブラウザーのタブを更新するよりもはるかに高速です。
はい。デスクトップ (全幅)、タブレット (768 ピクセル)、モバイル (375 ピクセル) の間でプレビューを切り替えます。ビューポート メタ タグを <head> に追加して、メディア クエリが実際の電話と同じように応答できるようにします。
Tool GuidesPhotos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.
Tool GuidesCPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.
Tool GuidesCombine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.