使い方
- 上のボタンで HTML、CSS、JavaScript のエディターを切り替え、コードを書きます。
- 入力を止めるとプレビューが自動更新されます。自動実行をオフにして「実行」をクリックすることもできます。
- コンソールで出力とエラーを確認し、「HTML をダウンロード」をクリックしてページを保存します。
オプションの説明
- サンドボックス
- プレビューは分離されたサンドボックス内で実行され、このサイトの Cookie やストレージを読み取れず、ダイアログも開けません。
- コンソール
- console.log、warn、error の出力と、行番号付きの未処理エラーを表示し、最新 200 件を保持します。
- ダウンロード
- 3 つの部分を 1 つの HTML ファイルにまとめます。スタイルは style タグに、スクリプトは body の末尾に入ります。
ページの組み立て方
3 つのエディターの内容は、次の順序で 1 つのドキュメントにまとめられます。「HTML をダウンロード」をクリックしたときも同じ構成になりますが、プレビューの下のページにコンソール出力を送る小さなスクリプトは、ダウンロードには含まれません。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>スクリプトは HTML の後ろに置かれるので、ページの読み込みを待たずに、すぐに document.getElementById を使えます。HTML エディターに書くのは body の中身だけで、html、head、body タグ自体は書きません。プレビューは、スクリプトの実行だけが許可された iframe です。alert ダイアログや、このサイトの Cookie へのアクセスがブロックされるのはそのためです。
よくある質問
外部ライブラリを使えますか？
はい。HTML エディターに jsDelivr などの CDN を指す script タグや link タグを追加してください。
alert が表示されないのはなぜですか？
サンドボックスがダイアログをブロックするため、alert と confirm は動作しません。代わりに console.log を使ってください。
コードは保存されますか？
保存もアップロードもされません。ページを閉じる前に HTML ファイルをダウンロードしてください。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。