DOM サンドボックス

コードを書いて「実行」を押すと DOM がリアルタイムで変わる！

⚠️ このサンドボックスはページ全体の DOM にアクセスできます。document.body.innerHTML など破壊的なコードは実行しないでください。
プレビュー

使い方

  1. プリセットをクリックしてエディタにコードをセット。まずはそのまま「実行」を押してみよう
  2. 右のプレビューに変化が起きる。コードを少し書き換えてまた実行してみよう
  3. 「DOM をリセット」で元の HTML に戻せる（エディタのコードはそのまま）
  4. エラーが出たら赤いメッセージを読んで、コードを修正しよう

もっと学ぼう

関連ツール

🎯 CSS Selector ビジュアライザー — セレクタの当たり方を確認 ⚖️ CSS Specificity 計算機 ← ツール一覧に戻る

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ