このツールに問題がありますか?

「HTMLエディタ オンライン」について

このツールはライブプレビュー付きのブラウザ内 HTML エディタです。HTML/CSS/JavaScript を入力すると、サンドボックス化されたプレビューに即時反映されます。

クイックプロトタイプ、フロント概念の教育、バグの最小再現の共有、プロジェクトを立てずに CSS/JS スニペットを試す、マークアップ片の共有などに。

編集はすべてブラウザ内で完結し、サーバーには何も送信されません。コードはブラウザストレージに保持され、再訪時に続きから再開できます。

このツールの使い方

HTML スニペットをライブプレビューする手順

  1. HTML を入力/貼り付け

    「HTML」欄に断片、完全な文書、あるいは `<div>` 一個でも貼り付け。インラインの `<style>` と `<script>` はそのまま保持され、ブラウザでの挙動と同じくプレビュー内でも実行されます。

  2. 「実行」

    結果は `preview` のみで、レンダリング結果(プラットフォームによりインラインまたはサンドボックス iframe の URL)。スタイル・余白の確認、`<details>` の畳み込みの動作確認などに便利。

  3. サンドボックスのトレードオフ

    プレビューはコードを実行します — それが目的。信用できない JS は貼らないこと。`localStorage`、`fetch`、サードパーティ CDN を使うスニペットはサンドボックス制限で動かない可能性あり — フルにネットワーク/ストレージを使いたいなら、実際のローカルファイルに置いてください。

  4. 結果の永続化

    出力は一時的で、本ツールは CMS ではありません。動いたスニペットはプロジェクトのファイルにコピーしてコミットを。このエディタはアドホックな「ちょっと試す」ためだけに。