プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

SpringBoot入門 vol.13:Bootstrapでスタイルを整えよう

前回までに作成したアプリケーションに「Bootstarp」を使ってスタイルを整えていく
 
今回は「WebJars」を利用してBootstrapを使えるようにする
 
 

■Webjarsとは

「CSS」や「JavaScript」などのクライアントサイドのライブラリの依存関係をGradleで管理できるサービス
 
 


①Build.Gradleの編集

「Webjars」を利用して「Bootstrap」を使う為の設定を追記する
 
記述ブロック:dependencies
 
追記コード:

implementation 'org.webjars:bootstrap:4.3.1'
implementation 'org.webjars:jquery:3.4.1'

 
記述後:

plugins {
    id 'org.springframework.boot' version '2.2.2.RELEASE'
    id 'io.spring.dependency-management' version '1.0.8.RELEASE'
    id 'java'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
    developmentOnly
    runtimeClasspath {
        extendsFrom developmentOnly
    }
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    //追記
    implementation 'org.webjars:bootstrap:4.3.1'
    implementation 'org.webjars:jquery:3.4.1'

            .
            .
            .

 
 


②顧客一覧画面(list.html)のスタイル整形

追記コード(Bootstrap):

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>

 
list.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!-- Bootstrapの設定 -->
<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
<title>顧客一覧</title>
</head>
<body>
    <div class="container">
        <!-- マージンを上下に設定 -->
        <div class="my-5">
        <!-- 青色ボタンを設定 -->
        <a class="btn btn-primary" th:href="@{/create}">顧客登録</a>
        </div>
        <hr>
        <h1 class="my-2">顧客一覧</h1>
        <table class="table table-borderd table-striped">
            <tr>
                <th>ID</th>
                <th>名前</th>
                <th>メールアドレス</th>
            </tr>
            <tr th:each="customer : ${customers}">
                <td th:text="${customer.id}"></td>
                <td th:text="${customer.name}"></td>
                <td th:text="${customer.email}"></td>
            </tr>
        </table>
    </div>
    <!-- Bootstrapの設定 -->
    <script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
    <!-- Bootstrapの設定 -->
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
</body>
</html>

 
スタイル整形後の画面:

 
 


③顧客登録画面(create.html)のスタイル整形

②と同様にBootstrapで整形する
 
create.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
<title>顧客登録</title>
</head>
<body>
    <div class="container">
        <h1 class="my-5">顧客登録</h1>
        <form th:action="@{/create}" th:object="${customerForm}" method="post">
            <!-- マウスホバー テーブル幅を画面の50%に設定  -->
            <table class="table table-bordered table-hover col-6">
                <!-- フォームの部品はform-groupで囲う -->
                <tr class="form-group">
                    <!-- テキストを縦中央揃え -->
                    <th class="align-middle">名前</th>
                    <!-- テキストボックスにform-controlで整形 text-dangerでエラー文字を赤色に設定 -->
                    <td><input type="text" class="form-control" name="name" th:field="*{name}"><span class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span></td>
                </tr>
                <tr class="form-group">
                    <th class="align-middle">メールアドレス</th>
                    <td><input type="text" class="form-control" name="email" th:field="*{email}"><span class="text-danger" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span></td>
                </tr>
            </table>
            <input type="submit" class="btn btn-primary mt-3" value="登録">
        </form>
    </div>
    <script src="webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

 
スタイル整形後の画面:

 
 
Bootstrapの詳細は公式リファレンスで確認
 
Bootstrap公式リファレンス
 
 


④バリデーションチェックエラー時のみクラスを追加

顧客登録画面(create.html)

            .
            .
            .
<body>
    <div class="container">
        <h1 class="my-5">顧客登録</h1>
        <form th:action="@{/create}" th:object="${customerForm}" method="post">
            <table class="table table-bordered table-hover col-6">
                <tr class="form-group">
                    <th class="align-middle">名前</th>
                    <!-- ポイント1 -->
                    <td><input type="text" class="form-control" name="name" th:field="*{name}" th:classappend="${#fields.hasErrors('name')} ? 'is-invalid'"><span class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span></td>
                </tr>
            .
            .
            .

 

【ポイント】

1.th:classappend="${#fields.hasErrors(‘フィールド名’)} ? ‘クラス名’"
対象フィールドがエラーの場合に指定したクラスを付与する
 
is-invalidクラスはテキストボックスを赤色にするBootstrapのクラス
※has-errorクラスはBootstrap4では廃止されているので注意すること
 

【エラーメッセージを確認】

顧客登録画面で下記内容を入力して登録ボタンを押下
・名前:空欄
・メールアドレス:101文字以上
 

 
 


⑤自作のCSSファイル(styles.css)を作成する場合

格納先:src/main/resources/static/css
※static/cssフォルダが無い場合は作成すること
 

顧客一覧画面(list.html)と顧客登録画面(create.html)にCSSファイルのリンクを記述

<!-- ポイント1 -->
<link rel="stylesheet" th:href="@{/css/styles.css}" href="../static/css/styles.css">

 

【ポイント】

1.ブラウザ用とEclipse用の2種類のリンクを記述
・ブラウザ用:アプリケーションを起動してThymeleafで確認する場合
th:href="@{/css/styles.css}"

 
・Eclipse用:EclipseのWebブラウザ用
href="../static/css/styles.css"
※開発用なので特にEclipseのWebブラウザで確認しない場合は記述不要
 
 


前へ次へ
 
目次へ戻る