teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

5

追記

2020/04/22 13:38

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -102,4 +102,9 @@
102
102
  Java側のコードをファイル上書き保存時に自動ビルドさせたいならdevtoolsが必要。
103
103
 
104
104
  もちろん、そこでボケっとしてても画面に勝手に変化が起きることはないので、
105
- ブラウザ更新なりなんなりする必要はある(これはWebアプリケーションでは当然の手続き)
105
+ ブラウザ更新なりなんなりする必要はある(これはWebアプリケーションでは当然の手続き)
106
+
107
+ 下記のような記事は読んでおいた方が良いです。
108
+ [お前は絶望的にプログラミングに向いてないから諦めて刺身にタンポポ乗せる仕事でもやってろ](https://megalodon.jp/2019-0105-0145-49/note.mu/kotofurumiya/n/n31d401fce782)
109
+ タイトルだけ読むと「諦めろ」と見下してるように見えますが、そういう意図で書かれた記事ではないです。
110
+ 初心者程、ためになる内容であるはず。雑にコードで遊んでいるよりずっと勉強になりますし、プログラミングをやっていく大変さとか、方向性とか諸々見えてくるはず。

4

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

2020/04/22 13:38

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -11,7 +11,6 @@
11
11
  ブラウザに出力されているのはあくまでHTML、CSSですからね。
12
12
  最もユーザーから近い方から疑うのが基本です。
13
13
 
14
-
15
14
  > Eclipse内のファイルを選択し、「次で開く」→「webブラウザー」を指定すればEclipse内で開けますが、CSSが適用されず、ブラウザで開いた状態とは違う形となってしまいます。
16
15
 
17
16
  何の「ファイル」を選択したのか提示されてないので質問者と全く同じ状況をどう再現できるのか分からす、単なる個人的な推測でしかないので外れたら大変申し訳ないのですが、「/プロジェクト/src/main/resources/templates内に作ったSignUp.html」のことなのであれば、当然の結果です。
@@ -78,7 +77,7 @@
78
77
  <head>
79
78
  <meta charset="UTF-8">
80
79
  <title>Insert title here</title>
81
- <link th:href="@{/css/test.css?v}" rel="stylesheet">
80
+ <link th:href="@{/css/test.css}" rel="stylesheet">
82
81
  </head>
83
82
  <body>
84
83
  <h1>s</h1>

3

修正

2020/04/22 13:05

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -29,4 +29,78 @@
29
29
 
30
30
  蛇足:
31
31
  CSSフレームワーク(およびライブラリなど、自身でほぼ変更が発生しないコード)の前に自身が組んだCSSを入れるのは悪手です。
32
- CSSは基本は後勝ち。これもWebの基本です。
32
+ CSSは基本は後勝ち。これもWebの基本です。
33
+
34
+ # 追記②へ
35
+ > 、毎回、Eclipseより、実行を停止し再度緑の実行ボタンを押さなくともファイルを保存するだけのように簡易な方法で、ブラウザから「http://localhost:8080/signUp」とアクセスした際に
36
+
37
+ 静的HTMLのときってどうしてました?毎回ブラウザ閉じてまた開きなおしてました?
38
+ PHPのときにPHP以外、外部CSS更新したときにどうしてました?
39
+ また、「ブラウザ キャッシュ 削除」で調べた中に「スーパーリロード」ってありませんでした?
40
+ 何も書いてないということはそもそもブラウザ更新すら試してないということでよろしいでしょうか。。。
41
+
42
+ フロント側を確認したいなら下記を上から1つずつ試すのが定石です。
43
+ 0. 画面更新(ブラウザの更新マークでもいいしキーボード(WindowsならF5)でもいいし)
44
+ 0. スーパーリロード
45
+ 0. クエリストリングによる自動キャッシュ無効
46
+ 0. 各構文の確認
47
+
48
+ こういうときはCSSフレームワークのような仕組みを入れずに、
49
+ どう見ても変化が分かる背景色とか文字色程度で確認すべきです。
50
+ 「最小構成のコード」を作った上で。
51
+
52
+ 問題切り分けには余計なコードは一切不要です。
53
+ 凝ったデザインとか要りません。
54
+
55
+ ちなみに私は下記のようなコードで動作確認しましたが、1つ目「画面更新」で事足りました。
56
+ 自身のローカルであればこれで事足りるケースがほとんどなのでは。
57
+
58
+ Sf.java@Controller
59
+ ```java
60
+ package xxxxx;//パッケージ名は動作に影響ないので省略
61
+
62
+ import org.springframework.stereotype.Controller;
63
+ import org.springframework.web.bind.annotation.GetMapping;
64
+
65
+ @Controller
66
+ public class Sf {
67
+ @GetMapping("s")
68
+ private String s() {
69
+
70
+ return "NewFile";
71
+ }
72
+ }
73
+ ```
74
+ /プロジェクト/src/main/resources/templates/NewFile.html@Thymeleaf
75
+ ```html
76
+ <!DOCTYPE html>
77
+ <html xmlns:th="http://www.thymeleaf.org">
78
+ <head>
79
+ <meta charset="UTF-8">
80
+ <title>Insert title here</title>
81
+ <link th:href="@{/css/test.css?v}" rel="stylesheet">
82
+ </head>
83
+ <body>
84
+ <h1>s</h1>
85
+ </body>
86
+ </html>
87
+ ```
88
+ /プロジェクト/src/main/resources/static/css/test.css
89
+ ```css
90
+ @charset "UTF-8";
91
+ h1{
92
+ color:yellow;
93
+ }
94
+ ```
95
+
96
+ やったことは「実行」→「Springアプリケーション」でサーバー起動した後、
97
+ ブラウザのアドレスバーに`http://localhost:8080/s`を打ってにアクセスし、
98
+ 文字が黄色になっていることを確認し、cssを`color:red;`に変更しファイルを上書き、
99
+ ブラウザの更新マークをクリック のみ。
100
+
101
+ Java側のコードが変更されるわけではないので、再ビルド(をしてサーバー再起動)する必要はありません。静的コンテンツ(だから「static」フォルダに入っている)なので。
102
+
103
+ Java側のコードをファイル上書き保存時に自動ビルドさせたいならdevtoolsが必要。
104
+
105
+ もちろん、そこでボケっとしてても画面に勝手に変化が起きることはないので、
106
+ ブラウザ更新なりなんなりする必要はある(これはWebアプリケーションでは当然の手続き)

2

修正

2020/04/22 13:02

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -25,4 +25,8 @@
25
25
  これはサーバーの処理を介してないということになります。ローカルのファイルを直接開いているので当然ですね。
26
26
 
27
27
  Springやフレームワーク以前に「Webの仕組み」をきちんとおさえる必要があります。それこそ「httpとは何か」「サーバーとは何か」というところから。
28
- それを全く知らずにWebアプリケーションは作れませんよ。特にサーバーサイドの仕組みが関係するものは。
28
+ それを全く知らずにWebアプリケーションは作れませんよ。特にサーバーサイドの仕組みが関係するものは。
29
+
30
+ 蛇足:
31
+ CSSフレームワーク(およびライブラリなど、自身でほぼ変更が発生しないコード)の前に自身が組んだCSSを入れるのは悪手です。
32
+ CSSは基本は後勝ち。これもWebの基本です。

1

修正

2020/04/22 11:30

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -2,7 +2,7 @@
2
2
  静的HTMLでもあるし、Webアプリケーションには絶対ついてまわるので、
3
3
  それなりにやっていればどこかしらで出くわしていたはずの問題です。
4
4
  「○○は別」とするほうが難しい。
5
- [ご自身でもその手の情報を見たり自身で質問して回答を得たりその可能性に気づいて「試したこと」に記載しているような質問](https://teratail.com/questions/223673)があったりしませんか?
5
+ ご自身でもその手の情報を見たり自身で質問して回答を得たり[その可能性に気づいて「試したこと」に記載しているような質問](https://teratail.com/questions/223673)があったりしませんか?
6
6
 
7
7
  ので、「ブラウザ キャッシュ 削除」とかで調べてください。
8
8
  「自動で削除したい」ならそれもキーワードに入れて調べてください。