質問編集履歴

2

質問内容を変更しました。

2022/04/15 05:06

投稿

tasuku
tasuku

スコア45

test CHANGED
@@ -1 +1 @@
1
- CSSを使わないで、htmlを横並び
1
+ Spring Tool SuiteでCSS反映されない
test CHANGED
@@ -1,17 +1,41 @@
1
1
  Spring Tool Suite バージョン4 で
2
2
  Bootstrap バージョン3.3.2
3
- メールアドレスと、メールアドレス入力画面、権限と、プルダウン画面を全て横並びにしたいです。
3
+ メールアドレスと、メールアドレス入力画面、権限と、プルダウン画面を全て横並びにしたく、
4
+ src/main/resources/staticのcssファイルにstyle.cssファイルを作成、
5
+ src/main/resources/templates/passwordのresetPassword.htmlファイルに
6
+ <link th:href="@{/css/style.css}" rel="stylesheet" />
7
+ を追記、pom.xmlに
4
- <tr> や<table>を試してみたのですが上手くいきません
8
+ <artifactId>spring-boot-starter-thymeleaf</artifactId>
9
+ が記載されているにもかかわらず、CSSが反映されません
5
- ようにすればよろしいでしょうか?
10
+ なぜなのでしょうか?
6
11
 
7
12
  ```html
8
13
 
14
+ <!DOCTYPE html>
15
+ <html xmlns:th="http://www.thymeleaf.org"
16
+ th:replace="~{common/login-layout :: layout(~{::title},~{::body/content()})}">
17
+ <head>
18
+ <meta charset="UTF-8" />
19
+ <title>パスワードを忘れた方 | LMS</title>
20
+ <link th:href="@{/css/style.css}" rel="stylesheet" >
21
+ </head>
22
+ <body>
23
+
24
+ <h2>パスワード再設定</h2>
25
+ <div class="well bs-component">
26
+
27
+ 企業担当者の方:<br> エントリー時にご登録頂いたメールアドレスをご入力して頂きますと、5分~10分後に
28
+ パスワード再設定についてのメールを送付致します。<br> <br> 育成担当者の方:<br>
29
+ ご本人がパスワードを再設定することはできませんので、お手数ですが東京ITスクール事務局に再発行を依頼するようお願い致します。<br>
30
+ <br> 受講生の方:<br>
31
+ ご本人がパスワードを再設定することはできませんので、お手数ですが講師に再発行を依頼するようお願い致します。<br> <br>
32
+
9
- <!-- メールアドレス送信フォーム
33
+ <!-- メールアドレス送信フォーム
10
34
  送信ボタンを押すとcomplete画面に遷移する-->
11
35
  <form class="form-horizontal" th:method="post" th:action="@{/password/resetPassword/complete}" th:object="${mailAddressForm}">
12
36
  <fieldset>
13
37
 
14
- <div class="form-group">
38
+ <div class="form-group" >
15
39
 
16
40
  <label for="mailAddress" class="col-lg-2 control-label">メールアドレス</label>
17
41
  <div class="col-lg-10">
@@ -19,15 +43,16 @@
19
43
  <span th:errors="*{mailAddress}" class="help-inline error"></span>
20
44
  </div>
21
45
  <!--権限のプルダウン -->
22
- <div class="pull-down" style=text-align:right;>
46
+ <div class="pull-down">
23
47
  <label>権限</label>
24
- <select name="e" th:value="受講生" style=width:150px;>
48
+ <select th:name="e" th:value="受講生" style=width:150px;>
25
- <option value="">受講生</option>
49
+ <option th:value="${STUDENT}">受講生</option>
26
- <option value="1">講師</option>
50
+ <option th:value="${TEACHER}">講師</option>
27
- <option value="2">企業担当者</option>
51
+ <option th:value="${COMPANY_SUBSIDY}">企業担当者</option>
28
- <option value="3">管理者</option>
52
+ <option th:value="${ADMIN}">管理者</option>
29
- <option value="4">育成担当者</option>
53
+ <option th:value="${COMPANY_TRAINING}">育成担当者</option>
30
54
  </select>
55
+
31
56
 
32
57
  </div>
33
58
  </div>
@@ -45,5 +70,15 @@
45
70
  </body>
46
71
  </html>
47
72
  ```
73
+ ```css
74
+ @charset "utf-8";
75
+ .well bs-component{
76
+ display: flex;
77
+ }
48
78
 
49
79
 
80
+ .pull-down{
81
+ style=text-align:right;
82
+ }
83
+ ```
84
+

1

Bootstrap追記いたしました。

2022/04/15 02:16

投稿

tasuku
tasuku

スコア45

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,5 @@
1
1
  Spring Tool Suite バージョン4 で
2
+ Bootstrap バージョン3.3.2
2
3
  メールアドレスと、メールアドレス入力画面、権限と、プルダウン画面を全て横並びにしたいです。
3
4
  <tr> や<table>を試してみたのですが上手くいきません
4
5
  どのようにすればよろしいでしょうか?