HTML編集・プレビュー
エディター
※ プレビューは iframe（sandbox）で表示し、スクリプト実行を許可しません。
編集・プレビューはブラウザ内で完結します。機密情報・個人情報・APIキー等は貼り付けないでください。
プレビュー
0 bytes
HTML WEBエディターの使い方（3ステップ）
- 内容を編集する
左側のエディター（Quill）に文章や見出し、リスト、リンク等を入力します。HTMLソースを直接貼り付けたい場合は「HTMLソース」を開いて貼り付け→反映も可能です。 - プレビューを更新する
「プレビュー更新」ボタンで右側のプレビューを更新します。プレビューは iframe（sandbox）で表示され、ブラウザ内で完結します。 - HTMLをコピーして利用する
「HTMLをコピー」でクリップボードへコピーできます。ブログ本文、社内ドキュメント、メール下書き等へ貼り付けて活用してください。
主な活用シーン
HTML編集・プレビューを、次のようなシーンで活用できます。
- ブログ記事の下書きをWYSIWYGで作成し、HTMLを貼り付けて公開作業を効率化する。
- LPの一部パーツ（見出し・箇条書き・CTA）を作って、CMSへ流し込む。
- メールや社内ドキュメント向けに、読みやすい整形済みHTMLを作成する。
- Bootstrapのクラス付きサンプルを試して、見た目を確認しながら調整する。
- HTMLの学習として、編集→表示の関係を手早く確認する。
よくある質問
A : はい。公開している範囲は無料で利用できます。会員登録やログインも不要です。
A : 本ツールはブラウザ内で編集・プレビューが完結する設計で、入力内容を保存する目的の実装は行いません（※ただしブラウザ拡張や端末側の履歴等は別途ご確認ください）。
A : プレビューは安全性のため iframe（sandbox）で表示し、スクリプト実行を許可しません。そのため script は基本的に動作しません。
A : はい。プレビュー側は Bootstrap CSS を読み込むため、Bootstrapクラスを付与した要素の見た目を確認しやすい構成です。
A : 貼り付け自体は可能ですが、テーマやエディター設定によりスタイルが変わる場合があります。公開前にプレビューや検証環境で確認することを推奨します。
A : 基本的な整形（見出し、太字、リスト、リンク等）を想定しています。高度なレイアウトはHTMLソース編集で調整してください。
利用条件・注意事項・免責等
利用条件
本ツールは、次の条件でご利用いただけます。
-
完全無料
ツール自体の利用料金はかかりません。 -
登録不要
アカウント作成やログインなしで利用できます。 -
商用利用OK
作成したHTMLは、業務資料・ブログ・販促物等の用途でも利用できます（※貼り付け先の規約・著作権はご確認ください）。 -
ブラウザ内処理で完結
編集とプレビューはブラウザ内で完結します。入力内容をサーバーへ保存する目的の実装は行いません。
本ツールは Quill（オープンソース）を利用しています。ライブラリのライセンスや、貼り付け先サービスの利用規約・著作権は各自でご確認ください。
注意事項・免責
本ページの機能を利用したことにより発生したいかなる損害についても、 本ページの作成者・公開者・管理者は一切の責任を負いかねます。
- 機密情報・個人情報・APIキー等の貼り付けは避けてください（ブラウザ拡張や端末環境によっては意図せず保存・共有される可能性があります）。
- プレビューは iframe（sandbox）で表示し、スクリプト実行を許可しません。JavaScript前提のUIは見た目が再現されない場合があります。
- WordPressや各種CMSに貼り付ける場合、テーマCSSやサニタイズ設定により、見た目・構造が変わることがあります。公開前に必ず検証してください。
- 外部画像や外部CSSを参照するHTMLは、閲覧環境により表示できない場合があります。
ご利用は、必ずご自身の責任のもとでお願いいたします。