こんにちは、@codeship_techです。
今回はCSSやBootstrapを使用していて、よくあるデザインが反映されない問題についての質問があったのでピックアップしました！
皆さんもしっかり覚えておきましょう！
手元のCSSを書き加えたのに適用されません。
文法も間違っていないのに、何が問題なのでしょうか。
より優先度の高いCSSがどこかに記述されているのだと思います。
またBootstrapなどのフレームワークを採用していたら、!important句でスタイルを強制されている可能性が高いです。
CSSの優先度
CSSは複数箇所で同じタグに対し、競合した内容を書けてしまいます。
例えば以下のように。
p{
color:red;
}
p{
color:blue;
}この場合、pタグのスタイリングはどうなるのでしょうか。
CSSには、競合するスタイリングをしたときにどのスタイリングが採用されるかの基準である「優先度」が存在します。
CSSは(同じ詳細度なら)より後ろに記述したスタイリングを適用するので、color:blueが適用されます。
次に位置によらない「タグへのセレクタの指定の度合いの詳しさ」である「詳細度」が関係します。
全称セレクタ＜タイプセレクタ＜クラスだけ＜クラスと要素＜id＜idと要素＜!importantを付加したプロパティの順で、右に行くほど詳細度は高くなっていき、最も詳細度の高いスタイリングが適用されます。
CSSを以下のようにしたとき
/*要素を特定したidセレクタ*/
p#hoge {
color: red;
}
/*要素を特定しないidセレクタ*/
#hoge {
color: blue;
}
/*要素を特定したclassセレクタ*/
p.fuga {
color: yellow;
}
/*要素を特定しないclassセレクタ*/
.fuga {
color: green;
}
/*タイプセレクタ*/
p {
color: orange;
}
/*全称セレクタ*/
* {
color: purple;
}< !--p要素にはid属性とclass属性を同時に指定する--><p id="hoge"class="fuga">何色になる?</p>HTMLの文字色は、最も詳細度の高い「idと要素」のスタイリングである赤色が適用されます。
なお、前述の通り同じ詳細度のセレクタ同士ならCSSファイルのより後ろに書いたものが、またHTML内で後に読み込んだものが優先されます。
よって、質問のような状況では「より詳細度の高い指定が既に他の場所に記述されてしまっている」ことがまず考えられるので、タグに適用されているCSSを全て確認してみましょう。
タグに適用されているスタイリングは、Chromeブラウザならコンソール画面→Stylesメニューから確認できます。
!important
!important句は、セレクタの詳細度や位置に関わらず「プロパティを最優先で変更する」命令です。
以下のように詳細度の最も低い全称セレクタに書いたプロパティでさえ、最優先で適用させることができてしまいます。
* {
color: black !important;
}!important句とフレームワーク
もしサイトにBootstrapやMaterializeなどのCSSフレームワークを採用している場合には、オリジナルスタイルの扱いが難しくなります。
なぜならこういったフレームワークは、「フレームワーク側のソースコードでスタイルを!important句を用いて固定している」ことが多いためです。
こちら側から通常の方法で競合するスタイリングをしていては、フレームワーク側のスタイリングが優先されてしまいます。
解決策としては
- オリジナルスタイリング側でも
!important句を使う - フレームワークを採用しない
- フレームワークを(CDNではなくダウンロードして使うことを前提に)改造し、
!importantの記述を取り除く - フレームワークのスタイリングに従い、オリジナルのスタイリングを諦める
方法があります。
2,4が初学者向きの解決策ですが、どうしてもフレームワークとオリジナルスタイルを共存させたいのであれば1または3を検討しましょう。
授業日記についてのご意見
CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。
