【Bootstrap】一覧表示をデザインしよう！

2021年3月7日2023年9月24日

当ページのリンクには広告が含まれています。

概要

一覧表示をデザインします。
Bootstrapにはすぐに使える便利なクラスが用意されているので、それらを使用して実現します。

【SpringBootチュートリアル】#7~ 検索画面の作成に変更を加える形で行います。

パターン

代表的なデザインのパターンを紹介します。

- Examples

シンプルな表形式のデザインです。

- Striped rows

行毎に色が変わるストライプ仕様のデザインです。

- Hoverable rows

カーソルが乗った行の色が変わる、ホバー仕様のデザインです。

実装

画面イメージ

ソースコード

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="header::head(~{::title})">
  <title>書籍情報一覧</title>
</head>
<body>
  <header th:replace="header::header"></header>
  <div th:replace="book/search"></div>

  <div class="container">
    <div th:text="${deleteError}"></div>
    <div th:if="${books}">
      <div th:if="${books.size() == 0}">検索結果は0件です。</div>
      <div th:if="${books.size() > 0}">
        <table class="table table-striped">
          <thead class="thead-dark">
            <tr><th>書籍名</th><th>ISBN</th><th>出版社</th><th>価格</th><th>出版年月日</th><th colspan="2"></th></tr>
          </thead>
          <tbody>
            <tr th:each="book : ${books}">
              <td th:text="${book.name}"></td><td th:text="${book.isbnFormat()}"></td><td th:text="${book.publisher}"></td>
              <td th:text="${book.priceCommaOf1000()} + '円'" align="right"></td><td th:text="${book.publicationDateOfYyyymmdd()}"></td>
              <td><a class="btn btn-outline-primary btn-sm" th:href="@{/book/edit/} + ${book.id}">編集</a></td>
              <td>
                <form th:action="@{/book/delete}" method="post">
                  <button class="delete-action btn btn-outline-danger btn-sm" type="submit">削除</button>
                  <input type="hidden" th:value="${book.id}" name="id">
                  <input type="hidden" th:value="${book.version}" name="version">
                </form>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<title>書籍情報一覧</title>

</head>

<body>

<div th:if="${books.size() == 0}">検索結果は0件です。</div>

<tr><th>書籍名</th><th>ISBN</th><th>出版社</th><th>価格</th><th>出版年月日</th><th colspan="2"></th></tr>

</thead>

<tbody>

<td>

</form>

</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

解説

- 検索結果を表示する領域

<div class=”container”>で囲い、コンテンツに適切な余白を与え整列させるようにします。

- テーブル全体

tableを追加し、通常のデザインを適用します。
加えて、table-stripedで行毎にストライプになるようにします。

- テーブルヘッダー

thead-dark：ダーク系のデザイン
※ライト系のデザインも可能です
Table head options

- 編集ボタン

btn-outline-primary：ホバーで色が変わる青いボタン
btn-sm：ボタンサイズを小さくする

- 削除ボタン

btn-outline-danger：ホバーで色が変わる赤いボタン

まとめ

表はtableクラスを指定する。
Bootstrapには表のデザインが複数用意されている。
ヘッダーをデザインするオプションが用意されている。

この記事を書いた人

ログログ

リーマンショックの影響で26歳の時にIT業界から離れ、紆余曲折を経て34歳でエンジニアに復帰しました。
復帰前は開発未経験でしたが、独学した知識と面接時のコミュニケーション力で見事開発エンジニアとして復帰しました！
今はフリーランスエンジニアとして仕事をしています。

■保有資格
・Java Gold SE 11