ブラウザーでHTMLを実行する方法

手順

1. スターターテンプレートから始めるか、サンプルプロジェクトを読み込みます。
2. HTML構造、CSSスタイル、JavaScriptの動作を編集します。
3. 実行（Ctrl/Cmd + Enter）でsandboxプレビューを更新します。
4. Consoleパネルでlog、warn、errorを確認します。
5. レスポンシブコントロールで一般的な幅のレイアウトを確認します。
6. 整形、コピー、またはindex.htmlとしてダウンロードします。

例

サンプル — 実行

HTML

<button id="demo">Hello</button>

CSS

#demo { padding: 12px 24px; color: white; background: #2563eb; border: 0; border-radius: 8px; }

JavaScript

document.getElementById("demo").addEventListener("click", () => console.log("Hello"));

各コードを対応する欄に貼り付けて実行します。青いボタンを押すとコンソールにHelloが表示されます。

ヒント

プレビュー用のHTML、CSS、JavaScriptの基本実行はブラウザ内でローカルに行われます。

関連ツール