回答編集履歴

5

追記

2020/04/22 13:38

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -207,3 +207,13 @@
207
207
  もちろん、そこでボケっとしてても画面に勝手に変化が起きることはないので、
208
208
 
209
209
  ブラウザ更新なりなんなりする必要はある(これはWebアプリケーションでは当然の手続き)
210
+
211
+
212
+
213
+ 下記のような記事は読んでおいた方が良いです。
214
+
215
+ [お前は絶望的にプログラミングに向いてないから諦めて刺身にタンポポ乗せる仕事でもやってろ](https://megalodon.jp/2019-0105-0145-49/note.mu/kotofurumiya/n/n31d401fce782)
216
+
217
+ タイトルだけ読むと「諦めろ」と見下してるように見えますが、そういう意図で書かれた記事ではないです。
218
+
219
+ 初心者程、ためになる内容であるはず。雑にコードで遊んでいるよりずっと勉強になりますし、プログラミングをやっていく大変さとか、方向性とか諸々見えてくるはず。

4

修正 3番試したコードを誤って提示しましたがその前にクエリなしで確認できてます。

2020/04/22 13:38

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -24,8 +24,6 @@
24
24
 
25
25
 
26
26
 
27
-
28
-
29
27
  > Eclipse内のファイルを選択し、「次で開く」→「webブラウザー」を指定すればEclipse内で開けますが、CSSが適用されず、ブラウザで開いた状態とは違う形となってしまいます。
30
28
 
31
29
 
@@ -158,7 +156,7 @@
158
156
 
159
157
  <title>Insert title here</title>
160
158
 
161
- <link th:href="@{/css/test.css?v}" rel="stylesheet">
159
+ <link th:href="@{/css/test.css}" rel="stylesheet">
162
160
 
163
161
  </head>
164
162
 

3

修正

2020/04/22 13:05

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -61,3 +61,151 @@
61
61
  CSSフレームワーク(およびライブラリなど、自身でほぼ変更が発生しないコード)の前に自身が組んだCSSを入れるのは悪手です。
62
62
 
63
63
  CSSは基本は後勝ち。これもWebの基本です。
64
+
65
+
66
+
67
+ # 追記②へ
68
+
69
+ > 、毎回、Eclipseより、実行を停止し再度緑の実行ボタンを押さなくともファイルを保存するだけのように簡易な方法で、ブラウザから「http://localhost:8080/signUp」とアクセスした際に
70
+
71
+
72
+
73
+ 静的HTMLのときってどうしてました?毎回ブラウザ閉じてまた開きなおしてました?
74
+
75
+ PHPのときにPHP以外、外部CSS更新したときにどうしてました?
76
+
77
+ また、「ブラウザ キャッシュ 削除」で調べた中に「スーパーリロード」ってありませんでした?
78
+
79
+ 何も書いてないということはそもそもブラウザ更新すら試してないということでよろしいでしょうか。。。
80
+
81
+
82
+
83
+ フロント側を確認したいなら下記を上から1つずつ試すのが定石です。
84
+
85
+ 0. 画面更新(ブラウザの更新マークでもいいしキーボード(WindowsならF5)でもいいし)
86
+
87
+ 0. スーパーリロード
88
+
89
+ 0. クエリストリングによる自動キャッシュ無効
90
+
91
+ 0. 各構文の確認
92
+
93
+
94
+
95
+ こういうときはCSSフレームワークのような仕組みを入れずに、
96
+
97
+ どう見ても変化が分かる背景色とか文字色程度で確認すべきです。
98
+
99
+ 「最小構成のコード」を作った上で。
100
+
101
+
102
+
103
+ 問題切り分けには余計なコードは一切不要です。
104
+
105
+ 凝ったデザインとか要りません。
106
+
107
+
108
+
109
+ ちなみに私は下記のようなコードで動作確認しましたが、1つ目「画面更新」で事足りました。
110
+
111
+ 自身のローカルであればこれで事足りるケースがほとんどなのでは。
112
+
113
+
114
+
115
+ Sf.java@Controller
116
+
117
+ ```java
118
+
119
+ package xxxxx;//パッケージ名は動作に影響ないので省略
120
+
121
+
122
+
123
+ import org.springframework.stereotype.Controller;
124
+
125
+ import org.springframework.web.bind.annotation.GetMapping;
126
+
127
+
128
+
129
+ @Controller
130
+
131
+ public class Sf {
132
+
133
+ @GetMapping("s")
134
+
135
+ private String s() {
136
+
137
+
138
+
139
+ return "NewFile";
140
+
141
+ }
142
+
143
+ }
144
+
145
+ ```
146
+
147
+ /プロジェクト/src/main/resources/templates/NewFile.html@Thymeleaf
148
+
149
+ ```html
150
+
151
+ <!DOCTYPE html>
152
+
153
+ <html xmlns:th="http://www.thymeleaf.org">
154
+
155
+ <head>
156
+
157
+ <meta charset="UTF-8">
158
+
159
+ <title>Insert title here</title>
160
+
161
+ <link th:href="@{/css/test.css?v}" rel="stylesheet">
162
+
163
+ </head>
164
+
165
+ <body>
166
+
167
+ <h1>s</h1>
168
+
169
+ </body>
170
+
171
+ </html>
172
+
173
+ ```
174
+
175
+ /プロジェクト/src/main/resources/static/css/test.css
176
+
177
+ ```css
178
+
179
+ @charset "UTF-8";
180
+
181
+ h1{
182
+
183
+ color:yellow;
184
+
185
+ }
186
+
187
+ ```
188
+
189
+
190
+
191
+ やったことは「実行」→「Springアプリケーション」でサーバー起動した後、
192
+
193
+ ブラウザのアドレスバーに`http://localhost:8080/s`を打ってにアクセスし、
194
+
195
+ 文字が黄色になっていることを確認し、cssを`color:red;`に変更しファイルを上書き、
196
+
197
+ ブラウザの更新マークをクリック のみ。
198
+
199
+
200
+
201
+ Java側のコードが変更されるわけではないので、再ビルド(をしてサーバー再起動)する必要はありません。静的コンテンツ(だから「static」フォルダに入っている)なので。
202
+
203
+
204
+
205
+ Java側のコードをファイル上書き保存時に自動ビルドさせたいならdevtoolsが必要。
206
+
207
+
208
+
209
+ もちろん、そこでボケっとしてても画面に勝手に変化が起きることはないので、
210
+
211
+ ブラウザ更新なりなんなりする必要はある(これはWebアプリケーションでは当然の手続き)

2

修正

2020/04/22 13:02

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -53,3 +53,11 @@
53
53
  Springやフレームワーク以前に「Webの仕組み」をきちんとおさえる必要があります。それこそ「httpとは何か」「サーバーとは何か」というところから。
54
54
 
55
55
  それを全く知らずにWebアプリケーションは作れませんよ。特にサーバーサイドの仕組みが関係するものは。
56
+
57
+
58
+
59
+ 蛇足:
60
+
61
+ CSSフレームワーク(およびライブラリなど、自身でほぼ変更が発生しないコード)の前に自身が組んだCSSを入れるのは悪手です。
62
+
63
+ CSSは基本は後勝ち。これもWebの基本です。

1

修正

2020/04/22 11:30

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  「○○は別」とするほうが難しい。
8
8
 
9
- [ご自身でもその手の情報を見たり自身で質問して回答を得たりその可能性に気づいて「試したこと」に記載しているような質問](https://teratail.com/questions/223673)があったりしませんか?
9
+ ご自身でもその手の情報を見たり自身で質問して回答を得たり[その可能性に気づいて「試したこと」に記載しているような質問](https://teratail.com/questions/223673)があったりしませんか?
10
10
 
11
11
 
12
12