【Django】BootstrapをCDNで導入している際に「Sass(SCSS)」を使わずに色を任意で変更する方法
カテゴリ：Django 投稿：2022年6月25日1:19、更新：2022年6月26日9:52
・記事の概要
BootstrapをCDNで導入している場合、サイト内で任意の色を使うには「django-sass-processor」などを導入して進めていく方法がありますが、そうせずにライトに対応する方法を記載します。
・この記事の対象
・BootstrapをCDNで導入したままに、色の変更を自由に行いたい方。
・個人開発などであるため難しい手順や管理はしたくない(する必要性)も薄く、簡易に色変更の対応をしたい方。
・この記事でできるようになること
Bootstrapの導入済機能面は特に変更なく、かつBootstrapのTheme colorsなどに縛られずに任意の箇所を任意の色に変更可能になります。
また特にDjangoではなくても変わらず利用してもらえる手法です。
・前提のお話
Bootstrapを導入していると、なんだか色の変更を任意にできないな、と思うことがあるかもしれません。
その要因は主に2つあります。
まずはCSSの読み込み順です。CSSは書いてある順で(下に書いてある方が)優先させるという面があります。要は後勝ちなんですね。そのためにCDNの読み込みを例えばbase.htmlの<head>内に記載してある場合はそれより後に反映させたいCSSの指定がないといけません。
またBootstrapでは内部的に「!important」指定をしており、これがついている場合のみ上記の後勝ちではなく、「!important」優先にすることができます。
つまりはCDN読み込みよりも後で、「!important」指定もできればBootstrapより優先した色の指定ができそうです。具体的な方法を記載していきます。
・実際の対応方法
もうだいたいの説明は終わってしまっているのですが
例えば<head>内でCDNを読み込んでいた場合、</head>後に<style>指定で「!important」付きで書いてあげれば、それだけで対応できます。
例を記載しますと、base.htmlがあったとして
<!doctype html>
<html lang="ja">
<head>
...
Bootstrap CDNの読み込み記述
...
</head>
<style >
.bg-hoge {
background: #A67A16 !important;
color: #fff !important;
}
</style>
<body>
...
<div class="bg-hoge">
...
</body>
って感じですかね。
<head>後に<style>指定して「!important」を付けるだけですね。
stylesheet(CSS外だし)で指定して CDNの後に読み込んでも成功するかもなんですが、過去にこれでは対応できなかったことがあったのでちょっとゴリ押し気味ではありますが。。。（未だにその時の原因自体は不明）
importantも多用するとCSSの変更において混乱を招く要素になりますので、個人開発などでちょっとやりたい時にご利用ください。
・実際の対応方法
いかがだったでしょうか。
正直<style>直指定はね、、、って思いはあるかもしれませんが、前述の通りあくまで簡易的に実現したいんだ！って時の方法として参考になれば幸いです。
業務で開発していてもCSS周りはいつもやりたいことに対して時間がかかりすぎてしまうことがあったので、ちゃんと押さえておきたいと思いつつ、ちょっと逃げ手法のご紹介でした 笑
コメント一覧
コメント投稿ページへ