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
[EDIT] 金額入力等の入力制限を追加しました。
2026-09-25 12:51:53 +09:00 · 2026-09-24 15:57:46 +09:00 · 2026-09-24 15:40:09 +09:00 · 2026-09-24 15:25:21 +09:00 · 2026-09-24 15:18:56 +09:00 · 2026-09-24 15:18:15 +09:00
21 changed files with 1617 additions and 786 deletions
--- a/src/main/java/com/example/demo/app/presentation/controller/CourseController.java
+++ b/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()));

--- a/src/main/resources/static/css/menu.css
+++ b/src/main/resources/static/css/menu.css
@@ -1,6 +1,7 @@
 body {
    margin: 0;
-    padding: 0;
+	padding-top:80px;
+	padding-bottom:120px;
 }

 #calendar {
--- a/src/main/resources/static/css/style.css
+++ b/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;
+}
--- a/src/main/resources/templates/analysis.html
+++ b/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">
-	<h2 class="text-center">支出分析</h2>
+	<div class="main-container">
+	<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;'
-						  : 'color-primary;'">
+					      ? 'text-danger'
+						  : 'text-primary'">
 					0
 				  </td>
 		      </tr>
@@ -84,16 +85,16 @@
 			          ? '＋' + ${category.monthDifferenceAmount}
 				      : ${category.monthDifferenceAmount}"
 			      th:class="${category.monthDifferenceAmount >= 0}
-				      ? 'color-danger;'
-				  	  : 'color-primary;'">
+				      ? 'text-danger'
+				  	  : 'text-primary'">
 			</span>
 			<br>
 			<span th:text="${category.courseDifferenceAmount >= 0}
 				      ? '＋' + ${category.courseDifferenceAmount}
 					  : ${category.courseDifferenceAmount}"
 			      th:class="${category.courseDifferenceAmount >= 0}
-				      ? 'color-danger;'
-				      : 'color-primary;'">
+				      ? 'text-danger'
+				      : 'text-primary'">
 			</span>
 		  </td>
 	    </tr>
--- a/src/main/resources/templates/authentication.html
+++ b/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>
-		<h1>本人認証確認</h1>
+    <div class="main-container">

-		<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>
-				<label for="secretQuestionId">秘密の質問</label>
-				<select id="secretQuestionId" th:field="*{secretQuestionId}">
+                    <div class="mb-3">

-					<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>
-				<label for="secretAnswer">秘密の質問の回答</label>
-				<input type="text" id="secretAnswer" th:field="*{secretAnswer}">
+                    <div class="mb-3">
+
+                        <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">
-			<button type="submit">戻る</button>
-		</form>
-	</main>
+            </div>

-	<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>
--- a/src/main/resources/templates/footer.html
+++ b/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">
--- a/src/main/resources/templates/goal_edit.html
+++ b/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>

 	
--- a/src/main/resources/templates/goal_view.html
+++ b/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>
-
-							目標名：
-							<span th:text="${goalForm.goalTitle}">
-							</span>
-
-							<br>
-
-							目標説明：
-							<span th:text="${goalForm.goalSubtitle}">
-							</span>
-
-							<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.goalSubtitle}"></td>
+								</tr>
+								<tr>
+									<th>目標金額</th>
+									<td th:text="${goalForm.targetAmount}"></td>
+								</tr>
+								<tr>
+									<th>目標達成期限</th>
+									<td th:text="${goalForm.deadline}"></td>
+								</tr>

+								<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>
--- a/src/main/resources/templates/header.html
+++ b/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">
--- a/src/main/resources/templates/login.html
+++ b/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>
-		<h1>ログイン</h1>
+    <div class="main-container">

-		<div th:if="${errorMessage}" th:text="${errorMessage}"></div>
-		<form th:action="@{/login}" th:object="${loginForm}" method="post">
-			<div>
-				<label for="mailAddress">メールアドレス</label>
+        <h1 class="page-title">
+            ログイン
+        </h1>
+
+        <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>
-				<label for="password">パスワード</label>
+                    <div class="mb-3">
+
+                        <label for="password"
+                               class="form-label">
+                            パスワード
+                        </label>

                        <input type="password"
                               id="password"
+                               class="form-control"
                               th:field="*{password}"
                               required>
+
                    </div>

-			<div>
-				<button type="submit">ログイン</button>
+                    <div class="d-grid">
+
+                        <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>
--- a/src/main/resources/templates/menu.html
+++ b/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>
-			<span>収入：</span>
-			<span th:text="${totalIncome}"></span>
-			<span>円</span>
+	    <div class="card-body">
+
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>収入</span>
+	            <span th:text="'￥' + ${totalIncome}"></span>
 	        </div>

-		<div>
-			<span>支出：</span>
-			<span th:text="${totalExpense}"></span>
-			<span>円</span>
+	        <div class="d-flex justify-content-between">
+	            <span>支出</span>
+	            <span th:text="'￥' + ${totalExpense}"></span>
 	        </div>

 	    </div>

-<!--	<div>-->
-<!--		<span>目標貯金</span>-->
-<!--		<span th:text="${targetAmount}"></span>-->
-<!--		<span>円</span>-->
-<!--	</div>-->
+	</div>
 	
-<!--	<div>-->
-<!--			<span>現在高</span>-->
-<!--			<span th:text="${currentAmount}"></span>-->
-<!--			<span>円</span>-->
-<!--		</div>-->
+	<hr class="border border-primary border-2 opacity-50">

-	<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>円</span>
+	            <span th:text="'￥' + ${saving}"></span>
 	        </div>

-	<hr>
+	    </div>

-<!--	<div>-->
-<!--		<span>達成率</span>-->
-<!--		<span th:text="${achievementRate}"></span>-->
-<!--		<span>%</span>-->
-<!--	</div>-->
-<!--	<div>-->
-<!--		<span>達成期限</span>-->
-<!--		<span th:text="${deadline}"></span>-->
-<!--		<span>円</span>-->
-<!--	</div>-->
+	</div>
+	
+	<div class="card shadow-sm">
+
+	    <div class="card-body">
+
+	        <div class="d-flex justify-content-between mb-2">
+	            <span>達成率</span>
+	            <span th:text="${achievementRate} + '%'"
+				      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>

--- a/src/main/resources/templates/password_reset.html
+++ b/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 class="pb-5 pt-5">-->
-<!--	<div th:replace="~{header :: header}">-->
-<!--		</div>-->
+<body style="padding-top:80px; padding-bottom:80px;">

-	<main>
-		<h1>パスワード再設定</h1>
+    <div th:replace="~{header :: header}">
+    </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>
-				<label for="passwordConfirm">パスワード確認</label>
+                    <div class="mb-3">
+
+                        <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>
--- a/src/main/resources/templates/profile.html
+++ b/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>
-			<p>氏名</p>
-			<p th:text="${profileForm.userName}"></p>
+		<div class="main-container">
+
+		    <h2 class="page-title">
+		        プロフィール
+		    </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>
-			<p>生年月日</p>
-			<p th:text="${profileForm.birthDate}"></p>
-		</div>
+			<div class="d-grid gap-2 mt-4">

-		<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>
--- a/src/main/resources/templates/profile_edit.html
+++ b/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>
-		<h1>プロフィール編集</h1>
+		<div class="main-container">
+
+		    <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>
-				<label>メールアドレス</label>
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        メールアドレス
+		                    </label>
+
 		                    <input type="email"
+		                           class="form-control"
 		                           th:field="*{mailAddress}"
 		                           maxlength="255"
 		                           required>
 		                </div>

-			<div>
-				<label>パスワード</label>
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        パスワード
+		                    </label>
+
 		                    <input type="password"
+		                           class="form-control"
 		                           value="********"
 		                           disabled>
 		                </div>

-			<div>
-				<label>貯蓄金</label>
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        貯蓄金
+		                    </label>
+
 		                    <input type="number"
+		                           class="form-control"
 		                           th:field="*{saving}"
 		                           min="0"
+								   max="1000000000"
 		                           required>
 		                </div>

-			<div>
-				<label>年収</label>
+		                <div class="mb-3">
+		                    <label class="form-label">
+		                        年収
+		                    </label>
+
 		                    <input type="number"
+		                           class="form-control"
 		                           th:field="*{annualIncome}"
 		                           min="0"
+								   max="100000000"
 		                           required>
 		                </div>

-			<div>
-				<label>月別使用可能額</label>
+		                <div class="mb-3">
+		                    <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>
--- a/src/main/resources/templates/transaction_create.html
+++ b/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>
+	                    <label for="transactionType"
+	                           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="1">支出</option>
-				<option value="2">収入</option>
+	                        <option value="">
+	                            選択してください
+	                        </option>
+
+	                        <option value="1">
+	                            支出
+	                        </option>
+
+	                        <option value="2">
+	                            収入
+	                        </option>

 	                    </select>
+
 	                </div>

-		<br>
+	                <div class="mb-3">

-		<div>
-			<label for="categoryId">カテゴリ</label>
+	                    <label for="categoryId"
+	                           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>
+	                    <label for="amount"
+	                           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" name="today" id="today" th:value="${today}">
+	                <input type="hidden"
+	                       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>


--- a/src/main/resources/templates/transaction_detail.html
+++ b/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>
-		<ul>
-			<li th:each="transactionForm : ${transactionFormList}" class="transaction-item">
+	    <h2 class="page-title"
+	        th:text="${today}">
+	    </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">
-						<input type="hidden" name="today" th:value="${today}">
-						<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
-						<button 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 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">
--- a/src/main/resources/templates/transaction_list.html
+++ b/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})}">
-			<h3 th:text="${transactionForm.key}"></h3>
+		 <div class="card-body">
+
+		<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}" class="text-decoration-none">
+			<h3 th:text="${transactionForm.key}" class="fw-bold"></h3>
 		</a>
-		<ul>
-			<li th:each="transaction : ${transactionForm.value}">
-				<p>カテゴリ名：<span th:text="${transaction.categoryName}"></span>
-					<br>金額：<span th:text="${transaction.amount}"></span>
-				</p>
-				<hr />
-			</li>
-		</ul>
+		<div th:each="transaction : ${transactionForm.value}"
+		class="d-flex justify-content-between mb-2">
+		 
+		<span th:text="${transaction.categoryName}">
+		</span>
+		 
+		<span th:text="'￥' + ${transaction.amount}">
+		</span>
+		 
+		</div>

+	</div>
 	</div>
 	<div th:replace="~{footer :: footer}"></div>

--- a/src/main/resources/templates/transaction_update.html
+++ b/src/main/resources/templates/transaction_update.html
@@ -2,74 +2,144 @@
 <html>

 <head>
-	<meta charset="UTF-8">
-	<title>Insert title here</title>
-	<link rel="stylesheet" th:href="@{/css/menu.css}">
+	<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>
-
-	<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 th:replace="~{header :: header}">
    </div>

-		<br>
+    <div class="main-container">

-		<div>
-			<label for="transactionType">収入・支出</label>
+        <h1 class="page-title">
+            取引更新
+        </h1>

-			<select id="transactionType" th:field="*{transactionType}">
+        <div class="card shadow-sm">

-				<option value="">選択してください</option>
-				<option value="0">支出</option>
-				<option value="1">収入</option>
+            <div class="card-body">
+
+                <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>
+                        <label for="categoryId"
+                               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>
+                        <label for="amount"
+                               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" name="today" id="today" th:value="${today}">
+                    <div class="d-grid">

-		<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>

--- a/src/main/resources/templates/user_register.html
+++ b/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>
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+<html lang="ja" xmlns:th="http://www.thymeleaf.org">

+<head>
+    <meta charset="UTF-8">
+    <meta 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 class="pb-5 pt-5">
+
+<body style="padding-top:80px; padding-bottom:80px;">
+
    <div th:replace="~{header :: header}">
    </div>

-	<main>
-		<h1>新規会員登録</h1>
+    <div class="main-container">
+
+        <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>
-				<label for="mailAddress">メールアドレス</label>
+                    <div class="mb-3">
+                        <label for="mailAddress"
+                               class="form-label">
+                            メールアドレス
+                        </label>
+
                        <input type="email"
                               id="mailAddress"
+                               class="form-control"
                               th:field="*{mailAddress}"
                               maxlength="255"
                               required>
                    </div>

-			<div>
-				<label for="birthDate">生年月日</label>
+                    <div class="mb-3">
+                        <label for="birthDate"
+                               class="form-label">
+                            生年月日
+                        </label>
+
                        <input type="date"
                               id="birthDate"
+                               class="form-control"
                               th:field="*{birthDate}"
                               required>
                    </div>

-			<div>
-				<label for="password">パスワード</label>
+                    <div class="mb-3">
+                        <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>
-				<label for="secretQuestionId">秘密の質問</label>
+                    <div class="mb-3">
+                        <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>
-				<label for="secretAnswer">秘密の質問の回答</label>
+                    <div class="mb-3">
+                        <label for="secretAnswer"
+                               class="form-label">
+                            秘密の質問の回答
+                        </label>
+
                        <input type="text"
                               id="secretAnswer"
+                               class="form-control"
                               th:field="*{secretAnswer}"
                               maxlength="100"
                               required>
                    </div>

-			<div>
-				<label for="saving">貯蓄金</label>
+                    <div class="mb-3">
+                        <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>
-				<label for="annualIncome">年収</label>
+                    <div class="mb-3">
+                        <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>
-				<label for="monthlyBudget">月別使用可能金額</label>
+                    <div class="mb-3">
+                        <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>
-				<label for="goalId">目標</label>
+                    <div class="mb-3">
+                        <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>
-				<label>コース</label>
-				<input type="hidden" th:field="*{courseId}">
-				<button type="submit">コース選択</button>
+                    <input type="hidden"
+                           th:field="*{courseId}">
+
+                    <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>
-				<button type="submit">作成</button>
+                </form>
+
            </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">
-			<button type="submit">戻る</button>
-		</form>
+        </div>
+
+    </div>

-	</main>
 </body>
+
 </html>
--- a/src/main/resources/templates/user_register_confirm.html
+++ b/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>
-		<h1>新規会員登録確認</h1>
+	<div class="main-container">
+		<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>
-				<label for="userName">氏名</label>
-				<input type="text" id="userName" th:field="*{userName}" maxlength="100" readonly>
+			<div class="mb-3">
+				<label for="userName" class="form-label">氏名</label>
+				<input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100" readonly>
 			</div>

-			<div>
-				<label for="mailAddress">メールアドレス</label>
-				<input type="email" id="mailAddress" th:field="*{mailAddress}" maxlength="255" readonly>
+			<div class="mb-3">
+				<label for="mailAddress" class="form-label">メールアドレス</label>
+				<input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}" maxlength="255" readonly>
 			</div>

-			<div>
-				<label for="birthDate">生年月日</label>
-				<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}" required readonly>
+			<div class="mb-3">
+				<label for="birthDate" class="form-label">生年月日</label>
+				<input type="date" id="birthDate" class="form-control" name="birthDate" th:value="*{birthDate}" required readonly>
 			</div>

-			<div>
-				<label for="password">パスワード</label>
-				<input type="password" id="password" name="password" th:value="*{password}" minlength="8"
+			<div class="mb-3">
+				<label for="password" class="form-label">パスワード</label>
+				<input type="password" id="password" class="form-control" name="password" th:value="*{password}" minlength="8"
 					maxlength="255" required readonly>
 			</div>

-			<div>
-				<label for="secretQuestionId">秘密の質問</label>
+			<div class="mb-3">
+				<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>
-				<label for="secretAnswer">秘密の質問の回答</label>
-				<input type="text" id="secretAnswer" th:field="*{secretAnswer}" maxlength="100" readonly>
+			<div class="mb-3">
+				<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
+				<input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}" maxlength="100" readonly>
 			</div>

-			<div>
-				<label for="saving">貯蓄金</label>
-				<input type="number" id="saving" th:field="*{saving}" min="0" readonly>
+			<div class="mb-3">
+				<label for="saving" class="form-label">貯蓄金</label>
+				<input type="number" id="saving" class="form-control" th:field="*{saving}" min="0" readonly>
 			</div>

-			<div>
-				<label for="annualIncome">年収</label>
-				<input type="number" id="annualIncome" th:field="*{annualIncome}" min="0" readonly>
+			<div class="mb-3">
+				<label for="annualIncome" class="form-label">年収</label>
+				<input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0" readonly>
 			</div>

-			<div>
-				<label for="monthlyBudget">月別使用可能金額</label>
-				<input type="number" id="monthlyBudget" th:field="*{monthlyBudget}" min="0" readonly>
+			<div class="mb-3">
+			    <label for="monthlyBudget" class="form-label">月別使用可能金額</label>
+				<input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0" readonly>
 			</div>

-			<div>
-				<label for="goalId">目標</label>
-				<input type="number" id="goalId" th:field="*{goalId}" min="0" readonly>
+			<div class="mb-3">
+				<label for="goalId" class="form-label">目標</label>
+				<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0" readonly>
 			</div>

-			<div>
-				<label>コース</label>
-				<input type="hidden" th:field="*{courseId}">
+			<div class="mb-4">
+				<label class="form-label">コース</label>
+				<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>
-				<button type="submit">作成</button>
+			<div class="d-grid">
+				<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>

--- a/src/main/resources/templates/user_register_return.html
+++ b/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>
-		<h1>新規会員登録</h1>
+	<div class="main-container">
+		
+		<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>
-				<label for="userName">氏名</label>
+			     <div class="mb-3">
+				    <label for="userName" class="form-label">氏名</label>
 				    <input type="text"
 				    id="userName"
+					class="form-control"
 				    th:field="*{userName}"
 				    maxlength="100"
 				    required>
 			     </div>
 			
-			<div>
-				<label for="mailAddress">メールアドレス</label>
+			     <div class="mb-3">
+				   <label for="mailAddress" class="form-label">メールアドレス</label>
 				   <input type="email"
 				   id="mailAddress"
+				   class="form-control"
 				   th:field="*{mailAddress}"
 				   maxlength="255"
 				   required>
 			     </div>
 			
-			<div>
-				<label for="birthDate">生年月日</label>
-				<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}"
+			<div class="mb-3">
+				<label for="birthDate" class="form-label">生年月日</label>
+				<input type="date" id="birthDate" name="birthDate" class="form-control" th:value="*{birthDate}"
 				required>
 			</div>
 			
-			<div>
-				<label for="password">パスワード</label>
+			<div class="mb-3">
+				<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>
-				<label for="secretQuestionId">秘密の質問</label>
+			<div class="mb-3">
+				<label for="secretQuestionId" class="form-label">秘密の質問</label>
 				<select id="secretQuestionId"
 				        th:field="*{secretQuestionId}"
 				        required>
@@ -62,67 +71,83 @@
 				</select>
 			</div>
 			
-			<div>
-				<label for="secretAnswer">秘密の質問の回答</label>
+			<div class="mb-3">
+				<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
 				<input type="text"
 				id="secretAnswer"
+				class="form-control"
 				th:field="*{secretAnswer}"
 				maxlength="100"
 				required>
 			</div>
 			
-			<div>
-				<label for="saving">貯蓄金</label>
+			<div class="mb-3">
+				<label for="saving" class="form-label">貯蓄金</label>
 				<input type="number"
 				id="saving"
+				class="form-control"
 				th:field="*{saving}"
 				min="0"
 				required>
 			</div>
 			
-			<div>
-				<label for="annualIncome">年収</label>
+			<div class="mb-3">
+				<label for="annualIncome" class="form-label">年収</label>
 				<input type="number"
 				id="annualIncome"
+				class="form-control"
 				th:field="*{annualIncome}"
 				 min="0"
 				 required>
 			 </div>
 			 
-			 <div>
-				<label for="monthlyBudget">月別使用可能金額</label>
+			 <div class="mb-3">
+				<label for="monthlyBudget" class="form-label">月別使用可能金額</label>
 				<input type="number"
 				id="monthlyBudget"
+				class="form-control"
 				th:field="*{monthlyBudget}"
 				min="0"
 				required>
 			 </div>
 			 
-			 <div>
-				<label for="goalId">目標</label>
+			 <div class="mb-3">
+				<label for="goalId" class="form-label">目標</label>
 				<input type="number"
 				id="goalId"
+				class="form-control"
 				th:field="*{goalId}"
 				min="0"
 				required>
 			</div>
 			
-			<div>
-				<label>コース</label>
+			<div class="mb-4">
+				<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>
-				<button type="submit">作成</button>
+			<div class="d-grid">
+				<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>
Author	SHA1	Message	Date
s-choi	573b7969b7	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	2026-09-25 12:51:53 +09:00
kkazuya	1e0cc3a953	[EDIT] 金額入力等の入力制限を追加しました。	2026-09-24 15:57:46 +09:00
kkazuya	67906caf90	[FIX] 取引登録の日付の初期値が表示されない不具合を修正しました	2026-09-24 15:40:09 +09:00
kkazuya	0f057bcd36	[EDIT] バランスコースのIDを名前から検索するよう修正しました	2026-09-24 15:25:21 +09:00
n-kawahito	d0e14ce2dc	[ADD]全画面共通cssファイルを作成しました	2026-09-24 15:18:56 +09:00
n-kawahito	ab2bb89d24	[EDIT]スマホ画面のデザインに統一しました	2026-09-24 15:18:15 +09:00