css bootstrapを使用するとほかのCSSが使えなくなる。

Question

前質問
この質問解決するためにいただいた回答で

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

と宣言しているのですが
そのせいで既存で宣言していたCSSがファイル反映されなくなってしまい
プログレスバーの処理に
bootstrapのcssの読み込みが必要なのはわかるのですが
どうにかして既存のCSSと喧嘩しない方法や何かいい方法ないでしょうか？

Answer 1

基本的にbootstrapを使用して、更にそれにプラスでCSSを当てようと思った場合、喧嘩はほぼ必須です。

なので、上手い喧嘩の仕方を学びましょう。

CSSが適用されないということで原因を大きく分けると以下のように別れるかと思います。

• cssが読み込まれていない
• classやidの名前が間違っている
• プロパティのタイピングミス（widthをwidtなど）
• 詳細度を理解していない

今回は喧嘩するということでしたの一番下の詳細度の理解が必要です。

例えば

<div class="text-red text-blue">何色でしょうか</div>

.text-red{color: red;}
.text-blue{color: blue;}

この場合はテキストの色は青色になります。

次にhtmlのclassの順番を逆にしました

<div class="text-blue text-red">何色でしょうか</div>

この場合もテキストの色は青色です。

他にも#redと.redではどちらが適用されるのか、などCSSにはプロパティがぶつかったときにどちらを適用されるかという決まりがあります。
それがCSSの詳細度と言うものです。

なので、bootstrapの強さに勝てるようにcssを当てて上げれば上手く喧嘩ができるわけです！

[CSS] CSSの詳細度による「適用順(優先順位)」と「上書き」などがわかりやすいかもしれません！

参考にしてください！

Comments

[amaguri]

義丁寧にありがとうございます！

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="/あなたのサイトのcss">

って書けば適用されるんじゃない？

Comments

[amaguri]

ありがとうございました！