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

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

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

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

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

1回答

2830閲覧

Bootstrapのファイル指定がソースコードに反映されない

Sean2014

総合スコア59

Bootstrap

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

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

1グッド

0クリップ

投稿2020/04/08 20:21

現在、Spring Bootで練習用のウェブアプリを作っています。
基本的な機能部分ができたのでBootstrapでデザインを整えました。最初はBootstrapが上手く読み込めてちゃんとキレイなデザインになっていたのですが、ある日突然デザインが反映されなくなってしまいました。

おかしいと思って、Spring Bootでローカルホストを立ち上げてページを表示した時にページを右クリックしてソースコードを表示させてみたのですが、どのCSSフォルダを読み込むかを指定するth:href="@{/css/bootstrap.min.css}"の記述が抜けている事に気づきました。

下記の添付画像のコードの14行目です。本来ならこのhref="/docs/4.4/dist/css/bootstrap.min.css"とrel="stylesheet"の間にth:href="@{/css/bootstrap.min.css}"の記述が入っているはずなのに、なぜかこの部分だけが読み込まれずに消えています。

イメージ説明

Spring Tool Suite上では、下記の添付画像の通りちゃんと記述が入っています。(同じく14行目)

イメージ説明

この「IDE上では表記されているものが、ローカルホストを立ち上げてページを表示させると読み込まれずに消える」という現象はなぜ起こるのでしょうか?

OSはWindows 10を使っています。

furitetepporaa👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

th:hrefはThymeleafの記述方法なので、「Spring Bootでローカルホストを立ち上げてページを表示した時」に消えていて問題ありません。
その代わり、hrefの内容がth:hrefで指定したパスに置き換わります。
なので、単純に置き換わったhrefのパス[/css/bootstrap.min.css]にファイルが存在しないのではないのでしょうか?
まずその辺のThymeleafの使い方と動きを確認してみたほうが早いかと。

↓のサイトの「4つの記法」の最初のリンク式が今回の質問の回答になるかと思います。
http://masatoshitada.hatenadiary.jp/entry/2016/12/11/100528

投稿2020/04/09 04:07

storm3

総合スコア330

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

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

Sean2014

2020/04/09 07:23

回答ありがとうございます!「置き換わったパスにそもそもファイルが存在しない」可能性を指摘されてハッと思ったのですが、先日別の投稿(https://teratail.com/questions/251601?whotofollow=)で質問した時にも、「ファイルは存在するはずなのにSTS上には表示されない」という現象が起きていました。今回の「STS上にファイルは表示されているが実際には存在しない(かもしれない)」の逆パターンです。今、masterとmain-branchの2つのブランチを使っているのですが、この2つがうまくマージされてないのが原因かもしれません。
Sean2014

2020/04/09 08:16

先ほど試してみたのですが、やはり2つのブランチを行き来していた時にマージがうまく行われておらず、「STS上にファイルは表示されているが実際には存在しない」という現象が起こっていました。git addで足りないファイルを追加してCommitとpushして、最新の状態にアップデートしてからもう1回やってみたらちゃんとBootstrapのデザインつきのページに戻りました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問