Bootstrapをカスタマイズしよう!CSS調整のコツはスタイルの優先順位だ!

★気に入ったらシェアをお願いします!


CUSTOMIZE

初心者向けBootstrapのご案内、連載5回目の記事です。
前回はcontainerというクラスが、コンテンツを中央寄せする為の枠の役割であることを解説しました。

Bootstrapでコンテンツを中央寄せするcontainerの役割を覚えよう!
Bootstrapでコンテンツを中央に配置する為のcontainer。レイアウトの際、多用するこのクラスについて、使用例や挙動などを詳しく解説しています。

今回は、Bootstrapをそのまま使用したのではイマイチになってしまう文字サイズやカラーの調整方法を、サンプルのジャンボトロン部分を使用して説明します。

今回はBootstrapの機能というより、CSSのお話がメインになります。

Bootstrapのデザインカスタマイズにチャレンジしたことがある方は、きちんとCSSを書いているのに意図した通りならなかった、なんて経験がありませんか?
 
これはBootstrapの問題ではなく、「CSSの優先順位」が原因であることが多いです。このルールを知らずにがんばっても思い通りのカスタマイズはできません。
 
CSSが苦手であったり、Bootstrapの使い方がイマイチわからないという方は、案外こういうところで躓いてらっしゃるのではないかなぁと思うので、できるだけ噛み砕いて説明しますね。

ジャンボトロン修正箇所の確認

それではまず、前々回に作製したサンプルページをご確認ください。ジャンボトロンは以下の画像のようになっています。

背景画像表示

現状では画像と文字の色がかぶりすぎて読みにくいですね。文字サイズも変えたいところです。
CSSを調整し、以下のように変更していこうと思います。

ジャンボトロン

現時点でHTMLソースは以下のようになっています。

h1の文字色を変えてみよう

CSSは同じスタイルを指定した場合、後から記述したものの方が優先されます。つまりスタイルを上書きできるんですね。

サンプルソースのheader部分を確認していただくと、BootstrapをCDNで読み込んでいる下に、自前のCSSの記述場所があります。こちらに記述したCSSでBootstrapのスタイルを上書きできる、ということです。

それでは早速「 h1 」の文字色を白に変更しましょう。
ジャンボトロンに背景を設定したときのように、自前のCSSを記述する場所にh1への指定を記入します。

さぁどうでしょう!変わってませんね!
 
なぜかといいますと、実はすでにジャンボトロン内のh1には、Bootstrap内で「.jumbotron h1 { color: #333; }」という指定がされているんです。そして「h1{color: #FFF;}」という記述では、これを打ち消す力が足りません。

※実際には「.jumbotron h1 { color: inherit;}」と指定されています。inheritは「親要素の値を継承する」という意味です。この場合は、bodyに指定されている color: #333; の値を引き継いでいます。

「h1{color: #FFF;}」を、「.jumbotron h1 { color: #FFF;}」と書きなおしてみてください。

h1を変更

見事、白文字に変更できましたね。

変化しないのはCSSの優先順位計算のせい

h1を後から上書きしたはずなのに、「.jumbotron h1 」という記述のほうが、「h1{color: #FFF;}」より効力が強い。これはCSSの「優先順位計算」によるものです。

CSSには各セレクタ(pやspan、名前をつけたclassやidなど全般)に点数が振られており、独自の計算法により合計点数が高い指定の方が有効となります。

ややこしいですね。このあたりをまだ把握されていない方は、現時点ではざっくりと以下の点だけを頭に入れていただきたいです。

● 自前CSSが反映されなかったら、BootstrapのCSSに負けている可能性がある。
● その場合はブラウザの検証機能などで、BootstrapのCSSを確かめる。
● BootstrapのCSS記述法と同じ書き方で、値を変更したものを自前CSS記述位置に書く

これで確実に、スタイル変更ができます。しかし…

Bootstrapの指定をそのまま上書きすると、使い回せない

上記の方法で確かにスタイルは変更できました。しかし、ジャンボトロンをもう一箇所使用したい、そこではh1の文字色を赤にしたい、なんて場合はどうしたら良いでしょうか。

2つのジャンボトロン

自作のクラスを足して解決

ここで必要になってくるのが、自作のクラスです。Bootstrapにはないオリジナルのクラスを駆使することで、柔軟なスタイル設定ができるようになります。方法はいろいろとありますので、わかりやすい例で説明しますね。

jumbotronにクラスを足す

同ページにジャンボトロンを2つ配置してみました。下のジャンボトロンの文字色を赤にするため、最初の「div」にjumbotronだけでなく「red」というオリジナルのクラスも追加しています。

CSSは以下になります。

★ 結果

2つのジャンボトロン

上のジャンボトロンは「.jumbotron h1{color: white;}」の指定が効いて、文字色が白ですね。
下のジャンボトロンは「 .red h1{color: red;}」の指定が効いて、文字色が赤になっています。

CSS決定の流れを説明すると、下のジャンボトロンでも一度「.jumbotron h1{color: white;}」が効いて文字色が白に設定されますが、後述の「.red h1{color: red;}」で上書き指定された、というイメージになります。

上書きルールのワンポイント

ここでの「後述」の意味は、「クラスにスタイルを指定した順序」を指しています。div要素に指定したクラス名の書き順序、ではありません。

具体的に言うと、<div class="jumbotron red">でも<div class="red jumbotron">でも結果は変わりません。

しかし、下記のように、CSSスタイルの記述順序を入れ替えると、下のジャンボトロンの文字色は赤になりません。

「.red」の指定が後述の「.jumbotron」で上書きされてしまうからですね。

オリジナルクラスのdivで囲む

さぁ、2つ目の方法です。先程はjumbotronを指定したdivにオリジナルクラス「red」を追加しましたが、今度は「red」を指定したdivでジャンボトロン全体を囲ってしまいます。やってることは単純ですが、CSSの優先順位について、ちょっと入り組んだ説明をしますので、ついてきてくださいね。

まずはHTMLです。上に通常のジャンボトロン、下に「red」クラスを指定したdivで囲ったジャンボトロンを配置しています。

次にCSSはこちら。オリジナルクラス付きの方を先に書いています。背景色も画像ではなく黒にしてみました。

結果はこうです。

オリジナルクラスで囲む

<div class="red ">~</div>で囲ったものと囲わないものとでスタイルの分離ができていますね。このようにBootstrapのパーツを複数使用する場合には、オリジナルのクラスを足して指定を分けていくというやり方があります。

セレクタの数と得点による、CSSの優先順位(再び)

さて、上記の「redクラスで囲んだジャンボトロン」にたいするCSSスタイル指定ですが、先に赤ジャンボトロン、後に通常ジャンボトロンを記述していますね。

CSSの上書きルールからすると、赤ジャンボトロンの指定は通常ジャンボトロンの指定に上書きされそうなものですが、この場合は別ルールが適用されます。(ややこしい!)
 
●「.red .jumbotron h1」のほうが、「.jumbotron h1」より強いんです。
●これは記述順序の上書きルールよりもっと強いルールなんです。

CSS初心者さんはここを押さえて頂きたい

さくっと整理してみましょう。

.red .jumbotron h1
.jumbotron h1

この順番で書いたスタイル2つだと、上のほうが強い。

ここまででざっくりと、「記述順序なんかより、セレクタ数が多いほうがなんか強いっぽい」というイメージをお持ちでしょうか。だいたい合ってます。

このページの最初の実践で、「h1{color: #FFF;}」が「.jumbotron h1 { color: #FFF;}」に負けたのも同じ理由ですね。

一度やったことをなぜ繰り返し説明したのかというと、CSSは「セレクタの合計点数による優先度」と「記述順序」という2つのルールが絡みあっている、ということを把握して頂きたかったからです。

実際作業をしていて「思い通りに設定できないな?」という場合、この辺りに原因があることが多いです。

今回のまとめ

さて、先述したセレクタ合計点数に関してですが、実は単純に「セレクタ数が多い方が強い!」というものでもありません。
classやidといったセレクタの種類によって点数が振り分けられており、計算方法も独特です。

そこで次回は「セレクタの合計点数による優先順位」について、もっと詳しく説明したいと思います。(記事作成しました!)

CSSトラブルを防ぐ!セレクタの優先順位をマスターしよう
CSSで特につまづく優先順位のルールについて例を用いてソフトに解説。セレクタ・詳細度・点数制がピンとこない方はこの記事で概要とポイントがわかります。wordpressテーマやフレームワークのカスタムの為にも知っておくべき知識です

なかなか独特の計算ルールがあるのですが、完璧に覚えなくても大丈夫です。
 
まずはざっくりとルールのイメージを掴んでいただくことを目標にしますので、ややこしそうだなぁと敬遠せずにチャレンジしてみてくださいね。

それでは次回も宜しくお願いします。

連載目次:初心者向け!Bootstrapで簡単レスポンシブサイト制作

  1. CSS初心者の強い味方!Bootstrapで簡単レスポンシブサイト制作
  2. CDNを利用して最速お手軽にBootstrap導入しよう!サンプル付き実践編
  3. Bootstrapで横幅いっぱいに画像を表示しよう!ジャンボトロン(jumbotron)の設置方法
  4. Bootstrapでコンテンツを中央寄せするcontainerの役割を覚えよう!
  5. Bootstrapをカスタマイズしよう!CSS調整のコツはスタイルの優先順位だ!
  6. Bootstrapでレスポンシブなカラム作成 ブレイクポイントとカラム数の指定方法をマスター
  7. 複雑なBootstrapカラムのコードはジェネレーターを使えば即マスター
  8. Bootstrapカラム間のマージン(余白)の仕組みをマスターする
  9. Bootstrapカラムのマージン(余白・ガター)を好きなサイズに調整するCSSの具体例

The following two tabs change content below.
くろゆき

くろゆき

九州の端っこでウェブ制作をしています。わりとなんでも屋さんです。「慣れない人にもやさしいIT」を信条にお仕事をさせてもらっています。Wordpressやbootstrap、CSS関連の記事をわかりやすく丁寧に書いていきたいです。