HTML オンラインエディタ（リアルタイムプレビュー） — Numio

HTML・CSS・JavaScript を書くと、その場でプレビューに反映。コンソールのメッセージも下に表示されます。無料、ブラウザだけで使えます。

ブラウザ内で動作 · 登録不要

コード (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counter</title>
  <style>
    body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 90vh; margin: 0; background: #f5f7fb; }
    .card { padding: 24px 32px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); text-align: center; }
    button { font: inherit; padding: 10px 20px; border: 0; border-radius: 999px; background: #2563eb; color: #fff; cursor: pointer; }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, HTML!</h1>
    <p>Clicked <strong id="count">0</strong> times</p>
    <button id="button" type="button">Click me</button>
  </div>
  <script>
    let count = 0;
    document.getElementById("button").addEventListener("click", () => {
      count += 1;
      document.getElementById("count").textContent = count;
      console.log("Button clicked", count);
    });
    console.log("Page ready");
  </script>
</body>
</html>

Ctrl/⌘ + Enter で実行

プレビュー

プレビューを自動更新

コンソール

まだ出力はありません。「実行」を押すとここに結果が表示されます。

コードはブラウザ内で実行され、アップロードされません。

使い方

HTML を書き、CSS は <style>、JavaScript は <script> に記述します。
入力に合わせてプレビューが自動で更新されます。
プレビューの下でコンソールのメッセージを確認します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>こんにちは！</h1>
  <button id="btn">クリック</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "クリック回数: " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

仕様と制限

プレビューはサンドボックス化されたフレームで動作し、そのスクリプトからこのページや Cookie にはアクセスできません。

手動で更新したい場合は、自動更新をオフにして「実行」を押してください。

FAQ

CSS や JavaScript も使えますか？

はい。同じドキュメント内で、CSS は <style> タグ、JavaScript は <script> タグに書いてください。

console.log の出力はどこに出ますか？

プレビューから出たコンソールのメッセージが、その下に一覧表示されます。

コードは送信されますか？

いいえ。プレビューはブラウザ内で生成され、サーバーには何も送信されません。

形式の参考資料

ツールページの更新日： 2026-10-22