<!DOCTYPE html>
<html>
<head>
<title>バンドを完成させる</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
color: #333;
margin: 0;
padding: 20px 0;
}
#bandMembers {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
}
.member {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>バンドを完成させよう！</h1>
<div id="bandMembers"></div>
<script>
// バンドメンバーの情報を配列に格納
var bandMembers = [
{ name: "ジョン", instrument: "ギター" },
{ name: "メアリー", instrument: "ベース" },
{ name: "トム", instrument: "ドラム" },
{ name: "リンダ", instrument: "キーボード" },
{ name: "マイク", instrument: "ボーカル" }
];
// バンドメンバーを表示する関数
function showBandMembers() {
var bandMembersDiv = document.getElementById("bandMembers");
for (var i = 0; i < bandMembers.length; i++) {
var memberDiv = document.createElement("div");
memberDiv.className = "member";
var memberName = document.createElement("h2");
memberName.textContent = bandMembers[i].name;
var memberInstrument = document.createElement("p");
memberInstrument.textContent = bandMembers[i].instrument;
memberDiv.appendChild(memberName);
memberDiv.appendChild(memberInstrument);
bandMembersDiv.appendChild(memberDiv);
}
}
// 面白いジョーク追加用関数
function addJoke() {
var jokeDiv = document.createElement("div");
jokeDiv.className = "member";
var jokeQuestion = document.createElement("h2");
jokeQuestion.textContent = "ジョークの質問";
var jokeAnswer = document.createElement("p");
jokeAnswer.textContent = "ジョークの答え";
jokeDiv.appendChild(jokeQuestion);
jokeDiv.appendChild(jokeAnswer);
bandMembersDiv.appendChild(jokeDiv);
}
// バンドメンバーを表示
showBandMembers();
// 面白いジョークを追加
addJoke();
</script>
</body>
</html>
