CSSが反映されなかった時の対処法
私が初めてwebサイトを作った時にあれっ？てなった事です。
ググっても意外と初歩的すぎて中々出てこなかったのでメモしておきます。
背景色を以下のようにしたかったのですが...
style.css
body {
background-color: aquamarine;
}
実際は背景が真っ白のままでした。
検証ツールを確認すると自分で設定したはずの記述が打ち消されていました。
競合しているのはbootstrapのbodyタグです。
こいつに打ち勝つ必要があります。
対処法１ bodyにクラスをつける
<body class="hoge">
body.hoge {
background-color: aquamarine;
}
すると、body.hogeの方が優先度が上がります。
bootstrapに勝てました。
でもたくさんあるファイルのbodyにクラスをちまちまつけるのは面倒です。
対処法2 Bootstrapを先にロードしておく
後出しジャンケン的なイメージです。
先にbootstrapを、後にstyle.css(今回反映させたいファイル)をロードしました。後にロードしたファイルが優先的に反映されました。
<script type="text/javascript" src="./../vendor/twbs/bootstrap/dist/js/jquery-3.5.0.js"></script>
<script type="text/javascript" src="./../vendor/twbs/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="./../vendor/twbs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./../stylesheet/style.css">
対処法１よりシンプルです。
対処法３ !importantをつける
上記でできなかったらこの方法です。
body {
background-color: aquamarine !important;
}
この方法でもbootstrapに勝てました。
以上が、cssの記述が反映されなかった時に試したことでした。
何かご指摘あればコメントよろしくお願いします。