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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Q&A

解決済

1回答

1364閲覧

BootStrap3 ログイン画面のみ反映されない(thymeleaf)

chocolate_pie

総合スコア26

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

0グッド

0クリップ

投稿2020/01/17 01:47

編集2020/01/17 01:49

前提・実現したいこと

いつもお世話になっております。
BootStrapを使ってすべての画面にヘッダーとフッターを付ける作業をしていたところ、
ログイン画面(未ログイン)の時だけBootStrapのテキストは読み込めますが、CSS,jQuery等が読み込まれません。
ログインすると、正常にBootStrapが読み込めます。thymeleafを使っているのでそこらへんが原因なのでしょうか…?
ログイン画面にもBootStrapのCSS,jQuery等を読み込みたいです。

発生している問題・エラーメッセージ

ログイン画面でBootStrapのCSS,jQuery等が読み込まれない

該当のソースコード

style.html

HTML

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" 3 xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> 4<head th:fragment="layout(title,links)"> 5 6<link 7 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 8 th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}" 9 rel="stylesheet" /> 10<script 11 src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" 12 th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script> 13<script 14 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" 15 th:src="@{/webjars/bootstrap/3.3.5/js/bootstrap.min.js}"></script> 16 17<meta charset="UTF-8"> 18<title>目標管理</title> 19<link th:href="@{/css/style.css}" rel="stylesheet" /> 20</head> 21<body> 22<!--ヘッダー--> 23 <header th:fragment="header"> 24 <nav class="navbar navbar-default"> 25 <div class="container-fluid"> 26 <div class="navbar-header"> 27 <button type="button" class="navbar-toggle collapsed" 28 data-toggle="collapse" data-target="#navbarEexample7"> 29 <span class="sr-only">Toggle navigation</span> <span 30 class="icon-bar"></span> <span class="icon-bar"></span> <span 31 class="icon-bar"></span> 32 </button> 33 <a class="navbar-brand" th:href="home"> 目標管理 </a> 34 </div> 35 36 <div sec:authorize="isAuthenticated()" 37 class="collapse navbar-collapse" id="navbarEexample7"> 38 <ul class="nav navbar-nav"> 39 <li><p sec:authentication="principal.fullname" 40 class="navbar-text"></p></li> 41 </ul> 42 <p class="navbar-text navbar-right"> 43 <a th:href="@{/logout}" class="navbar-link">ログアウト</a> 44 </p> 45 </div> 46 </div> 47 </nav> 48 </header> 49 <!--フッター--> 50 <footer th:fragment="footer"> 51 <nav class="navbar navbar-default navbar-fixed-bottom"> 52 <div class="container"> 53 <div class="navbar-header navbar-right"> 54 <ul class="nav navbar-nav"> 55 <li class="pull-right"><a>@2019 iTAC Solutions Inc.</a></li> 56 </ul> 57 </div> 58 </div> 59 </nav> 60 </footer> 61</body> 62</html>

ログイン画面(css,jQuery等のみ反映されない)

login.thml

intex.html(ログイン後に反映される画面)

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" 3 xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> 4<head th:replace="layout :: layout('HOME',~{::link})"> 5<meta charset="UTF-8"> 6<title>Insert title here</title> 7</head> 8<body> 9 10 <div th:replace="layout :: header"></div> 11 <h1>あああああ</h1> 12 <p class="text-center title">トップページ</p> 13 <br> 14 <p class="text-center"> 15 <a class="text-center" th:href="@{/{id}(id=${users.id})}">目標一覧</a> 16 </p> 17 <p class="text-center"> 18 <a th:href="@{/acceptregist}">上長登録</a> 19 </p> 20 <p class="text-center"> 21 <a th:if="${users.accept}==true" 22 th:href="@{/memberlist/{id}(id=${users.id})}">メンバー目標一覧</a> 23 </p> 24 <p class="text-center"> 25 <a th:if="${users.authority}=='ROLE_ADMIN'" th:href="@{/admin/menu}">管理者メニュー</a> 26 </p> 27 28 29 30 <div th:replace="layout :: footer"></div> 31</body> 32</html>

正常に反映された時(index.html)

文字だけ反映された時(login.html)
イメージ説明

試したこと

・Cromeの開発者ツールを使ってBootStrapのcssが入っているか確認→なし
・ログイン後index.html以外のページにヘッダーフッターを反映させてみる→成功

補足情報(FW/ツールのバージョンなど)

Spring Bootを使っています。
ファイル階層がまちがっているのかなと思いましたが、ログイン後のindex以外の画面でがBootStrapが機能したので階層の問題ではないと思いました。
宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

springsecurity使用であれば、
js・cssのファイルかファイルがあるフォルダをアクセス制御対象外に設定しないと非ログイン状態でのファイルアクセスができなかったと思います

投稿2020/01/17 02:23

q_sane_q

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chocolate_pie

2020/01/17 02:32

SpringSecurityのことを見落としていました。 セキュリティの設定ファイルのconfigureクラスに"/webjars/**"を追加したら無事読み込まれました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問