Thymeleafレイアウト作成でCSSが適応されない
Q&A
Closed
解決したいこと
Thymeleafで共通画面の作成を行い、HTML/CSSを記述したのですが、
うまくヘッダー・サイドバー・メイン・フッターにCSSが適応されません。
該当するソースコード
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="layout(body)">
<head>
<meta charset="UTF-8" />
<link th:href="@{/css/layout.css}" rel = "stylesheet"/>
<title>Insert title here</title>
</head>
<body>
<header th:replace="~{layout/header :: layout-header}"></header>
<main th:replace="${body}"></main>
<aside th:replace="~{layout/sidebar :: layout-sidebar}"></aside>
<footer th:replace="~{layout/footer :: layout-footer}"></footer>
</body>
</html>
@charset "UTF-8";
body{
display: flex;
flex-wrap: wrap;
margin: 0;
}
header{
width: 100%;
height: 70px;
background: blue;
}
main{
width: calc(100% - 150px);
height: 200px;
background: hotpink;
}
aside{
width: 150px;
height: 200px;
background: gold;
}
footer{
width: 100%;
height: 30px;
background: blue;
}
自分で試したこと
実際にブラウザで動作しているソースを確認したところ、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="/infomanager/css/layout.css" rel = "stylesheet"/>
<title>Insert title here</title>
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=W-0UupRtXBFf2R_3zThaG37kGmxK0HLxGIq7klx2oK0NBok9yXAkxhiOwyZpTyC_EcBTlkliO1p1WVnToPfpGw" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cDovL2xvY2FsaG9zdDo3Nzc3L2luZm9tYW5hZ2VyL2VtcHMvZmluZEFsbA"/></head>
<body>
<div id ="header">
<a href="/infomanager/emps/findAll">社員一覧</a>
<a href="/infomanager/emps/create/emp">新規登録</a>
<form action="/infomanager/emps/empnamefind/">
<input type="text" name="empName" /> <input type="submit" value="検索" />
</form>
<form action="/infomanager/emps/empdepfind/">
<select name="depId">
<option value="1">人事部</option>
<option value="2">総務部</option>
<option value="3">経理部</option>
<option value="4">営業部</option>
</select> <input type="submit" value="検索" />
</form>
</div>
<table>
<tr>
<th>社員番号</th>
<th>社員名</th>
<th>社員名＜カナ＞</th>
<th>操作</th>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/1">
1 </a></td>
<td>山田 太郎</td>
<td>ヤマダ タロウ</td>
<td>編集</td>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/2">
2 </a></td>
<td>山田 花子</td>
<td>ヤマダ ハナコ</td>
<td>編集</td>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/3">
3 </a></td>
<td>田中 健</td>
<td>タナカ ケン</td>
<td>編集</td>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/4">
4 </a></td>
<td>桜井 七</td>
<td>サクライ ナナ</td>
<td>編集</td>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/5">
5 </a></td>
<td>三島 咲</td>
<td>ミシマ サキ</td>
<td>編集</td>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/6">
6 </a></td>
<td>山本 翔</td>
<td>ヤマモト カケル</td>
<td>編集</td>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/7">
7 </a></td>
<td>鬼瓦 十兵衛</td>
<td>オニガワラ ジュウベイ</td>
<td>編集</td>
</tr>
<tr>
<td><a href="/infomanager/emps/empshow/8">
8 </a></td>
<td>こめんと てすと</td>
<td>コメント テスト</td>
<td>編集</td>
</tr>
</table>
<div id ="sidebar">
サイドバー
</div>
<div id ="footer">
フッター
</div>
</body>
</html>
上記のように、
にクラスがついている形になってしまっていたり、
そもそもタグがいなくなっていたりと想定と違う結果になってしまっています。
その他の編集は適応されているため、ファイルの位置が間違っているなどはないと思われます。
そもそもタグがいなくなっていたりと想定と違う結果になってしまっています。
その他の編集は適応されているため、ファイルの位置が間違っているなどはないと思われます。
解決方法などありましたら、よろしくお願いいたします。。。
0