どうしたらいいのかわからなくて、手が止まってしまっている状況を解決します。
こんにちは、セイタです。
今回の話題は、Bootstrapに自作のCSSを適応させるための方法について解説します。
【Bootstrap】 CSSが反映されないときの対処法
BootstrapでCSSを適応させるためには、『ピンポイントで指定すること』
この考え方が重要になります。
セレクターをそのまま指定するのはNG
BootstrapはCSSフレームワークということで、コンポーネントの中からコピペで選んで、必要な部分のみ書き換えるという制作をしている人も多いかと思います。
しかし、その特徴ゆえか、普通にBootstrapを使用しないでフロントエンドページを作成する要領でいくとうまくいきません。
それでは、どうするか。
最も簡単な方法としては、セレクターに対してid指定してしまうことです。
更に詳細に指定するためにid もしくは classをつける
Bootstrapで作り込まれているCSSは、すでに作り込まれてしまっているので、同じく自分で用意したCSSからh1やdivなどを指定したとしても反映されない状況になります。
これは、『Bootstrapで既に作成されているCSSがの優先順位が高い状態になっている』という現象が発生しています。
idやclassを追加で指定することによって、CSSの適応先を詳細指定していることになり、Bootstrapで作成されているCSSでよりも優先度が高くなる。
よって、自分で作成したCSSがBootstrapのCSSに勝って、独自のスタイルが適応されるという仕組みになっています。
//変更前
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>テストテキスト</h1>
</div>
</div>
</div>
//変更後
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="display-4 white-text" id="main_title">テストテキスト</h1>
</div>
</div>
</div>
このように指定する事で、h1のスタイルを自由に変更できるようになります。
実際にCSSをが反映されているか確認
殆どの場合は、ここまでの手順でCSSを反映させることが出来ると思います。
しかし、中にはどんなに詳細に指定したとしても反映されない部分もあるので、更に1階層下げてidやclassを付けても上手く反映されない場合は、一度諦めたほうがいいかもしれません。
恐らくimportant指定等が入っていて、上手く反映されない部分に当たってしまっている可能性があるので、スタイルに妥協をするか別の方法を考えて、該当する部分を完成させたほうが時間削減につながると思います。
Bootstrapは便利だけど、融通が聞かない部分もある
BootstrapのCSS適応についてお伝えしましたが、Bootstrapは便利にフロントエンドページを作成できる分、細かなスタイルを追加で適応させたいと考えたときには、少し面倒な部分が出てきてしまいます。
今回はCSSでしたが、これはJavaScriptやjQueryのセレクター指定の部分でも同じくと考えていただければ大丈夫です。
Bootstrap本来の使い方としては、『準備されたコンポーネントをそのまま使用して、整ったレイアウトのサイトを作成する』という概念だと思うので、その仕様を考えると細かなレイアウトを指定するのは概念に反しているということになります。
HTML同様Bootstrapも突き詰めると奥が深いものになると思うので、このような小さな問題の解決を重ねて、より早く整ったフロントページを作成出来るようになりましょう。