【Java初心者の冒険録】無骨なアプリを大改造！Spring Boot×CSSで北欧カフェ風UIを作ろう☕

🟢 はじめに

これまでの連載で、Spring Bootを使ったタスク管理アプリの「CRUD機能（作成・読取・更新・削除）」という基礎（どうのつるぎ）が遂に完成しました！

📝 前回までのCRUD記事はこちら👇

blog.kenichikamoi.com

しかし、今の状態はHTMLの骨組みだけで作られた、少し無骨な画面です。

「丸太と石だけで組まれた、飾り気のないギルドの拠点」といったところでしょうか。

今回はこのシステムにCSSのスタイリングをかけ、温かみのあるミルクティーベージュを基調とした「北欧ナチュラルデザイン（ホッと一息つけるカフェスタイル）」へと改装（リフォーム）していく手順を解説します。

これからJavaアプリを作ってみたい！という方の参考になれば幸いです🙌

🏕️ `Spring Boot`の「衣装部屋」にCSSを配置する

Spring Bootには、「画像やCSSなどのデザイン関連ファイルはここに置く！」という厳格なルール（衣装部屋）が存在します。

VSCodeの左側エクスプローラーで、src > main > resources > static フォルダを開きます。

static の中に新しく css というフォルダを作ります。

その中に style.css というファイルを作成してください。

次に、作成したHTML（tasks.html や edit.html）の <head> タグの中に、「このCSSファイルを着込んでね！」という指示を書きます。

<head>
    <meta charset="UTF-8">
    <title>タスク一覧</title>
    <!-- 👇 ここから追加：Thymeleaf専用のCSSリンク 👇 -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>

☕ 北欧ナチュラルデザインのCSSを書く

作成した style.css に、ベースとなるコードを書き込みます。

今回は、#faf8f4（ミルクティーベージュ）と #8c7b75（くすみブラウン）を使い、カフェにいるような落ち着きを表現します。

@charset "UTF-8";

/* =========================================
   ベース設定（カフェの壁紙と基本の文字）
========================================= */
body {
    background-color: #faf8f4; /* ミルクティーベージュ */
    color: #5a4d4a; /* 少し濃いブラウンで読みやすさ（UX）を確保 */
    margin: 0;
    padding: 40px 20px;
}

/* 画面全体の幅を制限して、中央に寄せる（スマートなレイアウト） */
.container {
    max-width: 800px;
    margin: 0 auto;
}

/* =========================================
   見出しとテーブル（カフェの看板と掲示板）
========================================= */
h1 {
    color: #8c7b75; 
    font-size: 24px;
    text-align: center;
    border-bottom: 2px dashed #8c7b75; /* 点線でナチュラルなステッチ感を演出 */
    padding-bottom: 10px;
    margin-bottom: 30px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff; /* 真っ白にしてメリハリを出す */
    border-radius: 10px; /* 角を丸くして柔らかく */
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* うっすらとした影で立体感を */
}

th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #f0e9e4; 
}

th {
    background-color: #f7ede8; /* ヘッダーはほんのりピンクベージュ */
    color: #8c7b75;
}

💡 HTML側のワンポイント

このCSSを綺麗に効かせるために、

tasks.html や edit.html の中身（<h1> から </table> まで）

を <div class="container"> と</div> で囲んであげましょう。

アプリ全体が画面の中央に寄って、レイアウトが整います。

🕵️‍♂️ 謎のハイフンの正体

ボタンを並べていると、ボタンの横に「宙に浮いた謎のハイフン（-）」が出現することがあります。

なんだこれ？Thymeleafのエラー？

と焦るかもしれませんが、ズバリ、これはハイフンではなく「リンク（<a>タグ）の青い下線」です。

<a th:href="@{/tasks/edit/{id}(id=${task.id})}">
    <button type="button">編集</button>
</a> <!-- 👈 ボタンのあとに改行がある -->

Webブラウザは、この <button> と </a> の間にある「改行（空白）」も1つの文字（見えないスペース）として認識します。

その見えないスペースに下線が引かれた結果、ハイフンのように見えていました。

🟦 幻の線を消し去る

これを消すには、CSSにリンクの下線を無くすコードを1行追加するだけでOKです！

/* リンクの標準機能である「下線」を消し去るコード */
td a {
    margin-right: 8px;
    text-decoration: none; 
}

せっかくアプリ全体が温かい空間になったのに、Web初期の青い線が残っていると現実に引き戻されてしまいますよね。

UXの向上には欠かせない設定です。

✍️ 一流のカリグラファーを召喚する（Webフォント）

最後に、このアプリの見た目を劇的に変えるコードを記述します。

「Google Fonts」を取り入れて、ギルドの無骨な木の看板を、一流のカリグラファー（書体デザイナー）に頼んでオシャレに書き直してもらいます。

今回は、

カフェの黒板にチョークで手書きされたような温かみのあるスタイル

を採用します。

日本語： Kiwi Maru（インク溜まりのある丸っこくて優しいフォント）

英数字： Caveat（おしゃれな手書き風の筆記体フォント）

HTMLの <head> にGoogleから提供されるコード（リンク）を貼り付けます。

<!-- 👇 Google Fontsを召喚するコード 👇 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kiwi+Maru:wght@400;500&display=swap" rel="stylesheet">

そして、style.css の body にフォントを適用します。

body {
    /* 👇 フォントを適用 👇 */
    font-family: 'Caveat', 'Kiwi Maru', sans-serif;
    font-size: 18px; 
}

📖 コラム：フォントの並び順の秘密

font-family に指定する順番には、明確なルールがあります。

左から順に適用されるため、'Caveat'（英語用）, 'Kiwi Maru'（日本語用） の順番に書くのがコツです！

こうすることで、ブラウザが「英語や数字（IDなど）はCaveatでおしゃれに書き、対応していない日本語（漢字・ひらがな）が出てきたらKiwi Maruで書く」という自動振り分けを行ってくれます。

☕ 仕上げのアレンジ

せっかくおしゃれな『Caveat』を導入したので、tasks.html の <h1> に英語のサブタイトルを添えてみましょう。

<h1><span class="en-title">Quest Menu</span><br>現在のクエスト（タスク）一覧</h1>

.en-title {
    font-size: 36px;
    color: #b0a49f; 
    font-weight: normal;
}

🎨 完成！

サーバーを再起動して、ブラウザを確認してみてください。

堅苦しかったゴシック体の文字が、温もりのある手書き風の文字にパッと切り替わり、おしゃれなカフェのマスターが手書きした黒板メニューのようなUIが完成しました☕🌿

次回は、アプリを外部の脅威から守る「鉄壁の結界（Spring Security）」のクエストへと歩みを進めたいと思います。

【Java初心者の冒険録】Spring Bootアプリ開発

Javaの基礎を学んだものの、「どうやって実際のWebアプリを作ればいいの？」と迷っていませんか？

この連載は、「Spring Boot」を使ってオリジナルの「タスク管理アプリ」をゼロから作り上げるまでの道のりを記録した開発手順まとめです。

冒険の最終目標（開発するアプリ）：「会員管理システムを拡張したタスク管理アプリ」

・基本のCRUD（作成・読取・更新・削除）機能

・Spring Securityによるログイン・権限管理

かつての自分と同じように悩むJava初心者にとって、少しでも役立つ記事になれば幸いです。