<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>小説投稿サイト</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
max-width: 800px;
margin: auto;
background: #f2f2f2;
}
h1 {
text-align: center;
}
form {
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input, textarea {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.post {
background: white;
padding: 15px;
border-left: 5px solid #007bff;
margin-bottom: 20px;
border-radius: 5px;
}
.post h2 {
margin: 0 0 10px;
}
.meta {
color: gray;
font-size: 0.9em;
margin-bottom: 10px;
}
.delete-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<h1>小説投稿サイト</h1>
<form id="novelForm">
<input type="text" id="author" placeholder="著者名" required>
<input type="text" id="title" placeholder="タイトル" required>
<textarea id="content" rows="8" placeholder="本文" required></textarea>
<button type="submit">投稿する</button>
</form>
<div id="postList"></div>
<script>
const form = document.getElementById('novelForm');
const postList = document.getElementById('postList');
let posts = JSON.parse(localStorage.getItem('novels')) || [];
function saveAndRender() {
localStorage.setItem('novels', JSON.stringify(posts));
renderPosts();
}
function renderPosts() {
postList.innerHTML = '';
[...posts].reverse().forEach((post, index) => {
const div = document.createElement('div');
div.className = 'post';
div.innerHTML = `
<button class="delete-btn" onclick="deletePost(${index})">削除</button>
<h2>${post.title}</h2>
<div class="meta">著者: ${post.author} | 投稿日: ${post.date}</div>
<p>${post.content.replace(/\n/g, '<br>')}</p>
`;
postList.appendChild(div);
});
}
form.addEventListener('submit', e => {
e.preventDefault();
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;
const author = document.getElementById('author').value;
const date = new Date().toLocaleString();
posts.push({ title, content, author, date });
form.reset();
saveAndRender();
});
window.deletePost = function(index) {
posts.splice(posts.length - 1 - index, 1); // reverseしてるため
saveAndRender();
}
renderPosts();
</script>
</body>
</html>
