Merge branch 'k-kobayashi' of https://gitea.it-college.co.jp/2026_09_5H_Spring_KIZAKI/Monegement into s-choi

# Conflicts:
#	src/main/resources/templates/goal_view.html
#	src/main/resources/templates/menu.html
#	src/main/resources/templates/select_course.html
#	src/main/resources/templates/transaction_detail.html

src/main/java/com/example/demo/app/presentation/controller/CourseController.java

@@ -41,7 +41,7 @@ public class CourseController {
 
 		session.setAttribute("userForm", userForm);
 		model.addAttribute("mode", "regist");
-		model.addAttribute("currentCourseId", 4);
+		model.addAttribute("currentCourseId", courseService.findByName("バランスコース"));
 		model.addAttribute("courseList", CourseForm.convertFrom(courseService.findAll()));
 		model.addAttribute("courseInfoList", CourseInfoForm.convertFrom(courseInfoService.findAll()));
 

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

@@ -1,6 +1,7 @@
 body {
     margin: 0;
-    padding: 0;
+	padding-top:80px;
+	padding-bottom:120px;
 }
 
 #calendar {

src/main/resources/static/css/style.css

@@ -0,0 +1,214 @@
+/* =======================
+   全体
+======================= */
+body {
+    padding-top: 80px;
+    padding-bottom: 80px;
+    background-color: #f8f9fa;
+}
+
+/* =======================
+   コンテンツ
+======================= */
+.main-container {
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 0 12px;
+}
+
+/* =======================
+   タイトル
+======================= */
+.page-title {
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+/* =======================
+   ヘッダー
+======================= */
+.app-header {
+    background-color: #E3F2FD;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.app-logo {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+/* =======================
+   フッター
+======================= */
+.app-footer {
+    background-color: #E3F2FD;
+    border-top: 1px solid #d0d7de;
+}
+
+/* =======================
+   カード
+======================= */
+.app-card {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 15px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
+}
+
+.card {
+    border-radius: 12px;
+    margin-bottom: 12px;
+}
+
+.card-body {
+    padding: 12px;
+}
+
+/* =======================
+   カレンダー
+======================= */
+
+#calendar {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+#calendar th,
+#calendar td {
+    border: 1px solid black;
+}
+
+th {
+    font-weight: bold;
+    height: 35px;
+    font-size: 13px;
+    text-align: center;
+}
+
+td {
+    width: 14%;
+    height: 70px;
+    padding: 5px;
+    text-align: left;
+    vertical-align: top;
+}
+
+td:hover {
+    background-color: lightblue;
+}
+
+.holiday {
+    color: red;
+}
+
+#today {
+    font-weight: bold;
+    background-color: bisque;
+}
+
+.calendar-title {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    text-align: center;
+}
+
+.calendar-date {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+}
+
+.year {
+    font-size: 20px;
+}
+
+.month {
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.month-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 40px;
+    height: 40px;
+
+    font-size: 28px;
+    text-decoration: none;
+    color: #333;
+
+    border-radius: 50%;
+}
+
+.month-button:hover {
+    background-color: #eee;
+}
+
+.month-button:last-child {
+    justify-self: end;
+}
+
+.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;
+}
+
+/* =======================
+   金額表示
+======================= */
+.plus {
+    color: #dc3545;
+    font-weight: bold;
+}
+
+.minus {
+    color: #0d6efd;
+    font-weight: bold;
+}
+
+/* =======================
+   テーブル
+======================= */
+.table {
+    background-color: white;
+}
+
+.table th {
+    vertical-align: middle;
+}
+
+.table td {
+    vertical-align: middle;
+}
+
+/* =======================
+   ボタン
+======================= */
+.btn {
+    border-radius: 10px;
+}

src/main/resources/templates/analysis.html

@@ -4,17 +4,18 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>分析画面</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 	
 	<div th:replace="~{header :: header}">
 	</div>
 	
-	<div class="container mt-4">
+	<div class="main-container">
-	<h2 class="text-center">支出分析</h2>
+	<h2 class="page-title">支出分析</h2>
 	
-	<div class="text-center">
+	<div class="calendar-title">
 
 		<a class="month-button" th:href="@{/analysis(year=${previousYear}, month=${previousMonth})}">
 			←
@@ -49,8 +50,8 @@
 					      ? '＋' + ${analysisForm.totalDifferenceAmount}
 						  : ${analysisForm.totalDifferenceAmount}"
 				      th:class="${analysisForm.totalDifferenceAmount >= 0}
-					      ? 'color-danger;'
+					      ? 'text-danger'
-						  : 'color-primary;'">
+						  : 'text-primary'">
 					0
 				  </td>
 		      </tr>
@@ -84,16 +85,16 @@
 			          ? '＋' + ${category.monthDifferenceAmount}
 				      : ${category.monthDifferenceAmount}"
 			      th:class="${category.monthDifferenceAmount >= 0}
-				      ? 'color-danger;'
+				      ? 'text-danger'
-				  	  : 'color-primary;'">
+				  	  : 'text-primary'">
 			</span>
 			<br>
 			<span th:text="${category.courseDifferenceAmount >= 0}
 				      ? '＋' + ${category.courseDifferenceAmount}
 					  : ${category.courseDifferenceAmount}"
 			      th:class="${category.courseDifferenceAmount >= 0}
-				      ? 'color-danger;'
+				      ? 'text-danger'
-				      : 'color-primary;'">
+				      : 'text-primary'">
 			</span>
 		  </td>
 	    </tr>

src/main/resources/templates/authentication.html

@@ -2,59 +2,122 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>認証</title>
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
 
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
 
     <div th:replace="~{header :: header}">
     </div>
 
-	<main>
+    <div class="main-container">
-		<h1>本人認証確認</h1>
 
-		<form th:action="@{/authentication}" th:object="${authenticationForm}" method="post">
+        <h1 class="page-title">
+            本人認証
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <form th:action="@{/authentication}"
+                      th:object="${authenticationForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
+                        <input type="email"
+                               id="mailAddress"
+                               class="form-control"
+                               th:field="*{mailAddress}"
+                               required>
 
-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				<input type="email" id="mailAddress" th:field="*{mailAddress}">
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="secretQuestionId">秘密の質問</label>
-				<select id="secretQuestionId" th:field="*{secretQuestionId}">
 
-					<option value="">選択してください</option>
+                        <label for="secretQuestionId"
+                               class="form-label">
+                            秘密の質問
+                        </label>
 
-					<option th:each="question : ${questionList}" th:value="${question.secretQuestionId}"
+                        <select id="secretQuestionId"
+                                class="form-select"
+                                th:field="*{secretQuestionId}">
+
+                            <option value="">
+                                選択してください
+                            </option>
+
+                            <option th:each="question : ${questionList}"
+                                    th:value="${question.secretQuestionId}"
                                     th:text="${question.questionText}">
                             </option>
 
                         </select>
+
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="secretAnswer">秘密の質問の回答</label>
+
-				<input type="text" id="secretAnswer" th:field="*{secretAnswer}">
+                        <label for="secretAnswer"
+                               class="form-label">
+                            秘密の質問の回答
+                        </label>
+
+                        <input type="text"
+                               id="secretAnswer"
+                               class="form-control"
+                               th:field="*{secretAnswer}"
+                               required>
+
                     </div>
 
-			<button type="submit">確認</button>
+                    <div class="d-grid gap-2">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            確認
+                        </button>
+
+                    </div>
 
                 </form>
 
-		<form th:action="@{/login}" method="get">
+            </div>
-			<button type="submit">戻る</button>
-		</form>
-	</main>
 
-	<script th:if="${errorMessage}" th:inline="javascript">
+        </div>
+
+        <div class="d-grid mt-3">
+
+            <form th:action="@{/login}"
+                  method="get">
+
+                <button type="submit"
+                        class="btn btn-outline-secondary w-100">
+                    戻る
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+
+    <script th:if="${errorMessage}"
+            th:inline="javascript">
         alert(/*[[${errorMessage}]]*/);
     </script>
 
-	
 </body>
 
 </html>

src/main/resources/templates/footer.html

@@ -4,10 +4,11 @@
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
 <title>フッター</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 <body>
 	
-	<footer th:fragment="footer" class="fixed-bottom border-top py-2" style="background-color:#E3F2FD;">
+	<footer th:fragment="footer" class="fixed-bottom border-top py-2 app-footer" style="background-color:#E3F2FD;">
 		
 	  <nav data-bs-theme="light">
 		<div class="card-footer text-center">

src/main/resources/templates/goal_edit.html

@@ -1,17 +1,23 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>目標編集</title>
 	
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
-
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
 	
 	<div th:replace="~{header :: header}"></div>
 	
-	<h1>目標編集</h1>
+	<div class="main-container">
+
+	<h1 class="page-title">目標編集</h1>
+	
+	<div class="card shadow-sm">
+		
+		<div class="card-body">
 		
 			<form th:action="@{/goal/update}" th:object="${goalForm}" method="post">
 				<input type="hidden" th:field="*{goalId}">
@@ -28,17 +34,23 @@
 
 			<div>
 				<label>目標金額</label>
-			<input type="number" th:field="*{targetAmount}" required min="1">
+				<input type="number" th:field="*{targetAmount}" min="0" max="1000000000" required>
 			</div>
 
 			<div>
 				<label>目標達成期限</label>
 				<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
 			</div>
-		<button type="submit">更新する</button>
 
 			</form>
 			
+		</div>
+	</div>
+	
+	<button type="submit" class="btn btn-sm btn-primary w-100">更新する</button>
+	
+	</div>
+
 	<div th:replace="~{footer :: footer}"></div>
 
 	

src/main/resources/templates/goal_view.html

@@ -2,20 +2,23 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>目標詳細</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
 </head>
 
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
-
 	<div th:replace="~{header :: header}"></div>
 
-	<h1>目標詳細</h1>
 
+	<div class="main-container">
 
+		<h1 class="page-title">目標詳細</h1>
+
+		<!--    -->
 		<div th:if="${graphGoal != null}">
 
 			<h2 th:text="${graphGoal.goalTitle}"></h2>
@@ -96,7 +99,7 @@
 				});
 
 		</script>
-
+		<!--    -->
 
 		<div>
 
@@ -106,44 +109,36 @@
 
 					<div>
 
+
 						<form th:action="@{/goal}" method="get">
+							<table class="table">
 
 								<input type="radio" name="goalId" th:value="${goalForm.goalId}"
 									th:checked="${graphGoal != null and graphGoal.goalId == goalForm.goalId}"
 									onchange="this.form.submit()">
+								<tr>
+									<th>目標名</th>
+									<td th:text="${goalForm.goalTitle}"></td>
+								</tr>
 
-						<p>
+								<tr>
-
+									<th>目標説明</th>
-							目標名：
+									<td th:text="${goalForm.goalSubtitle}"></td>
-							<span th:text="${goalForm.goalTitle}">
+								</tr>
-							</span>
+								<tr>
-
+									<th>目標金額</th>
-							<br>
+									<td th:text="${goalForm.targetAmount}"></td>
-
+								</tr>
-							目標説明：
+								<tr>
-							<span th:text="${goalForm.goalSubtitle}">
+									<th>目標達成期限</th>
-							</span>
+									<td th:text="${goalForm.deadline}"></td>
-
+								</tr>
-							<br>
-
-							目標金額：
-							<span th:text="${goalForm.targetAmount}">
-							</span>
-
-							<br>
-
-							目標達成期限：
-							<span th:text="${goalForm.deadline}">
-							</span>
-
-							<br>
-
-							達成率：
-							<span th:text="${goalForm.achievementRate} + '%'">
-							</span>
-
-						</p>
 
+								<tr>
+									<th>達成率</th>
+									<td th:text="${goalForm.achievementRate} + '%'"></td>
+								</tr>
+							</table>
 						</form>
 
 					</div>
@@ -155,7 +150,7 @@
 
 							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
 
-						<button type="submit">
+							<button type="submit" class="btn btn-sm btn-primary w-100">
 								編集
 							</button>
 
@@ -166,7 +161,7 @@
 
 							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
 
-						<button type="submit">
+							<button type="submit" class="btn btn-sm btn-primary w-100">
 								削除
 							</button>
 
@@ -183,14 +178,14 @@
 
 		<form th:action="@{/goal/create}" method="get">
 
-		<button type="submit">
+			<button type="submit" class="btn btn-sm btn-primary w-100">
 				新規登録
 			</button>
 
 		</form>
 		<form th:action="@{/goal/record}" method="get">
 
-		<button type="submit">
+			<button type="submit" class="btn btn-sm btn-primary w-100">
 				履歴
 			</button>
 
@@ -201,5 +196,4 @@
 
 </body>
 
-
 </html>

src/main/resources/templates/header.html

@@ -4,12 +4,13 @@
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
 <title>ヘッダー</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 <body>
 	
 	<header th:fragment="header" class="fixed-top">
 
-		<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
+		<nav class="navbar app-header" style="background-color: #e3f2fd;" data-bs-theme="light">
 		  <div class="container-fluid">
 		    <a th:href="@{/menu}" class="navbar-brand fw-bold">Monegement</a>
 			<div class="d-flex gap-2">

src/main/resources/templates/login.html

@@ -1,50 +1,101 @@
 <!DOCTYPE html>
 <html lang="ja"xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>ログイン</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
+
     <div th:replace="~{header :: header}">
     </div>
 
-	<main>
+    <div class="main-container">
-		<h1>ログイン</h1>
 
-		<div th:if="${errorMessage}" th:text="${errorMessage}"></div>
+        <h1 class="page-title">
-		<form th:action="@{/login}" th:object="${loginForm}" method="post">
+            ログイン
-			<div>
+        </h1>
-				<label for="mailAddress">メールアドレス</label>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <div th:if="${errorMessage}"
+                     class="alert alert-danger">
+
+                    <span th:text="${errorMessage}">
+                    </span>
+
+                </div>
+
+                <form th:action="@{/login}"
+                      th:object="${loginForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
 
                         <input type="email"
                                id="mailAddress"
+                               class="form-control"
                                th:field="*{mailAddress}"
                                required>
+
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="password">パスワード</label>
+
+                        <label for="password"
+                               class="form-label">
+                            パスワード
+                        </label>
 
                         <input type="password"
                                id="password"
+                               class="form-control"
                                th:field="*{password}"
                                required>
+
                     </div>
 
-			<div>
+                    <div class="d-grid">
-				<button type="submit">ログイン</button>
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            ログイン
+                        </button>
+
                     </div>
+
                 </form>
 
-		<div>
-			<a th:href="@{user/register}">新規会員登録</a>
             </div>
 
-		<div>
-			<a th:href="@{/authentication}">パスワードを忘れた方</a>
         </div>
-	</main>
+
+        <div class="text-center mt-3">
+
+            <a th:href="@{/user/register}">
+                新規会員登録
+            </a>
+
+        </div>
+
+        <div class="text-center mt-2">
+
+            <a th:href="@{/authentication}">
+                パスワードを忘れた方
+            </a>
+
+        </div>
+
+    </div>
+
 </body>
 </html>

src/main/resources/templates/menu.html

@@ -8,13 +8,13 @@
 
 	<title>Calendar</title>
 
-	<link rel="stylesheet" th:href="@{/css/menu.css}">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 
 	<div th:replace="~{header :: header}"></div>
 
@@ -97,52 +97,68 @@
 	</table>
 
 
-	<div class="total">
+	<div class="card shadow-sm mb-3">
 
-		<div>
+	    <div class="card-body">
-			<span>収入：</span>
+
-			<span th:text="${totalIncome}"></span>
+	        <div class="d-flex justify-content-between mb-2">
-			<span>円</span>
+	            <span>収入</span>
+	            <span th:text="'￥' + ${totalIncome}"></span>
 	        </div>
 
-		<div>
+	        <div class="d-flex justify-content-between">
-			<span>支出：</span>
+	            <span>支出</span>
-			<span th:text="${totalExpense}"></span>
+	            <span th:text="'￥' + ${totalExpense}"></span>
-			<span>円</span>
 	        </div>
 
 	    </div>
 
-<!--	<div>-->
+	</div>
-<!--		<span>目標貯金</span>-->
-<!--		<span th:text="${targetAmount}"></span>-->
-<!--		<span>円</span>-->
-<!--	</div>-->
 	
-<!--	<div>-->
+	<hr class="border border-primary border-2 opacity-50">
-<!--			<span>現在高</span>-->
-<!--			<span th:text="${currentAmount}"></span>-->
-<!--			<span>円</span>-->
-<!--		</div>-->
 
-	<div>
+	<div class="card shadow-sm mb-3">
+
+	    <div class="card-body">
+
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>目標資金</span>
+	            <span th:text="'￥' + ${targetAmount}"></span>
+	        </div>
+
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>現在高</span>
+	            <span th:text="'￥' + ${currentAmount}"></span>
+	        </div>
+
+	        <div class="d-flex justify-content-between">
 	            <span>貯金額</span>
-		<span th:text="${saving}"></span>
+	            <span th:text="'￥' + ${saving}"></span>
-		<span>円</span>
 	        </div>
 
-	<hr>
+	    </div>
 
-<!--	<div>-->
+	</div>
-<!--		<span>達成率</span>-->
+	
-<!--		<span th:text="${achievementRate}"></span>-->
+	<div class="card shadow-sm">
-<!--		<span>%</span>-->
+
-<!--	</div>-->
+	    <div class="card-body">
-<!--	<div>-->
+
-<!--		<span>達成期限</span>-->
+	        <div class="d-flex justify-content-between mb-2">
-<!--		<span th:text="${deadline}"></span>-->
+	            <span>達成率</span>
-<!--		<span>円</span>-->
+	            <span th:text="${achievementRate} + '%'"
-<!--	</div>-->
+				      class="badge bg-success">
+				</span>
+	        </div>
+
+	        <div class="d-flex justify-content-between">
+	            <span>達成期限</span>
+	            <span th:text="${deadline}"></span>
+	        </div>
+
+	    </div>
+
+	</div>
 
 	<div th:replace="~{footer :: footer}"></div>
 

src/main/resources/templates/password_reset.html

@@ -1,46 +1,91 @@
 <!DOCTYPE html>
 <html lang="ja"xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>パスワード再設定</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body>
+<body style="padding-top:80px; padding-bottom:80px;">
-<!--<body class="pb-5 pt-5">-->
-<!--	<div th:replace="~{header :: header}">-->
-<!--		</div>-->
 
-	<main>
+    <div th:replace="~{header :: header}">
-		<h1>パスワード再設定</h1>
+    </div>
+
+    <div class="main-container">
+
+        <h1 class="page-title">
+            パスワード再設定
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <form th:action="@{/password/reset}"
+                      th:object="${passwordResetForm}"
+                      method="post">
+
+                    <div class="mb-3">
+
+                        <label for="password"
+                               class="form-label">
+                            新しいパスワード
+                        </label>
 
-		<form th:action="@{/password/reset}" th:object="${passwordResetForm}" method="post">
-			<div>
-				<label for="password">新しいパスワード</label>
                         <input type="password"
                                id="password"
+                               class="form-control"
                                th:field="*{password}"
                                minlength="8"
                                maxlength="255"
                                required>
+
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="passwordConfirm">パスワード確認</label>
+
+                        <label for="passwordConfirm"
+                               class="form-label">
+                            パスワード確認
+                        </label>
+
                         <input type="password"
                                id="passwordConfirm"
+                               class="form-control"
                                th:field="*{passwordConfirm}"
                                minlength="8"
                                maxlength="255"
                                required>
+
+                    </div>
+
+                    <div class="d-grid">
+
+                        <button type="submit"
+                                class="btn btn-primary">
+
+                            再設定
+
+                        </button>
+
                     </div>
 
-			<button type="submit">再設定</button>
                 </form>
 
-		<div th:if="${Message}">
-		    <p th:text="${Message}"></p>
             </div>
-	</main>
+
+        </div>
+
+        <div th:if="${Message}"
+             class="alert alert-danger mt-3">
+
+            <span th:text="${Message}">
+            </span>
+
+        </div>
+
+    </div>
+
 </body>
 </html>

src/main/resources/templates/profile.html

@@ -1,69 +1,110 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>プロフィール</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
+<body>
 	
 	<div th:replace="~{header :: header}">
 		</div>
 	
-	<main>
+		<div class="main-container">
-		<div>
+
-			<p>氏名</p>
+		    <h2 class="page-title">
-			<p th:text="${profileForm.userName}"></p>
+		        プロフィール
+		    </h2>
+
+		    <div class="card shadow-sm">
+
+		        <div class="card-body">
+
+		            <table class="table mb-0">
+
+		                <tbody>
+
+		                    <tr>
+		                        <th>氏名</th>
+		                        <td th:text="${profileForm.userName}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>メールアドレス</th>
+		                        <td th:text="${profileForm.mailAddress}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>生年月日</th>
+		                        <td th:text="${profileForm.birthDate}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>貯蓄金</th>
+		                        <td th:text="'￥' + ${profileForm.saving}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>年収</th>
+		                        <td th:text="'￥' + ${profileForm.annualIncome}"></td>
+		                    </tr>
+
+		                    <tr>
+		                        <th>月別使用可能額</th>
+		                        <td th:text="'￥' + ${profileForm.monthlyBudget}"></td>
+		                    </tr>
+
+		                </tbody>
+
+		            </table>
+
 		        </div>
 
-		<div>
-			<p>メールアドレス</p>
-			<p th:text="${profileForm.mailAddress}"></p>
 		    </div>
 			
-		<div>
+			<div class="d-grid gap-2 mt-4">
-			<p>生年月日</p>
-			<p th:text="${profileForm.birthDate}"></p>
-		</div>
 
-		<div>
-			<p>パスワード</p>
-			<form th:action="@{/password/reset}" method="get">
-				<button type="submit">パスワード再設定</button>
-			</form>
-		</div>
-			
-		<div>
-			<p>貯蓄金</p>
-			<p th:text="${profileForm.saving}"></p>
-		</div>
-			
-		<div>
-			<p>年収</p>
-			<p th:text="${profileForm.annualIncome}"></p>
-		</div>
-			
-		<div>
-			<p>月別使用可能額</p>
-			<p th:text="${profileForm.monthlyBudget}"></p>
-		</div>
-			
-		<div>
 			    <form th:action="@{/profile/edit}" method="get">
-				<button type="submit">編集</button>
+
+			        <button class="btn btn-primary w-100"
+			                type="submit">
+			            編集
+			        </button>
+
+			    </form>
+
+			    <form th:action="@{/password/reset}" method="get">
+
+			        <button class="btn btn-outline-primary w-100"
+			                type="submit">
+			            パスワード再設定
+			        </button>
+
 			    </form>
-		</div>
 
 			    <form th:action="@{/logout}" method="post">
-				<button type="submit">ログアウト</button>
+
+			        <button class="btn btn-secondary w-100"
+			                type="submit">
+			            ログアウト
+			        </button>
+
 			    </form>
 
-			<form th:action="@{/withdraw}" method="post"
+			    <form th:action="@{/withdraw}"
+			          method="post"
 			          onsubmit="return confirm('本当に脱退しますか？');">
-			    <button type="submit">脱退</button>
+
+			        <button class="btn btn-danger w-100"
+			                type="submit">
+			            脱退
+			        </button>
+
 			    </form>
-		</main>
+
+			</div>
 		
 		<div th:replace="~{footer :: footer}">
 			</div>

src/main/resources/templates/profile_edit.html

@@ -1,72 +1,119 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>プロフィール編集</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
+<body>
 	
 	<div th:replace="~{header :: header}">
 		</div>
 	
-	<main>
+		<div class="main-container">
-		<h1>プロフィール編集</h1>
+
+		    <h1 class="page-title">
+		        プロフィール編集
+		    </h1>
+
+		    <div class="card shadow-sm">
+
+		            <form th:action="@{/profile/edit}"
+		                  th:object="${profileEditForm}"
+		                  method="post">
+						  
+					<div class="card-body">
+
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        氏名
+		                    </label>
 
-		<form th:action="@{/profile/edit}"th:object="${profileEditForm}"method="post">
-			<div>
-				<label>氏名</label>
 		                    <input type="text"
+		                           class="form-control"
 		                           th:field="*{userName}"
 		                           maxlength="100"
 		                           required>
 		                </div>
 
-			<div>
+		                <div class="mb-3">
-				<label>メールアドレス</label>
+		                    <label class="form-label">
+		                        メールアドレス
+		                    </label>
+
 		                    <input type="email"
+		                           class="form-control"
 		                           th:field="*{mailAddress}"
 		                           maxlength="255"
 		                           required>
 		                </div>
 
-			<div>
+		                <div class="mb-3">
-				<label>パスワード</label>
+		                    <label class="form-label">
+		                        パスワード
+		                    </label>
+
 		                    <input type="password"
+		                           class="form-control"
 		                           value="********"
 		                           disabled>
 		                </div>
 
-			<div>
+		                <div class="mb-3">
-				<label>貯蓄金</label>
+		                    <label class="form-label">
+		                        貯蓄金
+		                    </label>
+
 		                    <input type="number"
+		                           class="form-control"
 		                           th:field="*{saving}"
 		                           min="0"
+								   max="1000000000"
 		                           required>
 		                </div>
 
-			<div>
+		                <div class="mb-3">
-				<label>年収</label>
+		                    <label class="form-label">
+		                        年収
+		                    </label>
+
 		                    <input type="number"
+		                           class="form-control"
 		                           th:field="*{annualIncome}"
 		                           min="0"
+								   max="100000000"
 		                           required>
 		                </div>
 
-			<div>
+		                <div class="mb-3">
-				<label>月別使用可能額</label>
+		                    <label class="form-label">
+		                        月別使用可能額
+		                    </label>
+
 		                    <input type="number"
+		                           class="form-control"
 		                           th:field="*{monthlyBudget}"
 		                           min="0"
+								   max="10000000"
 		                           required>
 		                </div>
 
-			<div>
-				<button type="submit">確認</button>
 		        	</div>
+					
+					<div class="d-grid">
+	                    <button type="submit"
+	                            class="btn btn-primary">
+	                        確認
+	                    </button>
+	                </div>
+				
 				</form>
-	</main>
+
+		    </div>
+
+		</div>
 	
 	<div th:replace="~{footer :: footer}">
 	</div>

src/main/resources/templates/transaction_create.html

@@ -2,71 +2,141 @@
 <html>
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>Insert title here</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">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
 
 	<div th:replace="~{header :: header}"></div>
 
-	<h1>取引登録</h1>
+	<div class="main-container">
 
-	<form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post">
+	    <h1 class="page-title">
+	        取引登録
+	    </h1>
+
+	    <div class="card shadow-sm">
+
+	        <div class="card-body">
+
+	            <form th:action="@{/transaction/create}"
+	                  th:object="${transactionForm}"
+	                  method="post">
+
+	                <div class="mb-3">
+
+	                    <label for="transactionDate"
+	                           class="form-label">
+	                        日付
+	                    </label>
+
+	                    <input type="date"
+	                           id="transactionDate"
+	                           class="form-control"
+	                           th:value="*{transactionDate}" 
+							   required>
 
-		<div>
-			<label for="transactionDate">日付</label>
-			<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
 	                </div>
 
-		<br>
+	                <div class="mb-3">
 
-		<div>
+	                    <label for="transactionType"
-			<label for="transactionType">収入・支出</label>
+	                           class="form-label">
+	                        収入・支出
+	                    </label>
 
-			<select id="transactionType" th:field="*{transactionType}">
+	                    <select id="transactionType"
+	                            class="form-select"
+	                            th:field="*{transactionType}"  
+								required>
 
-				<option value="">選択してください</option>
+	                        <option value="">
-				<option value="1">支出</option>
+	                            選択してください
-				<option value="2">収入</option>
+	                        </option>
+
+	                        <option value="1">
+	                            支出
+	                        </option>
+
+	                        <option value="2">
+	                            収入
+	                        </option>
 
 	                    </select>
+
 	                </div>
 
-		<br>
+	                <div class="mb-3">
 
-		<div>
+	                    <label for="categoryId"
-			<label for="categoryId">カテゴリ</label>
+	                           class="form-label">
+	                        カテゴリ
+	                    </label>
 
-			<select id="categoryId" th:field="*{categoryId}">
+	                    <select id="categoryId"
+	                            class="form-select"
+	                            th:field="*{categoryId}"  
+								required>
 
-				<option value="">選択してください</option>
+	                        <option value="">
+	                            選択してください
+	                        </option>
 
-				<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}"
+	                        <option th:each="category : ${categoryFormList}"
+	                                th:value="${category.categoryId}"
 	                                th:text="${category.categoryName}">
 	                        </option>
 
 	                    </select>
+
 	                </div>
 
-		<br>
+	                <div class="mb-3">
 
-		<div>
+	                    <label for="amount"
-			<label for="amount">金額</label>
+	                           class="form-label">
+	                        金額
+	                    </label>
+
+	                    <input type="number"
+	                           id="amount"
+	                           class="form-control"
+	                           th:field="*{amount}"
+	                           min="0"
+							   max="100000000"
+	                           placeholder="金額を入力してください"  
+							   required>
 
-			<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください">
 	                </div>
 
-		<br>
+	                <input type="hidden"
-		<input type="hidden" name="today" id="today" th:value="${today}">
+	                       name="today"
+	                       th:value="${today}">
 
-		<button type="submit">登録</button>
+	                <div class="d-grid">
+
+	                    <button type="submit"
+	                            class="btn btn-primary">
+
+	                        登録
+
+	                    </button>
+
+	                </div>
 
 	            </form>
 
+	        </div>
+
+	    </div>
+
+	</div>
+
 	<div th:replace="~{footer :: footer}"></div>
 
 

src/main/resources/templates/transaction_detail.html

@@ -2,54 +2,108 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>収支詳細</title>
 	<link rel="stylesheet" th:href="@{/css/transaction_detail.css}">
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 
 	<div th:replace="~{header :: header}"></div>
-	<h1 th:text="${today}"></h1>
+	<div class="main-container">
 
-	<div>
+	    <h2 class="page-title"
-		<ul>
+	        th:text="${today}">
-			<li th:each="transactionForm : ${transactionFormList}" class="transaction-item">
+	    </h2>
+
+	    <div th:each="transactionForm : ${transactionFormList}"
+	         class="card shadow-sm mb-3">
+
+	        <div class="card-body">
+
+	            <div class="d-flex justify-content-between">
+
+	                <span class="fw-bold"
+	                      th:text="${transactionForm.categoryName}">
+	                </span>
+
+	                <span th:text="'￥' + ${transactionForm.amount}">
+	                </span>
 
-				<div>
-					<p>
-						カテゴリ名：
-						<span th:text="${transactionForm.categoryName}"></span>
-						<br>
-						金額：
-						<span th:text="${transactionForm.amount}"></span>
-					</p>
 	            </div>
 
-				<div class="transaction-buttons">
+	            <div class="d-flex justify-content-end gap-2 mt-3">
+
+	                <form th:action="@{/transaction/update}"
+	                      method="get">
+
+	                    <input type="hidden"
+	                           name="today"
+	                           th:value="${today}">
+
+	                    <input type="hidden"
+	                           name="transactionId"
+	                           th:value="${transactionForm.transactionId}">
+
+	                    <button class="btn btn-sm btn-primary"
+	                            type="submit">
+
+	                        編集
+
+	                    </button>
 
-					<form th:action="@{/transaction/delete}" method="post">
-						<input type="hidden" name="today" th:value="${today}">
-						<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
-						<button type="submit">削除</button>
 	                </form>
 
-					<form th:action="@{/transaction/update}" method="get">
+	                <form th:action="@{/transaction/delete}"
-						<input type="hidden" name="today" th:value="${today}">
+	                      method="post">
-						<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
+
-						<button type="submit">編集</button>
+	                    <input type="hidden"
+	                           name="today"
+	                           th:value="${today}">
+
+	                    <input type="hidden"
+	                           name="transactionId"
+	                           th:value="${transactionForm.transactionId}">
+
+	                    <button class="btn btn-sm btn-danger"
+	                            type="submit">
+
+	                        削除
+
+	                    </button>
+
 	                </form>
 
 	            </div>
 
-				<hr>
-				<hr>
-			</li>
-		</ul>
 	        </div>
 
+	    </div>
+
+	    <div class="d-grid mt-4">
+
+	        <form th:action="@{/transaction/create}"
+	              method="get">
+
+	            <input type="hidden"
+	                   name="today"
+	                   th:value="${today}">
+
+	            <button class="btn btn-success w-100"
+	                    type="submit">
+
+	                新規登録
+
+	            </button>
+
+	        </form>
+
+	    </div>
+
+	</div>
 
 
 	<form th:action="@{/transaction/create}" method="get">

src/main/resources/templates/transaction_list.html

@@ -2,17 +2,19 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>一覧</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">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 
 	<div th:replace="~{header :: header}"></div>
 
+	<div class="main-container">
 	<div class="calendar-title">
 
 		<a class="month-button" th:href="@{/transaction/list(
@@ -40,20 +42,27 @@
 
 
 
-	<div th:each="transactionForm : ${transactionFormMap}">
+	<div th:each="transactionForm : ${transactionFormMap}"
+	     th:if="${!transactionForm.value.isEmpty()}"
+	     class="card shadow-sm mb-3">
 		 
-		<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}">
+		 <div class="card-body">
-			<h3 th:text="${transactionForm.key}"></h3>
+
+		<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}" class="text-decoration-none">
+			<h3 th:text="${transactionForm.key}" class="fw-bold"></h3>
 		</a>
-		<ul>
+		<div th:each="transaction : ${transactionForm.value}"
-			<li th:each="transaction : ${transactionForm.value}">
+		class="d-flex justify-content-between mb-2">
-				<p>カテゴリ名：<span th:text="${transaction.categoryName}"></span>
+		 
-					<br>金額：<span th:text="${transaction.amount}"></span>
+		<span th:text="${transaction.categoryName}">
-				</p>
+		</span>
-				<hr />
+		 
-			</li>
+		<span th:text="'￥' + ${transaction.amount}">
-		</ul>
+		</span>
+		 
+		</div>
 
+	</div>
 	</div>
 	<div th:replace="~{footer :: footer}"></div>
 

src/main/resources/templates/transaction_update.html

@@ -2,74 +2,144 @@
 <html>
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
-	<title>Insert title here</title>
+	<title>取引更新</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">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
 
-<body class="pb-5 pt-5">
+<body style="padding-top:80px; padding-bottom:80px;">
 
-	<div th:replace="~{header :: header}"></div>
+    <div th:replace="~{header :: header}">
-
-	<h1>取引登録</h1>
-
-	<form th:action="@{/transaction/update}" th:object="${transactionForm}" method="post">
-
-		<input type="hidden" name="transactionId" th:value="${transactionId}">
-		
-		<div>
-			<label for="transactionDate">日付</label>
-			<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
     </div>
 
-		<br>
+    <div class="main-container">
 
-		<div>
+        <h1 class="page-title">
-			<label for="transactionType">収入・支出</label>
+            取引更新
+        </h1>
 
-			<select id="transactionType" th:field="*{transactionType}">
+        <div class="card shadow-sm">
 
-				<option value="">選択してください</option>
+            <div class="card-body">
-				<option value="0">支出</option>
+
-				<option value="1">収入</option>
+                <form th:action="@{/transaction/update}"
+                      th:object="${transactionForm}"
+                      method="post">
+
+                    <input type="hidden"
+                           name="transactionId"
+                           th:value="${transactionId}">
+
+                    <input type="hidden"
+                           name="today"
+                           th:value="${today}">
+
+                   <div class="mb-3">
+                        <label for="transactionDate" class="form-label">
+						   	日付
+						</label>
+				        <input type="date"
+						    id="transactionDate"
+						   	class="form-control"
+						   	name="transactionDate" 
+						   	th:value="*{transactionDate}"
+							required>
+				    </div>
+
+                    <div class="mb-3">
+
+                        <label for="transactionType"
+                               class="form-label">
+                            収入・支出
+                        </label>
+
+                        <select id="transactionType"
+                                class="form-select"
+                                th:field="*{transactionType}"
+								required>
+
+                            <option value="">
+                                選択してください
+                            </option>
+
+                            <option value="0">
+                                支出
+                            </option>
+
+                            <option value="1">
+                                収入
+                            </option>
 
                         </select>
+
                     </div>
 
-		<br>
+                    <div class="mb-3">
 
-		<div>
+                        <label for="categoryId"
-			<label for="categoryId">カテゴリ</label>
+                               class="form-label">
+                            カテゴリ
+                        </label>
 
-			<select id="categoryId" th:field="*{categoryId}">
+                        <select id="categoryId"
+                                class="form-select"
+                                th:field="*{categoryId}"
+								required>
 
-				<option value="">選択してください</option>
+                            <option value="">
+                                選択してください
+                            </option>
 
-				<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}"
+                            <option th:each="category : ${categoryFormList}"
+                                    th:value="${category.categoryId}"
                                     th:text="${category.categoryName}">
                             </option>
 
                         </select>
+
                     </div>
 
-		<br>
+                    <div class="mb-4">
 
-		<div>
+                        <label for="amount"
-			<label for="amount">金額</label>
+                               class="form-label">
+                            金額
+                        </label>
+
+                        <input type="number"
+                               id="amount"
+                               class="form-control"
+                               th:field="*{amount}"
+                               min="0"
+							   max="100000000"
+                               placeholder="金額を入力してください"
+							   required>
 
-			<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください">
                     </div>
 
-		<br>
+                    <div class="d-grid">
-		<input type="hidden" name="today" id="today" th:value="${today}">
 
-		<button type="submit">登録</button>
+                        <button type="submit"
+                                class="btn btn-primary">
+
+                            更新
+
+                        </button>
+
+                    </div>
 
                 </form>
 
-	<div th:replace="~{footer :: footer}"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+    <div th:replace="~{footer :: footer}">
+    </div>
 
 </body>
 

src/main/resources/templates/user_register.html

@@ -1,128 +1,231 @@
 <!DOCTYPE html>
 <html lang="ja" xmlns:th="http://www.thymeleaf.org">
+
 <head>
     <meta charset="UTF-8">
-<title>新規会員登録</title>
+    <meta name="viewport"
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+          content="width=device-width, initial-scale=1">
 
+    <title>新規会員登録</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
+          rel="stylesheet">
+
+    <link rel="stylesheet"
+          th:href="@{/css/style.css}">
 </head>
-<body class="pb-5 pt-5">
+
+<body style="padding-top:80px; padding-bottom:80px;">
+
     <div th:replace="~{header :: header}">
     </div>
 
-	<main>
+    <div class="main-container">
-		<h1>新規会員登録</h1>
+
+        <h1 class="page-title">
+            新規会員登録
+        </h1>
+
+        <div class="card shadow-sm">
+
+            <div class="card-body">
+
+                <form th:action="@{/user/register/course}"
+                      th:object="${userForm}"
+                      method="post">
+
+                    <div class="mb-3">
+                        <label for="userName"
+                               class="form-label">
+                            氏名
+                        </label>
 
-		<form th:action="@{/user/register/course}" th:object="${userForm}" method="post">
-			<div>
-				<label for="userName">氏名</label>
                         <input type="text"
                                id="userName"
+                               class="form-control"
                                th:field="*{userName}"
                                maxlength="100"
                                required>
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="mailAddress">メールアドレス</label>
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
                         <input type="email"
                                id="mailAddress"
+                               class="form-control"
                                th:field="*{mailAddress}"
                                maxlength="255"
                                required>
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="birthDate">生年月日</label>
+                        <label for="birthDate"
+                               class="form-label">
+                            生年月日
+                        </label>
+
                         <input type="date"
                                id="birthDate"
+                               class="form-control"
                                th:field="*{birthDate}"
                                required>
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="password">パスワード</label>
+                        <label for="password"
+                               class="form-label">
+                            パスワード
+                        </label>
+
                         <input type="password"
                                id="password"
+                               class="form-control"
                                th:field="*{password}"
                                minlength="8"
                                maxlength="255"
                                required>
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="secretQuestionId">秘密の質問</label>
+                        <label for="secretQuestionId"
+                               class="form-label">
+                            秘密の質問
+                        </label>
+
                         <select id="secretQuestionId"
+                                class="form-select"
                                 th:field="*{secretQuestionId}"
                                 required>
-				    <option value="">選択してください</option>
+
+                            <option value="">
+                                選択してください
+                            </option>
+
                             <option th:each="question : ${session.questionList}"
                                     th:value="${question.secretQuestionId}"
                                     th:text="${question.questionText}">
                             </option>
+
                         </select>
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="secretAnswer">秘密の質問の回答</label>
+                        <label for="secretAnswer"
+                               class="form-label">
+                            秘密の質問の回答
+                        </label>
+
                         <input type="text"
                                id="secretAnswer"
+                               class="form-control"
                                th:field="*{secretAnswer}"
                                maxlength="100"
                                required>
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="saving">貯蓄金</label>
+                        <label for="saving"
+                               class="form-label">
+                            貯蓄金
+                        </label>
+
                         <input type="number"
                                id="saving"
+                               class="form-control"
                                th:field="*{saving}"
                                min="0"
+							   max="1000000000"
                                required>
                     </div>
 
-			<div>
+                    <div class="mb-3">
-				<label for="annualIncome">年収</label>
+                        <label for="annualIncome"
+                               class="form-label">
+                            年収
+                        </label>
+
                         <input type="number"
                                id="annualIncome"
+                               class="form-control"
                                th:field="*{annualIncome}"
                                min="0"
+							   max="100000000"
                                required>
                     </div>
 
-			 <div>
+                    <div class="mb-3">
-				<label for="monthlyBudget">月別使用可能金額</label>
+                        <label for="monthlyBudget"
+                               class="form-label">
+                            月別使用可能金額
+                        </label>
+
                         <input type="number"
                                id="monthlyBudget"
+                               class="form-control"
                                th:field="*{monthlyBudget}"
                                min="0"
+							   max="10000000"
                                required>
                     </div>
 
-			 <div>
+                    <div class="mb-3">
-				<label for="goalId">目標</label>
+                        <label for="goalId"
+                               class="form-label">
+                            目標貯金額
+                        </label>
+
                         <input type="number"
                                id="goalId"
+                               class="form-control"
                                th:field="*{goalId}"
                                min="0"
+							   max="1000000000"
                                required>
                     </div>
 
-			<div>
+                    <input type="hidden"
-				<label>コース</label>
+                           th:field="*{courseId}">
-				<input type="hidden" th:field="*{courseId}">
+
-				<button type="submit">コース選択</button>
+                    <div class="d-grid gap-2 mt-4">
+
+                        <button type="submit"
+                                class="btn btn-outline-primary">
+                            コース選択
+                        </button>
+
+                        <button type="submit"
+                                class="btn btn-primary">
+                            作成
+                        </button>
+
                     </div>
 
-			<div>
+                </form>
-				<button type="submit">作成</button>
+
             </div>
+
+        </div>
+
+        <div class="d-grid mt-3">
+
+            <form th:action="@{/login}"
+                  method="get">
+
+                <button type="submit"
+                        class="btn btn-outline-secondary">
+                    戻る
+                </button>
+
             </form>
 
-		<form th:action="@{/login}" method="get">
+        </div>
-			<button type="submit">戻る</button>
+
-		</form>
+    </div>
 
-	</main>
 </body>
+
 </html>

src/main/resources/templates/user_register_confirm.html

@@ -2,43 +2,48 @@
 <html>
 
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>新規会員登録確認</title>
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
 
-<body class="pb-5 pt-5">
+<body>
 	<div th:replace="~{header :: header}">
 	</div>
 
-	<main>
+	<div class="main-container">
-		<h1>新規会員登録確認</h1>
+		<h1 class="page-title">新規会員登録確認</h1>
+		
+		<div class="card shadow-sm">
+		 
+		<div class="card-body">
 
 		<form th:action="@{/user/register/complete}" th:object="${userForm}" method="post">
-			<div>
+			<div class="mb-3">
-				<label for="userName">氏名</label>
+				<label for="userName" class="form-label">氏名</label>
-				<input type="text" id="userName" th:field="*{userName}" maxlength="100" readonly>
+				<input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100" readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="mailAddress">メールアドレス</label>
+				<label for="mailAddress" class="form-label">メールアドレス</label>
-				<input type="email" id="mailAddress" th:field="*{mailAddress}" maxlength="255" readonly>
+				<input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}" maxlength="255" readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="birthDate">生年月日</label>
+				<label for="birthDate" class="form-label">生年月日</label>
-				<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}" required readonly>
+				<input type="date" id="birthDate" class="form-control" name="birthDate" th:value="*{birthDate}" required readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="password">パスワード</label>
+				<label for="password" class="form-label">パスワード</label>
-				<input type="password" id="password" name="password" th:value="*{password}" minlength="8"
+				<input type="password" id="password" class="form-control" name="password" th:value="*{password}" minlength="8"
 					maxlength="255" required readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="secretQuestionId">秘密の質問</label>
+				<label for="secretQuestionId" class="form-label">秘密の質問</label>
 				<select id="secretQuestionId" th:field="*{secretQuestionId}" required readonly>
 					<option value="">選択してください</option>
 					<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
@@ -47,50 +52,58 @@
 				</select>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="secretAnswer">秘密の質問の回答</label>
+				<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
-				<input type="text" id="secretAnswer" th:field="*{secretAnswer}" maxlength="100" readonly>
+				<input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}" maxlength="100" readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="saving">貯蓄金</label>
+				<label for="saving" class="form-label">貯蓄金</label>
-				<input type="number" id="saving" th:field="*{saving}" min="0" readonly>
+				<input type="number" id="saving" class="form-control" th:field="*{saving}" min="0" readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="annualIncome">年収</label>
+				<label for="annualIncome" class="form-label">年収</label>
-				<input type="number" id="annualIncome" th:field="*{annualIncome}" min="0" readonly>
+				<input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0" readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="monthlyBudget">月別使用可能金額</label>
+			    <label for="monthlyBudget" class="form-label">月別使用可能金額</label>
-				<input type="number" id="monthlyBudget" th:field="*{monthlyBudget}" min="0" readonly>
+				<input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0" readonly>
 			</div>
 
-			<div>
+			<div class="mb-3">
-				<label for="goalId">目標</label>
+				<label for="goalId" class="form-label">目標</label>
-				<input type="number" id="goalId" th:field="*{goalId}" min="0" readonly>
+				<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0" readonly>
 			</div>
 
-			<div>
+			<div class="mb-4">
-				<label>コース</label>
+				<label class="form-label">コース</label>
-				<input type="hidden" th:field="*{courseId}">
+				<div class="d-flex justify-content-between align-items-center">
+				<input type="hidden" class="form-control" th:field="*{courseId}">
 				<span th:text="${selectedCourseName}">未選択</span>
-				<button type="submit">コース選択</button>
+				<button type="submit" class="btn btn-outline-primary btn-sm">コース選択</button>
+				</div>
 			</div>
 
-			<div>
+			<div class="d-grid">
-				<button type="submit">作成</button>
+				<button type="submit" class="btn btn-primary">
+					作成
+				</button>	
 			</div>
-			<div>
+		</form>
+		</div>
+		</div>
+			<div class="d-grid mt-3">
 				<form th:action="@{/user/register}" method="get">
-					<button type="submit">戻る</button>
+					<button type="submit" class="btn btn-outline-secondary">
+						戻る
+					</button>
 				</form>
 			</div>
-		</form>
 
 
-	</main>
+	</div>
 
 </body>
 

src/main/resources/templates/user_register_return.html

@@ -1,56 +1,65 @@
 <!DOCTYPE html>
 <html lang="ja"xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 <title>新規会員登録</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
-<body class="pb-5 pt-5">
+<body>
 	<div th:replace="~{header :: header}">
 		</div>
 	
-	<main>
+	<div class="main-container">
-		<h1>新規会員登録</h1>
+		
+		<h1 class="page-title">新規会員登録</h1>
+		
+		<div class="card shadow-sm">
+
+		    <div class="card-body">
 		
 		       <form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
-			<div>
+			     <div class="mb-3">
-				<label for="userName">氏名</label>
+				    <label for="userName" class="form-label">氏名</label>
 				    <input type="text"
 				    id="userName"
+					class="form-control"
 				    th:field="*{userName}"
 				    maxlength="100"
 				    required>
 			     </div>
 			
-			<div>
+			     <div class="mb-3">
-				<label for="mailAddress">メールアドレス</label>
+				   <label for="mailAddress" class="form-label">メールアドレス</label>
 				   <input type="email"
 				   id="mailAddress"
+				   class="form-control"
 				   th:field="*{mailAddress}"
 				   maxlength="255"
 				   required>
 			     </div>
 			
-			<div>
+			<div class="mb-3">
-				<label for="birthDate">生年月日</label>
+				<label for="birthDate" class="form-label">生年月日</label>
-				<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}"
+				<input type="date" id="birthDate" name="birthDate" class="form-control" th:value="*{birthDate}"
 				required>
 			</div>
 			
-			<div>
+			<div class="mb-3">
-				<label for="password">パスワード</label>
+				<label for="password" class="form-label">パスワード</label>
 				<input type="password"
 				id="password"
 				name="password"
+				class="form-control"
 				th:value="*{password}"
 				minlength="8"
 				maxlength="255"
 				required>
 			</div>
 			
-			<div>
+			<div class="mb-3">
-				<label for="secretQuestionId">秘密の質問</label>
+				<label for="secretQuestionId" class="form-label">秘密の質問</label>
 				<select id="secretQuestionId"
 				        th:field="*{secretQuestionId}"
 				        required>
@@ -62,67 +71,83 @@
 				</select>
 			</div>
 			
-			<div>
+			<div class="mb-3">
-				<label for="secretAnswer">秘密の質問の回答</label>
+				<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
 				<input type="text"
 				id="secretAnswer"
+				class="form-control"
 				th:field="*{secretAnswer}"
 				maxlength="100"
 				required>
 			</div>
 			
-			<div>
+			<div class="mb-3">
-				<label for="saving">貯蓄金</label>
+				<label for="saving" class="form-label">貯蓄金</label>
 				<input type="number"
 				id="saving"
+				class="form-control"
 				th:field="*{saving}"
 				min="0"
 				required>
 			</div>
 			
-			<div>
+			<div class="mb-3">
-				<label for="annualIncome">年収</label>
+				<label for="annualIncome" class="form-label">年収</label>
 				<input type="number"
 				id="annualIncome"
+				class="form-control"
 				th:field="*{annualIncome}"
 				 min="0"
 				 required>
 			 </div>
 			 
-			 <div>
+			 <div class="mb-3">
-				<label for="monthlyBudget">月別使用可能金額</label>
+				<label for="monthlyBudget" class="form-label">月別使用可能金額</label>
 				<input type="number"
 				id="monthlyBudget"
+				class="form-control"
 				th:field="*{monthlyBudget}"
 				min="0"
 				required>
 			 </div>
 			 
-			 <div>
+			 <div class="mb-3">
-				<label for="goalId">目標</label>
+				<label for="goalId" class="form-label">目標</label>
 				<input type="number"
 				id="goalId"
+				class="form-control"
 				th:field="*{goalId}"
 				min="0"
 				required>
 			</div>
 			
-			<div>
+			<div class="mb-4">
-				<label>コース</label>
+				<label class="form-label">コース</label>
+				<div class="d-flex justify-content-between align-items-center">
 				<input type="hidden" th:field="*{courseId}">
 				<span th:text="${selectedCourseName}">未選択</span>
-				<button type="submit">コース選択</button>
+				<button type="submit" class="btn btn-outline-primary btn-sm">
+					コース選択
+				</button>
+				</div>
 			</div>
 			
-			<div>
+			<div class="d-grid">
-				<button type="submit">作成</button>
+				<button type="submit" class="btn btn-primary">作成</button>
 			</div>
 		</form>
 		
+		    </div>
+			
+		</div>
+		
+		<div class="d-grid mt-3">
 		<form th:action="@{/login}" method="get">
-			<button type="submit">戻る</button>
+			<button type="submit" class="btn btn-outline-secondary">戻る</button>
 		</form>
 		
-	</main>
+	</div>
+	
+	</div>
 </body>
 </html>