カードのHTML
入力
<section class="card"><h1>見出し</h1><p>左側に HTML を貼り付けると、右側で見え方を確認できます。</p></section><style>.card{padding:32px;border-radius:16px;background:#f6f5ef}</style>出力
カードのプレビュー
HTMLライブプレビュー
左側に HTML を貼り付け、右側で安全に制限した表示を確認できます。
開発者向けツール
できること
- 共有前に小さな HTML スニペットを確認する
- メールや記事の一部の見え方をざっと見る
- 別ファイルを作らずに生成 HTML を確認する
使い方
- HTML の一部、またはドキュメントをエディタに貼り付けます。
- 右側のプレビューと、外した要素・外部読み込みの数を確認します。
- 必要なら、整理した HTML をコピーします。
例
記事セクション
入力
<article><h1>お知らせ</h1><p>小さな作業をすぐ確認できます。</p><ul><li>整形</li><li>確認</li><li>コピー</li></ul></article>
出力
記事セクションのプレビュー
知っておきたいこと
- 完全なブラウザタブではなく、安全に制限したプレビューです。
- スクリプト、イベント属性、フォーム、埋め込み、外部読み込みは制限されます。
- 外部 CSS ファイルやリモート画像は読み込みません。
- 複雑なアプリ画面は本番環境と同じ挙動にならない場合があります。
FAQ
- JavaScript は実行されますか？
- いいえ。sandbox iframe を使い、スクリプトやイベント属性は表示前に外します。
- 外部画像やCSSは読み込まれますか？
- いいえ。リモート画像、外部 CSS、埋め込みなどの外部読み込みは外します。
- アプリ画面を完全に再現できますか？
- いいえ。小さな HTML、記事の一部、簡単なレイアウト確認向けです。複雑なアプリの挙動確認には向きません。
- 貼り付けた HTML は保存されますか？
- いいえ。KoguNavi に貼り付けた HTML を保存する機能はありません。
関連する道具
近い用途のツールです。