From d0e14ce2dc654f5087b299b70a89075f811a4489 Mon Sep 17 00:00:00 2001 From: n-kawahito Date: Thu, 24 Sep 2026 15:18:56 +0900 Subject: [PATCH] =?UTF-8?q?[ADD]=E5=85=A8=E7=94=BB=E9=9D=A2=E5=85=B1?= =?UTF-8?q?=E9=80=9Acss=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92?= =?UTF-8?q?=E4=BD=9C=E6=88=90=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/css/style.css | 214 ++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 src/main/resources/static/css/style.css diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css new file mode 100644 index 0000000..399873b --- /dev/null +++ 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; +} \ No newline at end of file