Springでwebアプリの作成でCSSが反映されない

前提・実現したいこと

SpringBootを使って簡単なwebアプリケーション(サイト？)を作っています。
localhostに接続してブラウザで確認したところ画像が表示されず、CSSが適用されていませんでした。

プロジェクトのフォルダ構成

該当のコード

まだ途中なのでthymleafを適用していない箇所多いです。

html
1<!DOCTYPE html>
2<html lang="en">
3<html xmlns:th="http://www.thymleaf.org">
4<head>
5    <meta charset="UTF-8">
6    <title>Title</title>
7    <link rel="stylesheet" href="../static/css/home.css">
8</head>
9<body>
10 <div class="top">
11     <h1>サイト</h1>
12     <h2>Search</h2>
13     <p class="hit">サークル一覧　oo件ヒット<a class="search" href="option.html">条件を絞る</a></p>
14 </div>
15 <div class="container"  th:each="circle : ${circleList}">
16     <div class="circle">
17
18         <img src="../static/image/lUcpYpEk36uDcZeGjRa2Hv2UN4MVd75WIOMpwTNj.jpeg" width="572px" height="352px">
19            <div class="sub">
20                <a class="name" href="detail_fes.html" th:text="${circle.name}"></a>
21                <p class="content" th:text="${circle.organization}"></p>
22            </div>
23     </div>
24 </div>
25
26</body>
27</html>

css
1body{
2    background-color:#F0F0F0;
3    font-family:"Hiragino Kaku Gothic ProN";
4}
5.top{
6    background-color:#F0F0F0;
7    /*height:416px;*/
8}
9h1{
10    color:#9A9A9A;
11    font-size:30px;
12    text-align: center;
13    font-weight: normal;
14    padding-top:75px;
15    padding-bottom:0;
16    line-height:30px;
17    margin:0 0;
18}
19.top h2{
20    color:#20358D;
21    font-size:150px;
22    text-align: center;
23    font-weight: normal;
24    padding-top:0;
25    line-height:150px;
26    margin:0 0;
27}
28.search {
29    font-size: 40px;
30    cursor: pointer;
31    float:right;
32    color:#707070;
33
34}
35
36.hit{
37    color:#707070;
38    font-size:40px;
39    border:1px solid #707070;
40    background-color:#FFFFFF ;
41    padding-right: 40px;
42
43}
44.container{
45    margin:0 auto;
46    padding-left:50px;
47}
48
49
50.circle {
51    position:relative;
52    /*top:518px;
53    left:53px;*/
54    float:left;
55    padding-right:50px;
56    padding-bottom:30px;
57}
58.sub{
59    position:absolute;
60    /*top:528px;
61    left:63px;*/
62    top:10px;
63    left:10px;
64    height:150px;
65    width:400px;
66    background-color: #F0F0F0;
67    opacity: 0.8;
68}
69
70.name{
71    font-size:39px;
72    color:#707070;
73    margin:0;
74    padding:0;
75    position:absolute;
76    /*top: 560px;
77    left: 84px;*/
78    top:30px;
79    left:30px;
80    cursor: pointer;
81
82}
83.content{
84    font-size:30px;
85    color:#9A9A9A;
86    margin:0;
87    padding:0;
88    position: absolute;
89    /*top: 617px;
90    left: 84px;*/
91    top:90px;
92    left:30px;
93}

行動規範の内容に同意します

回答1件

ベストアンサー

staticは「静的」という意味で、通常、URLには現れません。
「テンプレートhtmlファイルからのパス」ではなく「Web上でアクセス・表示されているURLからのパス」にしなければなりません。

Thymeleafでの書き方はこんな感じになると思います。

html
1<link th:href="@{/css/home.css}" rel="stylesheet">

投稿2020/04/21 07:28

m.ts10806

総合スコア80850

isisisimylife

2020/04/21 14:09

解決いたしました。ありがとうございます。「テンプレートhtmlファイルからのパス」ではなく「Web上でアクセス・表示されているURLからのパス」にする。基本的な事なのかも知れないですが知らなかったのでとても助かりました

m.ts10806

2020/04/21 14:11

ブラウザからアクセスするときに表示されるのはあくまでHTMLでありCSSです。そこを意識すれば実装も間違えることはありません。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！