[STYLE] menuのデザインを変更しました。

src/main/resources/static/css/menu.css

@@ -1,15 +1,80 @@
-table, th, td {border: 1px solid black; border-collapse: collapse;}
+body {
+    margin: 0;
+    padding: 0;
+}
 
-td:hover{background-color: lightblue;}
+#calendar {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
 
-th{font-weight: bold; height: 50px;}
+#calendar th,
+#calendar td {
+    border: 1px solid black;
+}
 
-td{text-align: left; vertical-align: text-top; width: 200px; height: 100px; padding: 10px}
+th {
+    font-weight: bold;
+    height: 35px;
+    font-size: 13px;
+    text-align: center;
+}
 
-.holiday{color: red;}
+td {
+    width: 14.28%;
+    height: 70px;
+    padding: 5px;
+    text-align: left;
+    vertical-align: top;
+}
 
-#today{font-weight: bold; background-color: bisque;}
+td:hover {
+    background-color: lightblue;
+}
 
-.year{font-size: 30px;}
+.holiday {
+    color: red;
+}
 
-.month{font-size: 50px; font-weight: bold;}
+#today {
+    font-weight: bold;
+    background-color: bisque;
+}
+
+.year {
+    font-size: 20px;
+}
+
+.month {
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.calendar-title {
+    margin: 15px 10px;
+}
+
+.date {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.income {
+    color: blue;
+    font-size: 10px;
+}
+
+.expense {
+    color: red;
+    font-size: 10px;
+}
+
+.total {
+    margin: 15px 10px;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+
+    font-size: 16px;
+    text-align: right;
+}

src/main/resources/templates/menu.html

@@ -2,19 +2,38 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
+
 	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
 	<title>Calendar</title>
+
 	<link rel="stylesheet" th:href="@{/css/menu.css}">
+
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+
 </head>
 
 <body>
 
-    <span class="year" th:text="|${year}年|"></span>
+	<div th:replace="~{header :: header}"></div>
-    <span class="month" th:text="|${month}月|"></span>
+
+
+	<div class="calendar-title">
+
+		<span class="year" th:text="|${year}年|">
+		</span>
+
+		<span class="month" th:text="|${month}月|">
+		</span>
+
+	</div>
+
 
 	<table id="calendar">
 
 		<thead>
+
 			<tr>
 				<th class="holiday">日</th>
 				<th>月</th>
@@ -24,49 +43,65 @@
 				<th>金</th>
 				<th>土</th>
 			</tr>
+
 		</thead>
 
+
 		<tbody>
 
 			<tr th:each="week : ${#numbers.sequence(0, 5)}">
 
 				<td th:each="weekDay : ${#numbers.sequence(0, 6)}">
 
+					<a th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1
+					           and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}"
+					   th:href="@{/transaction/detail(
+					       todayDates=${T(java.time.LocalDate).of(year, month, week * 7 + weekDay - firstDayOfWeek + 1)}
+					   )}">
+
+
 						<div th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
 
 							<div class="date" th:text="${week * 7 + weekDay - firstDayOfWeek + 1}">
 							</div>
 
-                        <div th:each="income : ${incomeList}"
+							<div th:each="income : ${incomeList}" th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="income" th:text="|収入 +${income.amount}円|">
-                             th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
-                             class="income"
-                             th:text="|収入 +${income.amount}円|"
-                             style="color: blue;">
 							</div>
 
-                        <div th:each="expense : ${expenseList}"
+							<div th:each="expense : ${expenseList}" th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="expense" th:text="|支出 -${expense.amount}円|">
-                             th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
-                             class="expense"
-                             th:text="|支出 -${expense.amount}円|"
-                             style="color: red;">
 							</div>
 
 						</div>
 
+					</a>
+
 				</td>
 
 			</tr>
 
+
 		</tbody>
+
 	</table>
 
+
+	<div class="total">
+
 		<div>
-        <h2>
+			<span>収入：</span>
-            <span th:text="|収入：${totalIncome}|"></span>
+			<span th:text="${totalIncome}"></span>
-            <span th:text="|支出：${totalExpense}|"></span>
+			<span>円</span>
-        </h2>
 		</div>
 
+		<div>
+			<span>支出：</span>
+			<span th:text="${totalExpense}"></span>
+			<span>円</span>
+		</div>
+
+	</div>
+
+
 </body>
 
 </html>