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

2022年4月12日IT,Java

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

Bootstrapが機能せずCSSが適用されない現象の原因

HTMLのsrc属性を使用していたことが原因でした。
index.htmlなどの初期表示するHTMLでは
通常のsrc属性を使用し、特に問題なく動いていました。

しかし、Controllerで他のControllerのメソッドにredirectし、
その後HTMLをreturnするとCSSが機能しませんでした。

なぜうまくいかないかは不明ですが、
通常のsrc属性を使用しているとうまく読み込めない時があるようです。

Bootstrapが機能せずCSSが適用されない現象の解決策

//失敗列
<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属性を使用してやるとCSSが適用されました。

src属性→th:src属性のようにThymeleaf側で代替属性が用意されている場合、
そちらを優先的に使ったほうがよさそうです。

類似の問題

通常の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属性と同じように
href属性→th:href属性に修正しましょう。
Thymeleafの属性を使用することでCSSが機能します。

まとめ

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

src属性、href属性以外にも似たような事象が発生する可能性があります。
上記の対策としてThymeleaf側で代替属性が存在する場合、必ずそちらを使うようにしましょう。

2022年4月12日IT,Java

Posted by raishin