teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Spring5 + ThymeleafでCSS反映させたい

編集履歴

質問編集履歴

3

imageは読み込むことに成功しました！あとは、cssファイルだけです

2019/07/08 22:49

投稿

Saggitarie
Saggitarie

スコア9

test CHANGED
@@ -1 +1 @@
1
- Spring5 + ThymeleafでCSSやIMGを反映させたい
1
+ Spring5 + ThymeleafでCSS反映させたい
test CHANGED
@@ -1,12 +1,12 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- ※すみません、いまだにアクセスが出来ません。
3
+ ※imageフォルダを「webapp/image」に移動したら解決しました。
4
4
 
5
5
 
6
6
 
7
7
  Spring 5 + Spring Security + Thymeleaf + BootstrapでECサイトを作成しています。
8
8
 
9
- ローカルに置いてあるimageファイルやcssファイルを読み込みたいのですが、うまく反映されません。
9
+ ローカルに置いてあるcssファイルを読み込みたいのですが、未だにうまく反映されません。
10
10
 
11
11
 
12
12
 
@@ -18,11 +18,7 @@
18
18
 
19
19
  ```
20
20
 
21
- Failed to load resource: the server responded with a status of 404 ()
21
+ Failed to load resource: the server responded with a status of 404 () style.css
22
-
23
- logo.png:1 Failed to load resource: the server responded with a status of 404 ()
24
-
25
- style.css:1 Failed to load resource: the server responded with a status of 404 ()
26
22
 
27
23
  ```
28
24
 
@@ -36,7 +32,7 @@
36
32
 
37
33
 
38
34
 
39
- 1) Web MVC Config
35
+ 1) Web Security Config
40
36
 
41
37
  ```Spring
42
38
 
@@ -44,11 +40,13 @@
44
40
 
45
41
  public void configure(WebSecurity web) throws Exception {
46
42
 
43
+ // セキュリティ設定を無視するリクエスト設定
44
+
47
- // Enable access to my local static resources
45
+ // 静的リソースに対するアクセスはセキュリティ設定を無視する
48
-
49
-
50
-
46
+
47
+
48
+
51
- web.ignoring().antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**", "/vendor/**", "/fonts/**");
49
+ web.ignoring().antMatchers("/resources/**", "/resource/**", "/css/**", "/js/**", "/images/**", "/vendor/**", "/fonts/**");
52
50
 
53
51
  }
54
52
 
@@ -108,77 +106,101 @@
108
106
 
109
107
 
110
108
 
111
- 2) Web Security Config
109
+ 2) Web MVC Config
112
110
 
113
111
  ```Spring
114
112
 
115
- @Bean
116
-
117
- public SpringTemplateEngine templateEngine() {
118
-
119
- SpringTemplateEngine engine = new SpringTemplateEngine();
120
-
121
- //engine.addDialect(new SpringSecurityDialect());
122
-
123
- engine.setTemplateResolver(templateResolver());
124
-
125
- return engine;
126
-
127
- }
128
-
129
-
130
-
131
- @Bean
132
-
133
- public ThymeleafViewResolver thymeleafViewResolver() {
134
-
135
- ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
136
-
137
- viewResolver.setTemplateEngine(templateEngine());
138
-
139
- viewResolver.setCharacterEncoding("UTF-8");
140
-
141
- viewResolver.setOrder(1);
142
-
143
- return viewResolver;
144
-
145
- }
146
-
147
-
148
-
149
- /**
150
-
151
- * Using Custom Resource Path
152
-
153
- */
154
-
155
- public void addResourceHandlers(ResourceHandlerRegistry registry) {
156
-
157
-
158
-
159
- // Register resource handler for CSS and JS
160
-
161
- if (!registry.hasMappingForPattern("/resources/**")) {
162
-
163
- registry.addResourceHandler("/resources/**").addResourceLocations("/resources/**")
164
-
165
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
166
-
167
- }
168
-
169
-
170
-
171
- // Register resource handler for images
172
-
173
- if (!registry.hasMappingForPattern("/images/**")) {
174
-
175
- registry.addResourceHandler("/images/**").addResourceLocations("/images/**")
176
-
177
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
178
-
179
- }
180
-
181
- }
113
+ @Bean
114
+
115
+ public SpringResourceTemplateResolver templateResolver() {
116
+
117
+ SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
118
+
119
+ //ビューを保存するフォルダ名を指定する
120
+
121
+ templateResolver.setPrefix("WEB-INF/templates/");
122
+
123
+ //ビューの拡張子を指定する
124
+
125
+ templateResolver.setSuffix(".html");
126
+
127
+ //テンプレートモードをHTMLに指定する
128
+
129
+ //templateResolver.setTemplateMode(TemplateMode.HTML);
130
+
131
+ templateResolver.setTemplateMode("HTML5");
132
+
133
+ //テンプレート読み込み時の文字コードを指定する
134
+
135
+ templateResolver.setCharacterEncoding(StandardCharsets.UTF_8.name());
136
+
137
+ return templateResolver;
138
+
139
+ }
140
+
141
+
142
+
143
+ @Bean
144
+
145
+ public SpringTemplateEngine templateEngine() {
146
+
147
+ SpringTemplateEngine engine = new SpringTemplateEngine();
148
+
149
+ //engine.addDialect(new SpringSecurityDialect());
150
+
151
+ engine.setTemplateResolver(templateResolver());
152
+
153
+ return engine;
154
+
155
+ }
156
+
157
+
158
+
159
+ @Bean
160
+
161
+ public ThymeleafViewResolver thymeleafViewResolver() {
162
+
163
+ ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
164
+
165
+ viewResolver.setTemplateEngine(templateEngine());
166
+
167
+ //ビューを書き出す際の文字コードを指定する
168
+
169
+ viewResolver.setCharacterEncoding("UTF-8");
170
+
171
+ viewResolver.setOrder(1);
172
+
173
+ return viewResolver;
174
+
175
+ }
176
+
177
+
178
+
179
+ /**
180
+
181
+ * CSSなどの静的コンテンツを利用するための設定を記述する。
182
+
183
+ */
184
+
185
+ public void addResourceHandlers(ResourceHandlerRegistry registry) {
186
+
187
+
188
+
189
+ // Register resource handler for CSS and JS
190
+
191
+ registry.addResourceHandler("resource/**").addResourceLocations("classpath:/static")
192
+
193
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
194
+
195
+
196
+
197
+ // Register resource handler for images
198
+
199
+ registry.addResourceHandler("/images/**").addResourceLocations("/WEB-INF/images/")
200
+
201
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
202
+
203
+ }
182
204
 
183
205
  ```
184
206
 
@@ -218,7 +240,11 @@
218
240
 
219
241
 
220
242
 
221
- <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
243
+ <!--<link rel="stylesheet" th:src="@{/css/style.css}" type="text/css"/>-->
244
+
245
+
246
+
247
+ <link href="/css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
222
248
 
223
249
  ```
224
250
 
@@ -332,14 +358,18 @@
332
358
 
333
359
  </div>
334
360
 
335
- </div>
336
-
337
- <div class="col-md-2">
338
-
339
- <img th:src="@{/images/logo.png}"/>
340
-
341
361
  </div>
342
362
 
363
+ <div class="col-sm-2">
364
+
365
+ <div class="logo">
366
+
367
+ <img th:src="@{/images/logo.png}"/>
368
+
369
+ </div>
370
+
371
+ </div>
372
+
343
373
  </div>
344
374
 
345
375
  </div>
@@ -372,9 +402,9 @@
372
402
 
373
403
  ### 補足情報（FW/ツールのバージョンなど）
374
404
 
375
- フォルダ構成です。
405
+
376
-
406
+
377
- ![イメージ説明](ed9e2ac66d1d5e8aab3a74440e767617.png)
407
+ ![フォルダ構成](9facbd9ead993c381f250689e9d0151c.png)
378
408
 
379
409
 
380
410
 

2

エラーの内容を変更と使用しているIDEを追記

2019/07/08 22:48

投稿

Saggitarie
Saggitarie

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- ※一日考えましたが、やはりうまくいきません。
3
+ ※すみません、いまだにアクセスが出来ません。
4
4
 
5
5
 
6
6
 
@@ -18,7 +18,11 @@
18
18
 
19
19
  ```
20
20
 
21
- Refused to apply style from 'http://localhost:8080/springwebapp/src/main/resources/statics/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
21
+ Failed to load resource: the server responded with a status of 404 ()
22
+
23
+ logo.png:1 Failed to load resource: the server responded with a status of 404 ()
24
+
25
+ style.css:1 Failed to load resource: the server responded with a status of 404 ()
22
26
 
23
27
  ```
24
28
 
@@ -378,4 +382,8 @@
378
382
 
379
383
 
380
384
 
385
+ 使用しているIDE：IntelliJ
386
+
387
+
388
+
381
389
  ご教授よろしくお願いします。

1

「試したこと」のコラムに私が実際に調べて参考にしようとしたサイトのリストを追記。

2019/07/07 21:07

投稿

Saggitarie
Saggitarie

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,7 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+ ※一日考えましたが、やはりうまくいきません。
4
+
3
5
 
4
6
 
5
7
  Spring 5 + Spring Security + Thymeleaf + BootstrapでECサイトを作成しています。
@@ -30,107 +32,155 @@
30
32
 
31
33
 
32
34
 
33
- ```Java
34
-
35
- @Bean
36
-
37
- public SpringResourceTemplateResolver templateResolver() {
38
-
39
- SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
40
-
41
- //ビューを保存するフォルダ名を指定する
42
-
43
- templateResolver.setPrefix("WEB-INF/templates/");
44
-
45
- //ビューの拡張子を指定する
46
-
47
- templateResolver.setSuffix(".html");
48
-
49
- //テンプレートモードをHTMLに指定する
50
-
51
- //templateResolver.setTemplateMode(TemplateMode.HTML);
52
-
53
- templateResolver.setTemplateMode("HTML5");
54
-
55
- //テンプレート読み込み時の文字コードを指定する
56
-
57
- templateResolver.setCharacterEncoding(StandardCharsets.UTF_8.name());
58
-
59
- return templateResolver;
60
-
61
- }
62
-
63
-
64
-
65
- @Bean
66
-
67
- public SpringTemplateEngine templateEngine() {
68
-
69
- SpringTemplateEngine engine = new SpringTemplateEngine();
70
-
71
- //engine.addDialect(new SpringSecurityDialect());
72
-
73
- engine.setTemplateResolver(templateResolver());
74
-
75
- return engine;
76
-
77
- }
78
-
79
-
80
-
81
- @Bean
82
-
83
- public ThymeleafViewResolver thymeleafViewResolver() {
84
-
85
- ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
86
-
87
- viewResolver.setTemplateEngine(templateEngine());
88
-
89
- //ビューを書き出す際の文字コードを指定する
90
-
91
- viewResolver.setCharacterEncoding("UTF-8");
92
-
93
- viewResolver.setOrder(1);
94
-
95
- return viewResolver;
96
-
97
- }
98
-
99
-
100
-
101
- /**
102
-
103
- * CSSなどの静的コンテンツを利用するための設定を記述する。
104
-
105
- */
106
-
107
- public void addResourceHandlers(ResourceHandlerRegistry registry) {
108
-
109
- // registry.addResourceHandler("/resources/**")
110
-
111
- // .addResourceLocations("/resources/**");
112
-
113
-
114
-
115
- // Register resource handler for CSS and JS
116
-
117
- registry.addResourceHandler("/resources/**").addResourceLocations("classpath:/static/", "D:/static/")
118
-
119
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
120
-
121
-
122
-
123
- // Register resource handler for images
124
-
125
- registry.addResourceHandler("/images/**").addResourceLocations("/WEB-INF/images/")
126
-
127
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
128
-
129
- }
130
-
131
- ```
132
-
133
-
35
+ 1) Web MVC Config
36
+
37
+ ```Spring
38
+
39
+ @Override
40
+
41
+ public void configure(WebSecurity web) throws Exception {
42
+
43
+ // Enable access to my local static resources
44
+
45
+
46
+
47
+ web.ignoring().antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**", "/vendor/**", "/fonts/**");
48
+
49
+ }
50
+
51
+
52
+
53
+ @Override
54
+
55
+ protected void configure(AuthenticationManagerBuilder auth) throws Exception {
56
+
57
+ auth.eraseCredentials(true)
58
+
59
+ .userDetailsService(userDetailsService)
60
+
61
+ .passwordEncoder(passwordEncoder());
62
+
63
+ //add our users for in memory authentication
64
+
65
+
66
+
67
+ }
68
+
69
+
70
+
71
+ @Override
72
+
73
+ protected void configure(HttpSecurity http) throws Exception {
74
+
75
+ http.authorizeRequests()
76
+
77
+ .antMatchers("/").permitAll()
78
+
79
+ .anyRequest().authenticated()
80
+
81
+ .and()
82
+
83
+ .formLogin()
84
+
85
+ .loginPage("/index")
86
+
87
+ .permitAll()
88
+
89
+ .usernameParameter("userName")
90
+
91
+ .passwordParameter("password")
92
+
93
+ .loginProcessingUrl("/authenticate")
94
+
95
+ .defaultSuccessUrl("/result")
96
+
97
+ .failureUrl("/login/failure")
98
+
99
+ ;
100
+
101
+ }
102
+
103
+ ```
104
+
105
+
106
+
107
+ 2) Web Security Config
108
+
109
+ ```Spring
110
+
111
+ @Bean
112
+
113
+ public SpringTemplateEngine templateEngine() {
114
+
115
+ SpringTemplateEngine engine = new SpringTemplateEngine();
116
+
117
+ //engine.addDialect(new SpringSecurityDialect());
118
+
119
+ engine.setTemplateResolver(templateResolver());
120
+
121
+ return engine;
122
+
123
+ }
124
+
125
+
126
+
127
+ @Bean
128
+
129
+ public ThymeleafViewResolver thymeleafViewResolver() {
130
+
131
+ ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
132
+
133
+ viewResolver.setTemplateEngine(templateEngine());
134
+
135
+ viewResolver.setCharacterEncoding("UTF-8");
136
+
137
+ viewResolver.setOrder(1);
138
+
139
+ return viewResolver;
140
+
141
+ }
142
+
143
+
144
+
145
+ /**
146
+
147
+ * Using Custom Resource Path
148
+
149
+ */
150
+
151
+ public void addResourceHandlers(ResourceHandlerRegistry registry) {
152
+
153
+
154
+
155
+ // Register resource handler for CSS and JS
156
+
157
+ if (!registry.hasMappingForPattern("/resources/**")) {
158
+
159
+ registry.addResourceHandler("/resources/**").addResourceLocations("/resources/**")
160
+
161
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
162
+
163
+ }
164
+
165
+
166
+
167
+ // Register resource handler for images
168
+
169
+ if (!registry.hasMappingForPattern("/images/**")) {
170
+
171
+ registry.addResourceHandler("/images/**").addResourceLocations("/images/**")
172
+
173
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
174
+
175
+ }
176
+
177
+ }
178
+
179
+ ```
180
+
181
+
182
+
183
+ 3) ビュー（Thymeleafで読み込み）
134
184
 
135
185
  ```HTML
136
186
 
@@ -164,244 +214,130 @@
164
214
 
165
215
 
166
216
 
167
- <link href="resources/statics/css/style.css" type="text/css" th:href="@{src/main/resources/statics/css/style.css}" rel="stylesheet" />
168
-
169
-
170
-
171
- <style>
172
-
173
- .bd-placeholder-img {
174
-
175
- font-size: 1.125rem;
176
-
177
- text-anchor: middle;
178
-
179
- -webkit-user-select: none;
180
-
181
- -moz-user-select: none;
182
-
183
- -ms-user-select: none;
184
-
185
- user-select: none;
186
-
187
- }
188
-
189
-
190
-
191
- @media (min-width: 768px) {
192
-
193
- .bd-placeholder-img-lg {
194
-
195
- font-size: 3.5rem;
196
-
197
- }
198
-
199
- }
200
-
201
-
202
-
203
- div .container .col-sm-10 .carousel slide .carousel-inner img {
204
-
205
- height: 100px;
206
-
207
- }
208
-
209
- </style>
210
-
211
-
212
-
213
-
214
-
215
- </head>
216
-
217
- <body>
218
-
219
-
220
-
221
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
222
-
223
- <a class="navbar-brand" href="#">Navbar</a>
224
-
225
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09"
226
-
227
- aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
228
-
229
- <span class="navbar-toggler-icon"></span>
230
-
231
- </button>
232
-
233
-
234
-
235
- <div class="collapse navbar-collapse" id="navbarsExample09">
236
-
237
- <ul class="navbar-nav mr-auto">
238
-
239
- <li class="nav-item active">
240
-
241
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
242
-
243
- </li>
244
-
245
- <li class="nav-item">
246
-
247
- <a class="nav-link" href="#">Link</a>
248
-
249
- </li>
250
-
251
- <li class="nav-item">
252
-
253
- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
254
-
255
- </li>
256
-
257
- <li class="nav-item dropdown">
258
-
259
- <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown"
260
-
261
- aria-haspopup="true" aria-expanded="false">Dropdown</a>
262
-
263
- <div class="dropdown-menu" aria-labelledby="dropdown09">
264
-
265
- <a class="dropdown-item" href="#">Action</a>
266
-
267
- <a class="dropdown-item" href="#">Another action</a>
268
-
269
- <a class="dropdown-item" href="#">Something else here</a>
217
+ <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
218
+
219
+ ```
220
+
221
+
222
+
223
+ ```HTML
224
+
225
+ <div class="container">
226
+
227
+ <div class="row">
228
+
229
+ <!-- Carousal -->
230
+
231
+ <div class="col-md-8">
232
+
233
+ <div class="panel panel-default">
234
+
235
+ <div class="panel-body">
236
+
237
+ <!--カルーセルのタグ。いじるのはオススメしない。-->
238
+
239
+ <div id="carousel-example" class="carousel slide" data-ride="carousel">
240
+
241
+
242
+
243
+ <!--ここで好きな枚数のスライドを作れる。imgタグのscr内に好きな画像を入れよう。-->
244
+
245
+ <div class="carousel-inner">
246
+
247
+ 　　　　　　　　　　　　　　　　　　　　　　　　<!--後ろにactiveをつけたものが最初に表示されるよ。-->
248
+
249
+ <div class="carousel-item active">
250
+
251
+ <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"
252
+
253
+ alt="Picture1">
254
+
255
+ <div class="carousel-caption">
256
+
257
+ <h4>First Thumbnail</h4>
258
+
259
+ <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
260
+
261
+ in a
262
+
263
+ piece of classical Latin literature from 45 BC, making it over 2000 years
264
+
265
+ old. </p>
266
+
267
+ </div>
268
+
269
+ </div>
270
+
271
+ <div class="carousel-item">
272
+
273
+ <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"
274
+
275
+ alt="Picture2">
276
+
277
+ </div>
278
+
279
+ <div class="carousel-item">
280
+
281
+ <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"
282
+
283
+ alt="Picture3">
284
+
285
+ </div>
286
+
287
+ </div>
288
+
289
+
290
+
291
+ <!--これはスライドの「進むボタン」と「戻るボタン」。いらないなら無くていい。-->
292
+
293
+ <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
294
+
295
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
296
+
297
+ <span class="sr-only">Previous</span>
298
+
299
+ </a>
300
+
301
+ <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
302
+
303
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
304
+
305
+ <span class="sr-only">Next</span>
306
+
307
+ </a>
308
+
309
+
310
+
311
+ <!--こちらはスライドの枚数や現在地がわかるあれ。いらないならn(ry-->
312
+
313
+ 　　　　　　　　　　　
314
+
315
+ <ol class="carousel-indicators">
316
+
317
+ <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
318
+
319
+ <li data-target="#carousel-example" data-slide-to="1"></li>
320
+
321
+ <li data-target="#carousel-example" data-slide-to="2"></li>
322
+
323
+ </ol>
324
+
325
+ </div>
270
326
 
271
327
  </div>
272
328
 
273
- </li>
329
+ </div>
274
-
330
+
275
- </ul>
331
+ </div>
276
-
332
+
277
- <form class="form-inline my-2 my-md-0">
333
+ <div class="col-md-2">
278
-
334
+
279
- <input class="form-control" type="text" placeholder="Search" aria-label="Search">
335
+ <img th:src="@{/images/logo.png}"/>
280
-
336
+
281
- </form>
337
+ </div>
282
338
 
283
339
  </div>
284
340
 
285
- </nav>
286
-
287
-
288
-
289
- <div class="container">
290
-
291
- <div class="row">
292
-
293
- <!-- Carousal -->
294
-
295
- <div class="col-md-8">
296
-
297
- <div class="panel panel-default">
298
-
299
- <div class="panel-body">
300
-
301
- <!--カルーセルのタグ。いじるのはオススメしない。-->
302
-
303
- <div id="carousel-example" class="carousel slide" data-ride="carousel">
304
-
305
-
306
-
307
- <!--ここで好きな枚数のスライドを作れる。imgタグのscr内に好きな画像を入れよう。-->
308
-
309
- <div class="carousel-inner">
310
-
311
- 　　　　　　　　　　　　　　　　　　　　　　　　<!--後ろにactiveをつけたものが最初に表示されるよ。-->
312
-
313
- <div class="carousel-item active">
314
-
315
- <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"
316
-
317
- alt="Picture1">
318
-
319
- <div class="carousel-caption">
320
-
321
- <h4>First Thumbnail</h4>
322
-
323
- <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
324
-
325
- in a
326
-
327
- piece of classical Latin literature from 45 BC, making it over 2000 years
328
-
329
- old. </p>
330
-
331
- </div>
332
-
333
- </div>
334
-
335
- <div class="carousel-item">
336
-
337
- <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"
338
-
339
- alt="Picture2">
340
-
341
- </div>
342
-
343
- <div class="carousel-item">
344
-
345
- <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"
346
-
347
- alt="Picture3">
348
-
349
- </div>
350
-
351
- </div>
352
-
353
-
354
-
355
- <!--これはスライドの「進むボタン」と「戻るボタン」。いらないなら無くていい。-->
356
-
357
- <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
358
-
359
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
360
-
361
- <span class="sr-only">Previous</span>
362
-
363
- </a>
364
-
365
- <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
366
-
367
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
368
-
369
- <span class="sr-only">Next</span>
370
-
371
- </a>
372
-
373
-
374
-
375
- <!--こちらはスライドの枚数や現在地がわかるあれ。いらないならn(ry-->
376
-
377
- 　　　　　　　　　　　
378
-
379
- <ol class="carousel-indicators">
380
-
381
- <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
382
-
383
- <li data-target="#carousel-example" data-slide-to="1"></li>
384
-
385
- <li data-target="#carousel-example" data-slide-to="2"></li>
386
-
387
- </ol>
388
-
389
- </div>
390
-
391
- </div>
392
-
393
- </div>
394
-
395
- </div>
396
-
397
- <div class="col-md-2">
398
-
399
- <img th:src="@{/images/logo.png}"/>
400
-
401
- </div>
402
-
403
- </div>
404
-
405
341
  </div>
406
342
 
407
343
  ```
@@ -412,12 +348,34 @@
412
348
 
413
349
 
414
350
 
415
- 絶対パスを指定しましたが読み込めませんでした。
351
+ 以下のStackFlow のサイトの方法で解決を試みましたが、完璧に詰んでいます。
352
+
353
+ 初歩的な質問で申し訳ないですが、どこが間違えているのか検討がつきません。
354
+
355
+
356
+
357
+ 1)https://stackoverflow.com/questions/50792837/thymeleaf-3-spring-5-load-css
358
+
359
+ 2)https://stackoverflow.com/questions/54848419/cant-load-my-css-when-using-spring-security-and-thymeleaf
360
+
361
+ 3)https://stackoverflow.com/questions/54844592/unable-to-add-css-file-in-spring-and-thymeleaf
362
+
363
+ 4)https://stackoverflow.com/questions/29562471/springboot-with-thymeleaf-css-not-found
364
+
365
+ 5) https://stackoverflow.com/questions/26283670/spring-mvc-issue-with-loading-of-resources-images-css
416
366
 
417
367
 
418
368
 
419
369
  ### 補足情報（FW/ツールのバージョンなど）
420
370
 
421
-
371
+ フォルダ構成です。
422
-
372
+
423
- ![イメージ説明](e3e7e8f081cbf3f1b3e93df0f19f3188.png)
373
+ ![イメージ説明](ed9e2ac66d1d5e8aab3a74440e767617.png)
374
+
375
+
376
+
377
+ ちなみに、Spring Bootは使用していません。
378
+
379
+
380
+
381
+ ご教授よろしくお願いします。