🌐 HTML プレビュー

ライブプレビューを使用して HTML、CSS、JavaScript を作成します。完全にブラウザ内で実行されます。

HTML / CSS / JS

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
    h1 { color: #0969da; }
    .card { background: white; padding: 16px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
    button { background: #0969da; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <div class="card">
    <p>Edit this HTML to see live changes.</p>
    <button onclick="alert('Hi!')">Click Me</button>
  </div>
</body>
</html>

プレビュー