HTMLプレイグラウンド
サンドボックス化されたiframeでリアルタイムプレビューを表示するHTML/CSS/JSの試作ツール。localStorageに自動保存され、すべての処理はクライアント側だけで完結します。
入力を止めてから300ミリ秒後に、プレビューが自動的に更新されます。
プレビュー
使い方
- 1 HTML・CSS・JSのいずれかのペインを編集します。入力を止めてから300ミリ秒後にプレビューが更新されます。
- 2 スニペットを保存すると、作業内容がlocalStorageに残り、次回アクセス時にも呼び出せます。
- 3 「リセット」を押すとサンプルコードを読み込み直せます。
このツールを使う理由
- HTML・CSS・JSの3つの編集ペインが、1つのライブプレビュー用iframeに連動しています。
- localStorageによるスニペット保存 — タブを閉じて戻ってきても、コードはそのまま残っています。
- iframeはサンドボックス化(allow-scriptsのみ許可)されており、JSは実行できますがtoolsページのオリジンにはアクセスできません。
- 完全にクライアント側で動作するため、キー入力のたびにサーバーへ通信が発生することはありません。
よくある質問
外部ライブラリをインポートできますか?
はい。HTMLペイン内に<code class="font-mono text-xs"><script src="https://…"></code>タグを追加してください。次回プレビューが再構築されるタイミングで読み込まれます。
iframeはサンドボックス化されていますか?
はい。<code class="font-mono text-xs">sandbox="allow-scripts"</code>を設定し、意図的に<code class="font-mono text-xs">allow-same-origin</code>を付与していません。そのため、プレビュー側からこのページやそのストレージを読み取ることはできません。
作業内容はどこに保存されますか?
Saveを押したときにのみ、ブラウザの<code class="font-mono text-xs">localStorage</code>に保存されます。サーバーへは何も送信されません。
HTMLプレイグラウンド とは？
HTMLプレイグラウンドは、HTML・CSS・JavaScriptを同時に編集しながら、サンドボックス化されたiframe内で結果をリアルタイムに描画できるツールです。作業内容はブラウザのlocalStorageに自動保存されるため、セッションをまたいでもコードが失われません。処理はすべてクライアント側で完結し、サーバーには何もアップロードされないので、フロントエンドのコードを気兼ねなく試せるプライベートな作業空間になります。
HTMLプレイグラウンド は Zerethon Tools が提供する無料の 開発者 ユーティリティです。サンドボックス化されたiframeでリアルタイムプレビューを表示するHTML/CSS/JSの試作ツール。localStorageに自動保存され、すべての処理はクライアント側だけで完結します。. ブラウザ上で完全に動作します — 登録不要、アップロード不要。
- カテゴリ
- 開発者
- 料金
- 無料
- プライバシー
- ブラウザベース
- 登録
- 不要
プライバシー
明記されない限り、データがブラウザの外に送信されることはありません。HTMLプレイグラウンド は完全にクライアント側で動作します — サーバーへのアップロードなし、ログなし、入力内容のトラッキングなし。
関連ツール
JSONフォーマッター
JSONをオンラインで整形・検証・圧縮。無料・登録不要 — データはブラウザの外へ送信されません。
ツールを開くSQLフォーマッター
SQLクエリをオンラインで整形 — MySQL、PostgreSQL、SQLite、SQL Server、Oracle、BigQueryのコードをきれいに整えます。
ツールを開くUUID生成ツール
オンラインでUUIDを生成 — v1、v4、v7、Nilに対応。最大10,000件の一括生成が可能。無料・登録不要。
ツールを開くパスワードジェネレーター
暗号学的に安全な強力なランダムパスワードを生成します。長さと文字セットを自由にカスタマイズ可能 — すべてブラウザ内で完結します。
ツールを開くZerethon Social で作成・共有・成長しよう
無料登録。ポイントを獲得し、実績を集め、世界中のクリエイターとつながりましょう。