CSS_SpringBoot 備忘録

2040 ワード
SpringBoot CSS CSS テキストリンク

CSSフォルダの配置場所


resourcesフォルダ>staticフォルダの配下にCSS等のフォルダを作成し、その中に配置する。

外部ファイルを参照する方法

<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>