<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カレンダー選択</title>
<style>
/* --- Reset and body --- */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }
body { background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%); display: flex; justify-content: center; align-items: center; height: 100vh; }
/* --- Calendar Container --- */
.calendar-container {
width: 393px;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* --- Header --- */
.calendar-header {
background: black;
height: 78px;
display: flex;
align-items: center;
padding: 0 16px;
color: white;
font-size: 24px;
font-weight: 500;
}
.calendar-title {
text-align: center;
font-size: 32px;
font-weight: 500;
text-transform: uppercase;
margin: 24px 0;
}
/* --- Month Title --- */
.month-title {
text-align: center;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 16px;
}
/* --- Weekdays --- */
.weekdays, .dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.weekdays div {
text-align: center;
padding: 8px 0;
color: #666;
font-size: 12px;
}
/* --- Dates --- */
.dates div {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
cursor: pointer;
}
.date-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #333;
}
.date-circle.disabled { color: #aaa; cursor: default; }
.date-circle.selected {
color: #337AF7;
border: 2px solid #337AF7;
}
/* --- Next Button --- */
.next-button {
margin: 24px auto;
width: 80%;
background: white;
border: 3px solid black;
text-align: center;
padding: 12px 0;
font-size: 20px;
font-weight: 400;
cursor: pointer;
user-select: none;
}
.next-button:hover { background: #f0f0f0; }
</style>
</head>
<body>
<div class="calendar-container">
<div class="calendar-header">撮影日時を選択</div>
<div class="calendar-title">12月</div>
<div class="weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="dates" id="dates">
<!-- Dates will be generated by JS -->
</div>
<div class="next-button" id="nextButton">次へ</div>
</div>
<script>
// --- Calendar Generation ---
const datesContainer = document.getElementById('dates');
const daysInMonth = 31; // December
const firstDayIndex = 3; // December 1st is Wednesday (0=Su,1=Mo,...)
for (let i = 0; i < firstDayIndex; i++) {
const empty = document.createElement('div');
const circle = document.createElement('div');
circle.className = 'date-circle disabled';
circle.textContent = '';
empty.appendChild(circle);
datesContainer.appendChild(empty);
}
for (let d = 1; d <= daysInMonth; d++) {
const dateDiv = document.createElement('div');
const circle = document.createElement('div');
circle.className = 'date-circle';
circle.textContent = d;
circle.addEventListener('click', () => {
document.querySelectorAll('.date-circle').forEach(c => c.classList.remove('selected'));
circle.classList.add('selected');
});
dateDiv.appendChild(circle);
datesContainer.appendChild(dateDiv);
}
</script>
</body>
</html>
