Controllerでhtmlをreturnした際にCSSが機能しない現象の対策
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側で代替属性が存在する場合、必ずそちらを使うようにしましょう。
