HTML Live Editor
実行
クリア
ダウンロード
日本語
English
中文
한국어
HTML
CSS
JavaScript
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>サンプルページ</title> </head> <body> <h1>こんにちは！</h1> <p>HTML Live Editorへようこそ。</p> <button onclick="showMessage()">クリックしてみて</button> </body> </html>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 20px; background-color: #f5f5f5; } h1 { color: #333; text-align: center; } button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #0056b3; }
function showMessage() { alert('ボタンがクリックされました！'); // 動的に要素を追加 const p = document.createElement('p'); p.textContent = '新しい要素が追加されました: ' + new Date().toLocaleString(); p.style.color = '#28a745'; document.body.appendChild(p); }
プレビュー