実現したいこと
Spring bootで簡単なプロジェクトを作成中、CSSを適用したい。
発生している問題・分からないこと
上記の通り、CSSの適用方法を教えていただきたいです。
Thymeleafを使用している場合は、下記のように記載するというところまでは調べたのですが、その通り実装しても一向に適用させることができていない状況です。
CSSはresources 配下にcssフォルダを作成し格納しています。
ブラウザのDevtoolでは下記エラーが出ています。
Refused to apply style (略) because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
また、ネットワークからリクエストヘッダを確認したところ、302 found となっていました。
該当のソースコード
login.html
1<!DOCTYPE html> 2<html lang="ja"> 3<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"> 4 <head> 5 <meta charset="utf-8"> 6 <title>ログイン画面</title> 7 <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" /> 8 </head> 9 <body> 10 <h2>ログイン</h2> 11 <form th:action="@{/selecgt}" method="post"> 12 <div><label> ユーザID : <input type="text" name="username"/> </label></div> 13 <div><label> パスワード: <input type="password" name="password"/> </label></div> 14 <div><input type="submit" value="ログイン"/></div> 15 </form> 16 17 <p class="error-msg" th:if="${param.error}"> 18 ユーザID または パスワードに 誤りがあります。 19 </p> 20 </body> 21</html>
style.css
1body { 2 font-family: BIZ UDPゴシック; 3 background-color: #98fb98; 4 text-align: center; 5} 6 7h1 { 8 font-size: 32px; 9 color: green 10} 11 12h2 { 13 font-size: 28px; 14 background-color: green; 15 color: white 16} 17 18hr { 19 border: 0; 20 border-top: 1px solid #8fbc8f; 21} 22 23.error-msg { 24 color: red; 25} 26 27table { 28 border: 1px solid #5e696c; 29 margin-left: auto; 30 margin-right: auto; 31 width: 80%; /* テーブル横幅 */ 32 border-collapse: collapse; /* 境界線を共有 */ 33} 34 35th { 36 border: 1px solid #5e696c; 37 text-align:center; 38 background-color: #3cb371; 39 height: 32px; 40} 41 42td { 43 border: 1px solid #5e696c; 44 text-align: center; 45 height: 24px; 46} 47 48.select-list { 49 background-color: #eee8aa; 50} 51
試したこと・調べたこと
上記の詳細・結果
・CSSは/resources/css に格納すること
・CSSは「th:href="@{/css/style.css}"」のように読み込むこと
補足
特になし
0 コメント