Controllerでhtmlをreturnした際にCSSが機能しない現象の対策

Java

Springbootで開発をしており、
テンプレートエンジンはThymeleafを使用しています。
Controllerで色々作業してhtmlをreturnした際に
Bootstrapが機能せずCSSが適用されない現象に遭遇しました。

原因

HTMLのsrc属性を使用していたことが原因でした。
index.htmlなどの初期表示するHTMLでは
通常のsrc属性を使用し、特に問題なく動いていました。
しかし、Controllerで他のControllerのメソッドにredirectし、
その後HTMLをreturnするとCSSが機能しませんでした。
なぜうまくいかないかは不明ですが、
通常のsrc属性を使用しているとうまく読み込めない時があるようです。

解決策

//失敗列
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>


//成功例
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>

上記のようにThymeleafのth:src属性を使用してやるとうまくいきました。

類似

通常のhref属性を使用していると上記と同様にうまくCSSが読み込めない時があります。

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.cs">

<link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">

src属性と同じようにThymeleafの属性を使用してあげればCSSが機能します。

まとめ

気づけば簡単に直せる問題でしたが、
気づくまでにけっこう時間がかかりました。

Java

Posted by raishin