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

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

Bootstrapでコンテンツを中央寄せするcontainerの役割を覚えよう！

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

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

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

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

ジャンボトロン修正箇所の確認
h1の文字色を変えてみよう
1. 変化しないのはCSSの優先順位計算のせい
Bootstrapの指定をそのまま上書きすると、使い回せない
自作のクラスを足して解決
連載目次：初心者向け！Bootstrapで簡単レスポンシブサイト制作

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

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

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

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

<!--　▼ ジャンボトロン　 -->
    <div class="jumbotron">
      <div class="container">
        <h1>見出しテキストテキスト</h1>
        サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
      </div>
    </div>
<!--　▲ ジャンボトロン　 -->

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

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

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

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

<style type="text/css"><!--
/*ここに調整CSS記述*/
　.jumbotron { background:url(main.jpg) center no-repeat; background-size: cover;}
　h1{color: #FFF;}
--></style>

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

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

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

<style type="text/css"><!--
/*ここに調整CSS記述*/
　.jumbotron { background:url(main.jpg) center no-repeat; background-size: cover;}
　.jumbotron h1 { color: #FFF;}
--></style>

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

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

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

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

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

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

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

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

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

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

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

jumbotronにクラスを足す

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

<!--　▼ ジャンボトロン　 -->
    <div class="jumbotron">
      <div class="container">
        <h1>見出しテキストテキスト</h1>
        サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
      </div>
    </div>
<!--　▲ ジャンボトロン　 -->

<!--　▼ ジャンボトロン-赤　 -->
    <div class="jumbotron red">
      <div class="container">
        <h1>見出しテキストテキスト</h1>
        サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
      </div>
    </div>
<!--　▲ ジャンボトロン-赤 -->

CSSは以下になります。

<style type="text/css"><!--
/*ここに調整CSS記述*/
 .jumbotron { background:url(main.jpg) center no-repeat; background-size: cover;}
 .jumbotron h1{color: white;}
 .jumbotron p{color: white;}

/*ジャンボトロン-赤の指定*/
 .red h1{color: red;}
 .red p{color: red;}
--></style>

★　結果

上のジャンボトロンは「.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スタイルの記述順序を入れ替えると、下のジャンボトロンの文字色は赤になりません。

<style type="text/css"><!--

/*ジャンボトロン-赤の指定*/
 .red h1{color: red;}
 .red p{color: red;}

/*ジャンボトロンの指定*/
 .jumbotron { background:url(main.jpg) center no-repeat; background-size: cover;}
 .jumbotron h1{color: white;}
 .jumbotron p{color: white;}

--></style>

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

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

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

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

<!--　▼ ジャンボトロン　 -->
    <div class="jumbotron">
      <div class="container">
        <h1>見出しテキストテキスト</h1>
        サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
      </div>
    </div>
<!--　▲ ジャンボトロン　 -->

<!--　▼ ジャンボトロン-赤　 -->
<div class="red ">
    <div class="jumbotron">
      <div class="container">
        <h1>見出しテキストテキスト</h1>
        サブテキストサブテキストサブテキストサブテキストサブテキストサブテキスト
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
      </div>
    </div>
</div>
<!--　▲ ジャンボトロン-赤 -->

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

<style type="text/css"><!--

/*ジャンボトロン-赤の指定*/
 .red .jumbotron{ background:#000;} 
 .red .jumbotron h1{color: red;}
 .red .jumbotron p{color: red;}

/*ジャンボトロンの指定*/
 .jumbotron { background:url(main.jpg) center no-repeat; background-size: cover;}
 .jumbotron h1{color: white;}
 .jumbotron p{color: white;}

--></style>

結果はこうです。

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

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

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

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