HTMLプレビュー

ブラウザローカルのワークスペースで HTML、CSS、JavaScript をプレビューし、親の ComUtil ページから隔離されたサンドボックス iframe に描画します。

HTMLプレビューとは何ですか?

HTML プレビューは、生の HTML、CSS、JavaScript を一緒に試せるブラウザファーストのワークスペースです。重いローカルプロジェクトを用意しなくても、UI アイデアの試作、レイアウト挙動の確認、マークアップの素早い切り分けに役立ちます。

仕組み

エディターは下書きをブラウザ内にローカル保存し、隔離された origin を持つサンドボックス iframe に書き込んでプレビューを更新します。スクリプトはそのプレビュー内で実行できますが、サンドボックスが親の ComUtil ページから分離し、専用タブ経路でも同じ境界を保ちます。

主な使用例
  • HTML/CSSの学習と練習
  • UIコンポーネントのプロトタイピング
  • レスポンシブデザインのテスト
  • CSSレイアウト問題のデバッグ
  • 共有前に隔離された HTML スニペットを確認する
機能
  • 入力しながらサンドボックス プレビュー
  • HTML/CSS/JavaScriptのフルサポート
  • ブラウザローカルの下書き保存
  • より大きな表示向けの専用サンドボックス タブ
よくある質問

外部CSSフレームワークを使用できますか?

はい、Bootstrap、Tailwind、その他のフレームワークのCDNリンクを含めることができます。HTMLのheadセクションにlinkタグを追加してください。

コードは保存されますか?

コードはブラウザのローカルストレージに保存されます。同じデバイスでセッション間で保持されますが、デバイス間で同期されません。