teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問テンプレートファイルに指定したCSSの適用について

編集履歴

質問編集履歴

8

追記

2020/04/23 00:36

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -130,4 +130,20 @@
130
130
 
131
131
  signUp.html内の、```<div class="bg-primary">```ここの部分の「bg-primary」を取り外し、保存し再度、ブラウザ(GoogleChrome)にて、更新→スーパーリロード(command + R)→ 更新マーク長押しから、「キャッシュの削除とハード再読み込み」を行なったのですが、変化はありませんでした。しかし、Eclipseで実行停止し再度実行ボタンより実行しブラウザを更新したら、スタイルが外れていました。
132
132
 
133
+
134
+
133
135
  ※CSSフレームワークはBootStrapを導入しています。
136
+
137
+ 以下は```signUp.css```です
138
+
139
+ ```
140
+
141
+ @charset "UTF-8";
142
+
143
+ .top_element{
144
+
145
+ margin:0 auto;
146
+
147
+ }
148
+
149
+ ```

7

追記

2020/04/23 00:35

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -129,3 +129,5 @@
129
129
  **追記➂**
130
130
 
131
131
  signUp.html内の、```<div class="bg-primary">```ここの部分の「bg-primary」を取り外し、保存し再度、ブラウザ(GoogleChrome)にて、更新→スーパーリロード(command + R)→ 更新マーク長押しから、「キャッシュの削除とハード再読み込み」を行なったのですが、変化はありませんでした。しかし、Eclipseで実行停止し再度実行ボタンより実行しブラウザを更新したら、スタイルが外れていました。
132
+
133
+ ※CSSフレームワークはBootStrapを導入しています。

6

本文修正

2020/04/23 00:34

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  ```
48
48
 
49
- 以下は、テンプレートファイル「SignUp.html」です。
49
+ 以下は、テンプレートファイル「signUp.html」です。
50
50
 
51
51
  ```
52
52
 

5

追記

2020/04/23 00:30

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -123,3 +123,9 @@
123
123
  **追記②**
124
124
 
125
125
  Eclipse内で、開いた際に、CSSが適用されていない理由は分かりましたが、最終的に、解決したい問題としましては、毎回、Eclipseより、実行を停止し再度緑の実行ボタンを押さなくともファイルを保存するだけのように簡易な方法で、ブラウザから「http://localhost:8080/signUp」とアクセスした際に、CSSが適用され表示出来ている状態に持っていきたいと考えています。
126
+
127
+
128
+
129
+ **追記➂**
130
+
131
+ signUp.html内の、```<div class="bg-primary">```ここの部分の「bg-primary」を取り外し、保存し再度、ブラウザ(GoogleChrome)にて、更新→スーパーリロード(command + R)→ 更新マーク長押しから、「キャッシュの削除とハード再読み込み」を行なったのですが、変化はありませんでした。しかし、Eclipseで実行停止し再度実行ボタンより実行しブラウザを更新したら、スタイルが外れていました。

4

追記

2020/04/23 00:29

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Eclipseより、赤の実行停止ボタンを押し、再度緑の実行ボタンを押さなければCSSが適用されて、表示されません。
4
4
 
5
- アクセスはブラウザに「http://localhost:8080/SignUp」と打ち込み行いました。
5
+ アクセスはブラウザに「http://localhost:8080/signUp」と打ち込み行いました。
6
6
 
7
7
  こちら、毎回この手順を踏まずに、簡単にデザインの適用を確認する方法はあるでしょうか？
8
8
 
@@ -119,3 +119,7 @@
119
119
  </html>
120
120
 
121
121
  ```
122
+
123
+ **追記②**
124
+
125
+ Eclipse内で、開いた際に、CSSが適用されていない理由は分かりましたが、最終的に、解決したい問題としましては、毎回、Eclipseより、実行を停止し再度緑の実行ボタンを押さなくともファイルを保存するだけのように簡易な方法で、ブラウザから「http://localhost:8080/signUp」とアクセスした際に、CSSが適用され表示出来ている状態に持っていきたいと考えています。

3

コード追記

2020/04/22 11:59

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Eclipseより、赤の実行停止ボタンを押し、再度緑の実行ボタンを押さなければCSSが適用されて、表示されません。
4
4
 
5
- アクセスはブラウザに「http://localhost:8080/」と打ち込み行いました。
5
+ アクセスはブラウザに「http://localhost:8080/SignUp」と打ち込み行いました。
6
6
 
7
7
  こちら、毎回この手順を踏まずに、簡単にデザインの適用を確認する方法はあるでしょうか？
8
8
 
@@ -27,3 +27,95 @@
27
27
  HTMLファイルは、「src/main/resources/templates」内に、CSSファイルは、「src/main/resources/static/css」内に作成しました。
28
28
 
29
29
  プロジェクトの作成は、「Springスタータープロジェクト」より行いました。
30
+
31
+ 以下は、「http://localhost:8080/signUp」と打ち込まれた際に呼び出されるコントローラークラス内のメソッドです。
32
+
33
+ ```
34
+
35
+ @GetMapping("/signUp")
36
+
37
+ public String input(Model model){
38
+
39
+
40
+
41
+ return "signUp";
42
+
43
+
44
+
45
+ }
46
+
47
+ ```
48
+
49
+ 以下は、テンプレートファイル「SignUp.html」です。
50
+
51
+ ```
52
+
53
+ <!DOCTYPE html>
54
+
55
+ <html xmlns:th="http://www.thymeleaf.org">
56
+
57
+ <head>
58
+
59
+ <title>Spring Boot de Bootstrap</title>
60
+
61
+ <meta charset="UTF-8" />
62
+
63
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
64
+
65
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
66
+
67
+ <link rel="stylesheet" media="all" th:href="@{/css/signUp.css}"/>
68
+
69
+ <link rel="stylesheet" media="all" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
70
+
71
+ </head>
72
+
73
+ <body>
74
+
75
+ <div class="container">
76
+
77
+ <div class="row">
78
+
79
+ <div class="col-md-5 col-sm-8 top_element">
80
+
81
+ <div class="bg-primary">
82
+
83
+ <p class="text-white text-center">SIGN UP</p>
84
+
85
+ </div>
86
+
87
+ <div class="form_content">
88
+
89
+ <form>
90
+
91
+ <input type="text" name="name" placeholder="Name">
92
+
93
+ <input type="text" name="email" placeholder="Email">
94
+
95
+ <input type="text" name="password" placeholder="Password">
96
+
97
+ <input type="text" name="confirm_password" placeholder="ConfirmPassword">
98
+
99
+ </form>
100
+
101
+ </div>
102
+
103
+
104
+
105
+ </div>
106
+
107
+
108
+
109
+ </div>
110
+
111
+ </div>
112
+
113
+ <script type="text/javascript" th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
114
+
115
+ <script type="text/javascript" th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
116
+
117
+ </body>
118
+
119
+ </html>
120
+
121
+ ```

2

本文修正

2020/04/22 10:37

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,6 @@
24
24
 
25
25
  **追記**
26
26
 
27
- HTMLファイルは、「src/main/resources/tenplates」内に、CSSファイルは、「src/main/resources/static/css」内に作成しました。
27
+ HTMLファイルは、「src/main/resources/templates」内に、CSSファイルは、「src/main/resources/static/css」内に作成しました。
28
28
 
29
29
  プロジェクトの作成は、「Springスタータープロジェクト」より行いました。

1

追記

2020/04/22 10:33

投稿

aae_11
aae_11

スコア178

test CHANGED
File without changes
test CHANGED
@@ -17,3 +17,13 @@
17
17
  Eclipseのバージョン: Version: 2019-12 (4.14.0)
18
18
 
19
19
  OS: MacOSMojave
20
+
21
+ プロジェクトの作成は、「Springスタータープロジェクト」にて、作成しました。
22
+
23
+
24
+
25
+ **追記**
26
+
27
+ HTMLファイルは、「src/main/resources/tenplates」内に、CSSファイルは、「src/main/resources/static/css」内に作成しました。
28
+
29
+ プロジェクトの作成は、「Springスタータープロジェクト」より行いました。