【CSS・Bootstrap】クラスで指定した背景色に変わらない原因が分からない

実現したいこと

<div class="card-header"></div>のように、「card-header」クラスを付与している要素に対して、別の背景色を付けたい。

発生している問題・分からないこと

通常、<div class="card-header"></div>とするとこのようになります。

これを、

のように、card-headerを付与しつつ、別の背景色に色付けしたいですが、ユーザ定義クラスが反映されません。

該当のソースコード

<div class="userClass card-header">　や　<div class="card-header userClass">
とすると、灰色のままです。

<div class="card-header" style="background-color: lightgoldenrodyellow">
とすると、薄黄色になってくれます。

.userClass{
    !important;
    background-color: lightgoldenrodyellow;
}
↑このスタイルは、cssファイルに記載し、<head></head>内で読み込んでいます。
正しくファイルが読み込まれていることは確認済みです。

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

Google検索で「css bootstrap 競合」などと調べましたが、うまくヒットしませんでした。

補足

Bootstrap version 4.0.3を使っています。

int32_t

2024/04/10 00:38

card-header や userClass に適用するプロパティを定義しているルールセットを開示してください。 https://developer.mozilla.org/ja/docs/Web/CSS/Syntax#css_%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%BB%E3%83%83%E3%83%88

行動規範の内容に同意します

回答3件

ベストアンサー

何度か申し上げていると思いますが、Bootstrap は Bootstrap のお作法で書くべきで、そうするのが嫌なら初めから Bootstrap を採用すべきではないです。
カラーバリエーションは Sass を触って、ユーティリティAPI 経由で調整するか、既存のテーマを流用するか、テーマビルダなどを使って作成しましょう。

Background · Bootstrap v5.0
Free Bootstrap Builder, Build Themes & Templates - Bootstrap.Build

投稿2024/04/10 02:55

Lhankor_Mhy

総合スコア36134

meex

2024/04/10 07:28

例えばですが「基本的にBootstrapを使う方針だが、一部サービスのテーマカラーに合わない箇所やレイアウトがあるので、その部分だけはユーザ定義のCSSを使いたい」や「Bootstrapにすべての表現が搭載されていればいいが、搭載されていない色合い（bg-goldやbg-lightgreenなどはない）などがあるので、どうしてもユーザ定義CSSを使わなければならない」というシチュエーションは実際の業務でもあるかと思います。今回のように、私もBootstrapですべて賄えるのであれば賄いたかったのですが、bg-xxxの色の種類は数種類いしかなかったので、そういう場合はどう表現したらいいでしょうか？ Bootstrapを解析し、クラスの中身をstyle=""内にすべて記載する形で表現するしかないのでしょうか？お詳しそうなので、ご意見賜れますと幸いです。

Lhankor_Mhy

2024/04/10 08:04

それほど詳しくはない（数回ビルドした程度）ですが、たとえば、「コーポレートカラーに合わせたい」みたいな要求であれば、当然カラーテーマを作り変える形になるかと思います。方法はリンク先にある通り、$theme-colors を書き換えてビルドします。サイトをビルドツールなどを使って構築しているのであれば違和感ないと思いますが、慣れないとハードルが高いかもしれません。テーマビルダを使えば、もう少しハードルは下げられるでしょう。使いまわしを考えておらず、ピンポイントで色を変更するということであればCSSで対応するのもいいかと思います。方法については、m.ts10806 さんがご回答で書かれた通りです。ただ、Bootstrap はそのシステムの中で !important を結構使っているので、多用すると !important 地獄になるかと思います。

m.ts10806

2024/04/10 08:05

個人的な意見なのでこちらにぶら下がらせていただきます。個人的には既存の .bg-xxxを流用した .bg-xxxを自分で作りますし、実際にやってます。本回答の「既存のテーマを流用する」はそういうことだと思います。色だけかえればそのまま使えますからね。

Lhankor_Mhy

2024/04/10 08:23 編集

まあ、でも、余計なことを回答に書きすぎましたね。ついマウントをしたい気分になってしまったのかもしれません。失礼しました、忘れていただければ幸いです。ご自由にコードを書かれるのがよろしいかと思います。くだんの問題は単純に文法エラーが原因なので、!important; を消せば普通に色が変わるはずです。サンプルを置いておきます。 https://jsfiddle.net/Lhankor_Mhy/2dk8acxq/

行動規範の内容に同意します

気になったので試してみたのですがやはりCSSは基本後勝ちなので、後に定義されたほうが有効になります。

HTML
1<p class="red blue">テスト

cssその１

CSS
1.blue{
2	color:blue;
3}
4.red{
5	color:red;
6}

CSSその１適用結果

cssその２

CSS
1.red{
2	color:red;
3}
4.blue{
5	color:blue;
6}

CSSその２適用結果

なので、CSSの「定義」を.card-headerの定義よりも後に書けば理論上は反映されます。
外部ファイルにしているのでしたら読み込み順確認を。
CSSフレームワークを利用している場合はもう少し複雑かもしれません。親子関係とかもありますからね。

class内に書いた場合は、書いた順に関係なく、関連性は「並列」なので（idとかなら上位になったりする）、
あくまで定義の順番が影響します。

インライン（style="~~"）は最も優先度が高く最も後に書かれることになるので強いです。こと「ここだけに効かせたい」ときには最強です（ピンポイントにしか効かないので汎用性は最弱です）

また、!importantの使い方をいったん見直してみてください。
提示されたコードが一部なので何とも言えませんが、提示された部分だけで言うと間違ってます。
https://developer.mozilla.org/ja/docs/Web/CSS/important

投稿2024/04/10 02:16

編集2024/04/10 02:24

m.ts10806

総合スコア80850

meex

2024/04/17 08:32

後勝ちになるはずですよね。。。そうならないということは他にも読み込んでいるCSSで競合などしているのだと感じました。どこが競合しているかはChromeDeveloperツールでは調べることができませんでしたので、とりあえず強引ですが、色を変えたい部分だけピンポイントでstyle=""で変更する運びとなりました。 !important;の使い方も改めて調べてみます。ありがとうございました。

行動規範の内容に同意します

こちらで動きませんか？

.userClass {
	background-color: lightgoldenrodyellow !important;
}

投稿2024/04/10 08:02

lovam-nm

総合スコア12

meex

2024/04/17 08:30

ご回答ありがとうございます。ご指示いただいた内容でしてみましたが、変わりませんでした。。。恐らく他のCSSと競合していたりなどがあるのだと感じました。 !important;はそのように使うのですね。勉強になりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！