見た目を確認したいHTML断片を貼り付ける
見出し、カード、表など小さな部品を貼り付け、プレビュー更新を押しながらHTMLやCSSを調整する使い方に向いています。
HTMLを編集
🔒 画像やテキストはこのブラウザ内で処理され、サーバーへ送信されません。 プレビュー内ではスクリプトを実行しません。
無料Webツール
HTMLを編集しながら、ブラウザ上の表示結果を確認します。
🔒 画像やテキストはこのブラウザ内で処理され、サーバーへ送信されません。 プレビュー内ではスクリプトを実行しません。
小さなHTMLやCSSを編集しながら、その場で見た目を確認するプレビューです。貼り付けたJavaScriptは動かないため、主にマークアップとスタイルの確認に使います。
<style>h1{color:blue}</style><h1>Hello</h1> と入力すると、CSSを反映した見出しをプレビューできます。公開サイトの外部CSS・Webフォント・JavaScriptなどは自動で再現しません。本番完全再現ではなく、HTML/CSS断片の確認用です。
見出し、カード、表など小さな部品を貼り付け、プレビュー更新を押しながらHTMLやCSSを調整する使い方に向いています。
貼り付けたJavaScriptはプレビュー内で動きません。ボタン処理などの動作確認が必要な場合は、実際の開発環境やステージングページで確認してください。
styleタグやstyle属性はiframe内の文書へ反映されるため、小さなコンポーネントのレイアウトや色を試せます。
外部CSS、CSP、Webフォント、レスポンシブのブレークポイントなど、公開先固有の条件は別途確認が必要です。
ページ全体の再現より、見出し・カード・表・簡単な説明ブロックなどを素早く試す用途に向いています。