✨ アイテム ✨
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0% { transform: scale(1); }
30% { transform: scale(1.2); }
50% { transform: scale(0.9); }
70% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.bounce {
animation: bounce 0.5s;
}
.fadeIn {
animation: fadeIn 0.5s;
}
</style>
</head>
<body>
<div id="app" style="width: 100%; max-width: 400px; height: 100%; max-height: 400px; margin: auto; padding: 10px; box-sizing: border-box; overflow-y: auto;">
<div id="list" style="display: flex; flex-direction: column; gap: 10px;">
<!-- List items will be injected here -->
</div>
<div id="confirmation" style="display: none; margin-top: 20px;">
<div style="display: flex; align-items: center; justify-content: space-between; background: #f0f8ff; padding: 10px; border-radius: 8px;" class="fadeIn">
<span id="selectedItem" style="font-size: 18px;">✨ アイテム ✨</span>
<div>
<input type="button" value="🗑️ 削除" id="deleteBtn" style="margin-right: 10px; padding: 5px 10px; cursor: pointer; border: none; border-radius: 5px; background-color: #ff4d4d; color: white; font-size: 14px;">
<input type="button" value="❌ キャンセル" id="cancelBtn" style="padding: 5px 10px; cursor: pointer; border: none; border-radius: 5px; background-color: #808080; color: white; font-size: 14px;">
</div>
</div>
</div>
</div>
<script>
const items = [
'🍎 りんご',
'🍌 バナナ',
'🍇 ぶどう',
'🍉 スイカ',
'🍓 いちご'
];
const listDiv = document.getElementById('list');
const confirmationDiv = document.getElementById('confirmation');
const selectedItemSpan = document.getElementById('selectedItem');
const deleteBtn = document.getElementById('deleteBtn');
const cancelBtn = document.getElementById('cancelBtn');
function renderList() {
listDiv.innerHTML = '';
items.forEach((item, index) => {
const itemDiv = document.createElement('div');
itemDiv.textContent = item;
itemDiv.style.padding = '10px';
itemDiv.style.background = '#e0ffff';
itemDiv.style.borderRadius = '8px';
itemDiv.style.cursor = 'pointer';
itemDiv.style.fontSize = '18px';
itemDiv.onclick = () => showConfirmation(index);
listDiv.appendChild(itemDiv);
});
}
function showConfirmation(index) {
selectedItemSpan.textContent = items[index];
confirmationDiv.style.display = 'block';
confirmationDiv.classList.add('fadeIn');
deleteBtn.onclick = () => deleteItem(index);
cancelBtn.onclick = () => {
confirmationDiv.style.display = 'none';
confirmationDiv.classList.remove('fadeIn');
};
}
function deleteItem(index) {
items.splice(index, 1);
renderList();
confirmationDiv.style.display = 'none';
}
// Initial render
renderList();
// Add click animations
document.addEventListener('click', function(e) {
if (e.target.tagName === 'DIV' && e.target.parentNode.id === 'list') {
e.target.classList.add('bounce');
setTimeout(() => e.target.classList.remove('bounce'), 500);
}
if (e.target.tagName === 'INPUT' && (e.target.id === 'deleteBtn' || e.target.id === 'cancelBtn')) {
e.target.classList.add('bounce');
setTimeout(() => e.target.classList.remove('bounce'), 500);
}
});
</script>
</body>
</html>
```