Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

SpringBootでCSSを使用する方法

CSSフォルダの配置場所

image.png
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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?