<!DOCTYPE html>
<html>
<head>
<style>
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; overflow-y: auto; border: 2px solid #000; border-radius: 8px; padding: 10px; box-sizing: border-box;">
<div id="blogs"></div>
<button onclick="addBlog()" style="width: 100%; padding: 10px; font-size: 20px; background-color: #ffeb3b; border: none; border-radius: 8px; margin-top: 10px; cursor: pointer;">➕ 新しいブログを追加</button>
</div>
<script>
function addBlog() {
const blogDiv = document.createElement('div');
blogDiv.style.padding = '10px';
blogDiv.style.marginBottom = '10px';
blogDiv.style.border = '2px solid #4caf50';
blogDiv.style.borderRadius = '8px';
blogDiv.style.position = 'relative';
blogDiv.style.animation = 'fadeIn 1s';
const id = new Date().getTime();
blogDiv.innerHTML = `📝 ブログ ID: ${id} <button onclick="deleteBlog(this)" style="position: absolute; right: 10px; top: 10px; background-color: #f44336; border: none; border-radius: 50%; padding: 5px; cursor: pointer;">❌</button>`;
const blogsContainer = document.getElementById('blogs');
blogsContainer.appendChild(blogDiv);
blogDiv.addEventListener('click', () => {
blogDiv.style.animation = 'pop 0.3s';
blogDiv.addEventListener('animationend', () => {
blogDiv.style.animation = '';
}, { once: true });
});
const allBlogs = JSON.parse(localStorage.getItem('blogs') || '[]');
allBlogs.push({ id });
localStorage.setItem('blogs', JSON.stringify(allBlogs));
}
function deleteBlog(button) {
const blogDiv = button.parentElement;
const blogsContainer = document.getElementById('blogs');
blogsContainer.removeChild(blogDiv);
const id = blogDiv.innerText.split('ID: ')[1];
const allBlogs = JSON.parse(localStorage.getItem('blogs') || '[]');
const newBlogs = allBlogs.filter(blog => blog.id !== parseInt(id));
localStorage.setItem('blogs', JSON.stringify(newBlogs));
}
function loadBlogs() {
const blogsContainer = document.getElementById('blogs');
const allBlogs = JSON.parse(localStorage.getItem('blogs') || '[]');
allBlogs.forEach(blog => {
const blogDiv = document.createElement('div');
blogDiv.style.padding = '10px';
blogDiv.style.marginBottom = '10px';
blogDiv.style.border = '2px solid #4caf50';
blogDiv.style.borderRadius = '8px';
blogDiv.style.position = 'relative';
blogDiv.style.animation = 'fadeIn 1s';
blogDiv.innerHTML = `📝 ブログ ID: ${blog.id} <button onclick="deleteBlog(this)" style="position: absolute; right: 10px; top: 10px; background-color: #f44336; border: none; border-radius: 50%; padding: 5px; cursor: pointer;">❌</button>`;
blogDiv.addEventListener('click', () => {
blogDiv.style.animation = 'pop 0.3s';
blogDiv.addEventListener('animationend', () => {
blogDiv.style.animation = '';
}, { once: true });
});
blogsContainer.appendChild(blogDiv);
});
}
window.onload = loadBlogs;
</script>
</body>
</html>
