practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
<link rel="stylesheet" href="practice.css">
</head>
<body>
<h1 id="title">こんにちは、HTML！</h1>
<p>これは最初のWebページです。</p>
<button id="changeTextBtn">あいさつを変える</button>
<!-- JavaScriptファイルの読み込み -->
<script src="practice.js"></script>
</body>
</html>
practice.css
/* ページ全体の背景とフォント */
body {
background-color: #f0f8ff; /* やさしい水色 */
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
/* 見出しの装飾 */
h1 {
color: #2c3e50; /* 濃いネイビー */
font-size: 36px;
margin-bottom: 20px;
}
/* 段落の装飾 */
p {
color: #555;
font-size: 18px;
}
practice.js
document.addEventListener("DOMContentLoaded", function () {
const title = document.getElementById("title");
const button = document.getElementById("changeTextBtn");
button.addEventListener("click", function () {
title.textContent = "JavaScriptで変わりました！";
});
});