質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1794閲覧

HTMLが上手く表示されない

Rivermouth

総合スコア17

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/16 09:07

編集2020/07/17 00:18

「Spring解体新書」というテキストを参考にし、簡単なログインページを作成しております。

イメージ説明

上記のようなページにしたいのですが、私のは以下のようになってしまいます。

イメージ説明

正しいソースコードと見比べましたが、差異は無いと思います。

SignupControllerクラス

Java

1package com.example.demo.login.controller; 2 3import java.util.LinkedHashMap; 4import java.util.Map; 5 6import org.springframework.stereotype.Controller; 7import org.springframework.ui.Model; 8import org.springframework.web.bind.annotation.GetMapping; 9import org.springframework.web.bind.annotation.PostMapping; 10 11@Controller 12public class SignupController { 13 14 //ラジオボタン用変数 15 private Map<String, String> radioMarriage; 16 17 /** 18 * ラジオボタンの初期化メソッド. 19 */ 20 private Map<String, String> initRadioMarriage() { 21 22 Map<String, String> radio = new LinkedHashMap<>(); 23 24 // 既婚、未婚をMapに格納 25 radio.put("既婚", "true"); 26 radio.put("未婚", "false"); 27 28 return radio; 29 } 30 31 /** 32 * ユーザー登録画面のGETメソッド用処理. 33 */ 34 @GetMapping("/signup") 35 public String getSignUp(Model model) { 36 37 // ラジオボタンの初期化メソッド呼び出し 38 radioMarriage = initRadioMarriage(); 39 40 // ラジオボタン用のMapをModelに登録 41 model.addAttribute("radioMarriage", radioMarriage); 42 43 // signup.htmlに画面遷移 44 return "login/signup"; 45 } 46 47 /** 48 * ユーザー登録画面のPOSTメソッド用処理. 49 */ 50 @PostMapping("/signup") 51 public String postSignUp(Model model) { 52 53 // login.htmlにリダイレクト 54 return "redirect:/login"; 55 } 56}

signup.html

Java

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4 <meta charset="UTF-8"></meta> 5 6 <!-- Bootstrapの設定 --> 7 <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"></link> 8 <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script> 9 <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script> 10 11 <title>SignUp</title> 12</head> 13<body> 14 <div class="col-sm-5"> 15 <div class="page-header"> 16 <h1>ユーザー登録画面</h1> 17 </div> 18 <form method="post" th:action="@{/signup}"> 19 <table class="table table-bordered table-hover"> 20 <!-- ユーザーIDの入力エリア --> 21 <tr> 22 <th class="active col-sm-3">ユーザID</th> 23 <td> 24 <div class="form-group"> 25 <input type="text" class="form-control" /> 26 </div> 27 </td> 28 </tr> 29 <!-- パスワードの入力エリア --> 30 <tr> 31 <th class="active">パスワード</th> 32 <td> 33 <div class="form-group"> 34 <input type="text" class="form-control" /> 35 </div> 36 </td> 37 </tr> 38 <!-- ユーザー名の入力エリア --> 39 <tr> 40 <th class="active">ユーザー名</th> 41 <td> 42 <div class="form-group"> 43 <input type="text" class="form-control" /> 44 </div> 45 </td> 46 </tr> 47 <!-- 誕生日の入力エリア --> 48 <tr> 49 <th class="active">誕生日</th> 50 <td> 51 <div class="form-group"> 52 <input type="text" class="form-control" /> 53 </div> 54 </td> 55 </tr> 56 <!-- 年齢の入力エリア --> 57 <tr> 58 <th class="active">年齢</th> 59 <td> 60 <div class="form-group"> 61 <input type="text" class="form-control" placeholder="yyyy/MM/dd" /> 62 </div> 63 </td> 64 </tr> 65 <!-- 結婚ステータスの入力エリア --> 66 <tr> 67 <th class="active">結婚</th> 68 <td> 69 <div class="form-group"> 70 <div th:each="item : ${radioMarriage}"> 71 <input type="radio" name="radioMarrige" 72 th:text="${item.key}" 73 th:value="${item.value}"> 74 </input> 75 </div> 76 </div> 77 </td> 78 </tr> 79 </table> 80 <!-- ユーザー登録ボタン --> 81 <button class="btn btn-primary" type="submit">ユーザー登録</button> 82 </form> 83 </div> 84</body> 85</html>

アドバイスをお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/07/16 09:17

参考にしている教本はBootstrap前提なのでしょうか。 確認すべきは教本よりbootstrapのドキュメントですね。
m.ts10806

2020/07/16 09:32

いずれにしてもタグは「HTML」だけではアドバイスは得られないかと。 5つまでつけられるので関連性の高いタグを適宜つけてください。
Rivermouth

2020/07/17 00:23

テキストのソースコードは以下のようになっており、 <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"></link> <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script> <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script> 私の場合は、以下のようにしています。 <link th:href="@{webjars/bootstrap/4.5.0/css/bootstrap.min.css}" rel="stylesheet"></link> <script th:src="@{webjars/jquery/3.4.1/jquery.min.js}"></script> <script th:src="@{webjars/bootstrap/4.5.0/js/bootstrap.min.js}"></script> 正しいかは分かりませんが、バージョンを最新のものに設定したつもりです。 これが間違っているのでしょうか? ちなみに、テキストのソースコードは問題なく動きます。
Rivermouth

2020/07/17 00:42

ちなみに、pom.xmlを書き換え、テキストと同じように古いバージョンのjqueryとbootstrapで実行したところ、正しくページが表示されました。最新のバージョンで同じように実行することはできないのでしょうか?
guest

回答1

0

ベストアンサー

記載していただいたControllerとHTMLテンプレートでは、次のようになるのが正解です。

イメージ説明

以下を確認してください。

  • 「上記のようなページにしたい」は、bootstrapを一切使っていない結果です。記載されたHTMLを見た限りでは、bootstrapを適用しているようですので、現在のHTMLと実際の書籍が本当に同じ内容なのか確認してください(書籍に誤りがあるかどうかは、私は判断できません)
  • 項目名が違うのと表示幅が全く異なっているので、login/signup.htmlではなく、別のHTMLを書いてはいないでしょうか。

投稿2020/07/17 00:42

A-pZ

総合スコア12011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問