CSSフォルダの配置場所
resourcesフォルダ>staticフォルダの配下にCSS等のフォルダを作成し、その中に配置する。
Thymeleafから参照する方法
<head>
<!--中略-->
<link th:href="@{/css/hoge.css}" rel="stylesheet" type="text/css">
<!--中略-->
</head>
要素
説明
<link>
外部のスタイルシートを読み込むことができる。この要素はhead要素の中で使用する。
rel
relationの略。外部のスタイルシートを読む場合は"stylesheet"を指定。
th:
Thymeleafのth:href属性で参照したいファイルを指定する。@{/}と記述することでstaticディレクトリのルートからのパスを指定することができる。
type
"text/css"。CSSのMIMEタイプを指定
MIMEタイプ
ファイルの種類を指定する情報
BootStrapを使用する場合
<head>
<!--中略-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!--中略-->
</head>
同じ要素内にクラス名を複数指定していて、その全てに同じCSSを適用する場合
その複数指定している全てのクラス名に同じCSSを適用させる場合は、半角スペースで区切らずにセレクタを繋げて記述します。https://ooigawa-bitter-sweet.hatenablog.com/entry/2013/07/10/233000_1
html記述方法
<div class="sample1 sample2">
<p class="sample3">サンプルテキスト</p>
</div>
↧