Spring Boot CSS

テーブルレイアウトを追加しCSSでデザインしたHTMLをSpring Bootで表示してみた

業務で利用するアプリケーションでよく使うHTML上のテーブルレイアウトも、CSSを利用することで、画面レイアウトを整えることができる。

今回は、Spring BootのWeb画面上で、テーブルレイアウトを追加しCSSでデザインして表示するサンプルプログラムを作成してみたので、共有する。

前提条件

下記記事の実装が完了していること。

ヘッダー・メニュー・本文・フッターをCSSでデザインしたHTMLをSpring Bootで表示してみた業務で利用するアプリケーションで、ヘッダー・メニュー・本文・フッターを1つの画面に表示することが多々あるが、その際、CSSを利用すること...

サンプルプログラムの作成

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、上記の赤枠は、今回変更したプログラムである。

HTMLファイルの内容は以下の通りで、本文にテーブルを追加をしている。



CSSファイルで追加した内容は以下の通りで、追加したテーブルの画面デザインの設定をしている。

また、追加したテーブルを表示することで必要な画面幅が大きくなるため、以下の箇所にmin-widthプロパティを追加している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-css-add-table/demo



「AOMEI Partition Assistant Standard(無料)版」は便利なパーティション管理ツールだったハードディスクの記憶領域を論理的に分割し、分割された個々の領域のことを、パーティションといいます。 例えば、以下の図の場合、C/D...

サンプルプログラムの実行結果

Spring Bootアプリケーションを起動し、Edge(バージョン:94.0.992.38)で「http:// (ホスト名):(ポート番号)」とアクセスした結果は、以下の通り。いずれの画面幅の場合も、ブラウザの本文に、CSSでデザインしたテーブルが表示されることが確認できる。

1) 一般的なサイズ(下図では幅:1061px)の場合の実行結果は、以下の通り。
サンプルプログラムの実行結果_1

2) 最大サイズ(下図では幅:1920px)の場合の実行結果は、以下の通り。
サンプルプログラムの実行結果_2

3) 最小サイズ(下図では幅:500px)の場合の実行結果は、以下の通り。
サンプルプログラムの実行結果_3_1

サンプルプログラムの実行結果_3_2

要点まとめ

  • HTML上のテーブルレイアウトも、CSSを利用することで、画面レイアウトを整えることができる。