HTMLプレイグラウンドの使い方
カウンターでスタイルとイベントを試し、コードをダウンロードします。
手順
- スターターテンプレートから始めるか、サンプルプロジェクトを読み込みます。
- HTML構造、CSSスタイル、JavaScriptの動作を編集します。
- 実行（Ctrl/Cmd + Enter）でsandboxプレビューを更新します。
- Consoleパネルでlog、warn、errorを確認します。
- レスポンシブコントロールで一般的な幅のレイアウトを確認します。
- 整形、コピー、またはindex.htmlとしてダウンロードします。
例
HTML
<button id="counter">0</button>CSS
#counter { font-size: 2rem; padding: 16px; }JavaScript
let count = 0;
document.getElementById("counter").addEventListener("click", (event) => {
event.currentTarget.textContent = ++count;
});クリックするたびに数が増えます。再実行すると値がリセットされます。ローカル保存はコードを保存し、カウンターの状態は保存しません。
ヒント
プレビュー用のHTML、CSS、JavaScriptの基本実行はブラウザ内でローカルに行われます。