Q&A
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
実現したいこと
<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を使っています。
回答3件
0
ベストアンサー
何度か申し上げていると思いますが、Bootstrap は Bootstrap のお作法で書くべきで、そうするのが嫌なら初めから Bootstrap を採用すべきではないです。
カラーバリエーションは Sass を触って、ユーティリティAPI 経由で調整するか、既存のテーマを流用するか、テーマビルダなどを使って作成しましょう。
Background · Bootstrap v5.0
Free Bootstrap Builder, Build Themes & Templates - Bootstrap.Build
投稿2024/04/10 02:55
総合スコア36960
例えばですが「基本的にBootstrapを使う方針だが、一部サービスのテーマカラーに合わない箇所やレイアウトがあるので、その部分だけはユーザ定義のCSSを使いたい」や「Bootstrapにすべての表現が搭載されていればいいが、搭載されていない色合い（bg-goldやbg-lightgreenなどはない）などがあるので、どうしてもユーザ定義CSSを使わなければならない」というシチュエーションは実際の業務でもあるかと思います。
今回のように、私もBootstrapですべて賄えるのであれば賄いたかったのですが、bg-xxxの色の種類は数種類いしかなかったので、そういう場合はどう表現したらいいでしょうか？
Bootstrapを解析し、クラスの中身をstyle=""内にすべて記載する形で表現するしかないのでしょうか？
お詳しそうなので、ご意見賜れますと幸いです。
それほど詳しくはない（数回ビルドした程度）ですが、たとえば、「コーポレートカラーに合わせたい」みたいな要求であれば、当然カラーテーマを作り変える形になるかと思います。方法はリンク先にある通り、$theme-colors を書き換えてビルドします。サイトをビルドツールなどを使って構築しているのであれば違和感ないと思いますが、慣れないとハードルが高いかもしれません。
テーマビルダを使えば、もう少しハードルは下げられるでしょう。
使いまわしを考えておらず、ピンポイントで色を変更するということであればCSSで対応するのもいいかと思います。方法については、m.ts10806 さんがご回答で書かれた通りです。
ただ、Bootstrap はそのシステムの中で !important を結構使っているので、多用すると !important 地獄になるかと思います。
個人的な意見なのでこちらにぶら下がらせていただきます。
個人的には既存の .bg-xxxを流用した .bg-xxxを自分で作りますし、実際にやってます。
本回答の「既存のテーマを流用する」はそういうことだと思います。色だけかえればそのまま使えますからね。
まあ、でも、余計なことを回答に書きすぎましたね。ついマウントをしたい気分になってしまったのかもしれません。失礼しました、忘れていただければ幸いです。ご自由にコードを書かれるのがよろしいかと思います。
くだんの問題は単純に文法エラーが原因なので、!important; を消せば普通に色が変わるはずです。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/2dk8acxq/
0
気になったので試してみたのですがやはり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総合スコア80875
後勝ちになるはずですよね。。。そうならないということは他にも読み込んでいるCSSで競合などしているのだと感じました。どこが競合しているかはChromeDeveloperツールでは調べることができませんでしたので、とりあえず強引ですが、色を変えたい部分だけピンポイントでstyle=""で変更する運びとなりました。 !important;の使い方も改めて調べてみます。ありがとうございました。
あなたの回答
tips
プレビュー
