Live Editor -ブラウザ上で動くコードエディタ-

HTML・CSS・JSをリアルタイムで確認することができます。

<h1 id="title">こんにちは urakata-tools</h1>
<p>これはタブ型ライブエディタのサンプルです。</p>
<button id="btn">タイトルを変更</button>

:root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
h1{ font-size:28px; margin:.5rem 0; }
button{ padding:.5rem .8rem; border:1px solid #ddd; border-radius:8px; cursor:pointer; }
button:hover{ background:#f6f6f6; }

// JSは結果タブのiframe内で実行されます
document.getElementById('btn')?.addEventListener('click', () => {
  const h = document.getElementById('title');
  if(h) h.textContent = 'タイトルが変更されました！';
  console.log('ボタンが押されました');
});

コンソール

使い方

html・css・javascriptのコードを書くことでブラウザ上で確認することができます。
コードは入力と同時に「結果」タブへ自動反映されます。
初期状態に戻したい場合は「リセット」を押してください。
通勤中にコードを確認したい...手軽にhtml,cssの結果を確認したい時に役立ちます。