<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GSAP Todoリスト</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f8ff;
padding: 20px;
}
#todo-container {
max-width: 500px;
margin: auto;
}
input[type="text"] {
width: 70%;
padding: 10px;
font-size: 16px;
}
button {
padding: 10px;
font-size: 16px;
margin-left: 5px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
li {
background: #ffffff;
margin-bottom: 10px;
padding: 10px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="todo-container">
<h2>GSAP Todoリスト</h2>
<input type="text" id="task-input" placeholder="タスクを入力...">
<button onclick="addTask()">追加</button>
<ul id="task-list"></ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
function addTask() {
const input = document.getElementById("task-input");
const task = input.value.trim();
if (task === "") return;
const li = document.createElement("li");
li.innerHTML = `
<span>${task}</span>
<button onclick="removeTask(this)">削除</button>
`;
document.getElementById("task-list").appendChild(li);
// GSAP アニメーション（フェードイン）
gsap.from(li, {opacity: 0, y: -20, duration: 0.5});
input.value = "";
}
function removeTask(button) {
const li = button.parentElement;
gsap.to(li, {
opacity: 0,
y: 20,
duration: 0.4,
onComplete: () => li.remove()
});
}
</script>
</body>
</html>
