CSS

【Bootstrap】 CSSが反映されないときの対処法

スポンサーリンク

【Bootstrap】 CSSが反映されないときの対処法

 

BootstrapでCSSを適応させようとしたのに、上手く指定した内容が反映されない。

 

どうしたらいいのかわからなくて、手が止まってしまっている状況を解決します。

 

こんにちは、誠太です。

 

今回の話題は、Bootstrapに自作のCSSを適応させるための方法について解説します。

 

【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は便利だけど、融通が聞かない部分もある

 

BootstrapのCSS適応についてお伝えしましたが、Bootstrapは便利にフロントエンドページを作成できる分、細かなスタイルを追加で適応させたいと考えたときには、少し面倒な部分が出てきてしまいます。

 

今回はCSSでしたが、これはJavaScriptやjQueryのセレクター指定の部分でも同じくと考えていただければ大丈夫です。

 

Bootstrap本来の使い方としては、『準備されたコンポーネントをそのまま使用して、整ったレイアウトのサイトを作成する』という概念だと思うので、その仕様を考えると細かなレイアウトを指定するのは概念に反しているということになります。

 

HTML同様Bootstrapも突き詰めると奥が深いものになると思うので、このような小さな問題の解決を重ねて、より早く整ったフロントページを作成出来るようになりましょう。

 

オススメ記事【Udemyが強い!】Web制作を独学で学べる講座はひとつあれば事足りそう

オススメ記事プログラミングの本は学習に必要だけど、本だけではキツいというお話【体験談】

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  ブログのSEO対策はいろんな情報があって、何が正しい対策なのかわからない場合が多く困ってしまいませんか?   本記事では、今回紹介するSEO対策を行い上位表示を確認できたことを ...

5

  誠太こんにちは、誠太です!   はてなブログをお使いのあなたにお伝えしなければいけないことがあります。 はてなブログから『はてなブログPro』に移行するのはやめましょう。 &n ...

-CSS
-

Copyright© SEITALITY , 2019 All Rights Reserved.