メインコンテンツへスキップ
Z

HTMLプレイグラウンド

サンドボックス化されたiframeでリアルタイムプレビューを表示するHTML/CSS/JSの試作ツール。localStorageに自動保存され、すべての処理はクライアント側だけで完結します。

無料 登録不要 クライアントサイド プライバシーに配慮 Updated

入力を止めてから300ミリ秒後に、プレビューが自動的に更新されます。

プレビュー

使い方

  1. 1 HTML・CSS・JSのいずれかのペインを編集します。入力を止めてから300ミリ秒後にプレビューが更新されます。
  2. 2 スニペットを保存すると、作業内容がlocalStorageに残り、次回アクセス時にも呼び出せます。
  3. 3 「リセット」を押すとサンプルコードを読み込み直せます。

このツールを使う理由

  • HTML・CSS・JSの3つの編集ペインが、1つのライブプレビュー用iframeに連動しています。
  • localStorageによるスニペット保存 — タブを閉じて戻ってきても、コードはそのまま残っています。
  • iframeはサンドボックス化(allow-scriptsのみ許可)されており、JSは実行できますがtoolsページのオリジンにはアクセスできません。
  • 完全にクライアント側で動作するため、キー入力のたびにサーバーへ通信が発生することはありません。

よくある質問

外部ライブラリをインポートできますか?

はい。HTMLペイン内に<code class="font-mono text-xs">&lt;script src="https://…"&gt;</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に自動保存されるため、セッションをまたいでもコードが失われません。処理はすべてクライアント側で完結し、サーバーには何もアップロードされないので、フロントエンドのコードを気兼ねなく試せるプライベートな作業空間になります。

機能

3つのペイン

HTML、CSS、JS をそれぞれ別々に編集し、1つのライブドキュメントに結合します。

ライブプレビュー

短いデバウンスの後、編集内容が iframe に再描画されます。再読み込みは不要です。

スニペットの保存

現在の HTML/CSS/JS をブラウザのローカルストレージに保存し、後で使用できます。

100% プライベート

サンドボックス化された iframe 内でクライアント側で実行されます——何もアップロードされません。

例

Input

HTML: <h1>Hi</h1>   ·   CSS: h1{color:red}   ·   JS: console.log("ready")

Output

Live iframe preview: a red "Hi" heading (JS runs in the sandbox)

主な用途

  1. 1

    コンポーネントのプロトタイプ作成

    小さな HTML/CSS/JS のアイデアをスケッチし、即座に描画結果を確認します。

  2. 2

    CSS スニペットのテスト

    プロジェクトを構築することなく、レイアウトやアニメーションを試せます。

  3. 3

    フロントエンドの基礎を教える

    HTML、CSS、JS が1つのライブビューでどのように組み合わさるかを実演します。

概要

Zerethon の HTML プレイグラウンドは、入力するたびに独立した HTML・CSS・JavaScript のペインの内容をサンドボックス化された iframe にライブ描画します——すべてブラウザ内で完結します。編集にはデバウンス処理を適用し、完全なドキュメントを組み立て、作成したスニペットをローカルストレージに保存することもできます。何もアップロードされません——プレビューはお使いのデバイス上で実行されます。

カテゴリ
開発者
料金
無料
プライバシー
ブラウザベース
登録
不要

参考文献

プライバシー

明記されない限り、データがブラウザの外に送信されることはありません。HTMLプレイグラウンド は完全にクライアント側で動作します — サーバーへのアップロードなし、ログなし、入力内容のトラッキングなし。

関連ツール

JSONフォーマッター

JSONをオンラインで整形・検証・圧縮。無料・登録不要 — データはブラウザの外へ送信されません。

ツールを開く

SQLフォーマッター

SQLクエリをオンラインで整形 — MySQL、PostgreSQL、SQLite、SQL Server、Oracle、BigQueryのコードをきれいに整えます。

ツールを開く

UUID生成ツール

オンラインでUUIDを生成 — v1、v4、v7、Nilに対応。最大10,000件の一括生成が可能。無料・登録不要。

ツールを開く

パスワードジェネレーター

暗号学的に安全な強力なランダムパスワードを生成します。長さと文字セットを自由にカスタマイズ可能 — すべてブラウザ内で完結します。

ツールを開く

Zerethon Social で作成・共有・成長しよう

無料登録。ポイントを獲得し、実績を集め、世界中のクリエイターとつながりましょう。

無料登録