使い方

貼り付け → 実行 → 確認 → コピー。すべてはブラウザ内で完結します。

入力を貼り付ける

CSS・HTML・JSON などをエディタに貼ります。アップロードはしません。

ツールを実行する

変換または実行をクリック。結果はすぐに表示されます。

出力を確認する

生成コードと注意書きを公開前に確認します。

コピーして使う

出力をコピーしてプロジェクトに貼り付けます。

このツールについて

HTML の断片をサンドボックス付きの iframe に表示し、別ファイルを作らずに構造を確認できます。スクリプトは隔離されるため、これはマークアップのプレビューであり、アプリ全体の実行ではありません。

例

サンプルはインラインスタイル付きで、すぐに表示を確認できます。

入力

<article style="font-family:system-ui;padding:1rem">
  <h1 style="margin:0 0 .5rem">Preview card</h1>
  <p style="margin:0;color:#334155">Sandboxed HTML viewer example.</p>
</article>

出力

(rendered in the preview frame)

ヒント

表示が素っ気ない場合は、フレームが読み込まない外部スタイルシートに依存していた可能性があります。