でも
でも結果は変わりません。, しかし、下記のように、CSSスタイルの記述順序を入れ替えると、下のジャンボトロンの文字色は赤になりません。, 「.red」の指定が後述の「.jumbotron」で上書きされてしまうからですね。, さぁ、2つ目の方法です。先程はjumbotronを指定したdivにオリジナルクラス「red」を追加しましたが、今度は「red」を指定したdivでジャンボトロン全体を囲ってしまいます。やってることは単純ですが、CSSの優先順位について、ちょっと入り組んだ説明をしますので、ついてきてくださいね。, まずはHTMLです。上に通常のジャンボトロン、下に「red」クラスを指定したdivで囲ったジャンボトロンを配置しています。, 次にCSSはこちら。オリジナルクラス付きの方を先に書いています。背景色も画像ではなく黒にしてみました。,
で囲ったものと囲わないものとでスタイルの分離ができていますね。このようにBootstrapのパーツを複数使用する場合には、オリジナルのクラスを足して指定を分けていくというやり方があります。, さて、上記の「redクラスで囲んだジャンボトロン」にたいするCSSスタイル指定ですが、先に赤ジャンボトロン、後に通常ジャンボトロンを記述していますね。, CSSの上書きルールからすると、赤ジャンボトロンの指定は通常ジャンボトロンの指定に上書きされそうなものですが、この場合は別ルールが適用されます。(ややこしい!) 最近Bootstrapを使う機会が増えたので、カスタマイズする上で知っておきたい考え方を紹介します。 今回は特にCSSについてのお話です。 目次Bootstrapのカスタマイズパターンどのカスタマイズパターンが … 複数箇所でスタイルを指定すると、同じプロパティに異なる値が指定されてスタイルが競合することも起こりえます。こうした場合には、よりタグに近いところで指定されたスタイルや、より後から読み込まれたスタイルが優先されて、プロパティの値が上書きされます。 例えば、外部CSSファイルの指定では文字色を赤く、