1. セマンティックHTMLの記述
HTMLペインに記述したコードは自動的に適切なHTML5文書構造内に配置されるため、必要なマークアップに集中して作業できます。
<div class="interactive-card">
<h2>タスク管理</h2>
<input type="text" id="taskInput" placeholder="新しいタスクを入力..." />
<button id="addBtn">追加</button>
<ul id="taskList"></ul>
</div>2. CSSによる即時スタイリング
CSSペインに入力したスタイルはタイピングと同時にプレビューへ反映され、スクロール位置や入力フォーカスも保持されます。
.interactive-card {
max-width: 480px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e6dfd8;
border-radius: 8px;
}3. JavaScriptによる動的処理とコンソール確認
ES2024仕様のJavaScriptを記述可能。console.logなどの出力は、エディター下部の仮想コンソールにリアルタイムで表示されます。
document.getElementById('addBtn').onclick = () => {
const input = document.getElementById('taskInput');
if (!input.value) return;
const li = document.createElement('li');
li.textContent = input.value;
document.getElementById('taskList').appendChild(li);
input.value = '';
};4. 別ウィンドウ表示とQRコードでの実機テスト
ツールバーの「ポップアウト」をクリックして別ウィンドウに表示したり、QRコードをスマートフォンで読み取って実機確認が可能です。