こんにちは、webエンジニアのtakaです。
webサイトをコーディングしている時「あれmargin設定したのに効いていない？別のcssで既にmarginしてあるじゃん」なんて思うことありませんか？
今回はCSSの優先順位の話と、どうすればうまくCSSを設定できるかについて記載していきます。
目次
そもそもCSSとは？
CSSの優先順位の話なのに、「そもそもCSSとは？」という見出しとはどういう了見だ！と怒るかもしれませんが、大切なことなので冒頭に書かせていただきます。
CSSとは何の略かご存知ですか？
・・・
「Cascading Style Sheets（カスケーディング スタイル シート）」の略です。
後半の「Style Sheets」は何となく意味がわかりますね。
HTMLに文字色や大きさなどのスタイルをあてますという意味です。
それでは、前半の「Cascading」はわかりますか？
「Cascading」とは、「階段状に連続する滝」「連鎖的に伝わる」という意味です。
こんなイメージですね。
上流で定義されたスタイルがどんどん下流に引き継がれ適用されていくというのが、CSSの最大の特徴なのです。
確かに言われてみれば、親要素に指定したbackgroud-color、font-sizeやtext-alignなどは子要素に引き継がれますね。
また複数のスタイルの指定があるときに、予め決められた優先度のルールによって、優先度が一番高い指定のみが有効になる仕組みを「カスケード処理」 といいます。
今回はこの優先順位について深掘りしていきます。
外部スタイルとインラインスタイルの優先度
HTMLファイルにCSSを適用させるには複数の方法があります。
外部スタイルで読み込ませる方法
htmlファイルのタグ内に以下のようにlinkタグを利用することで外部のcssファイルを読み込むことができます。
// HTML
<head>
<link rel="stylesheet" href="common.css">
</head>インラインスタイルで読み込ませる方法
<body>
<div style="background-color: red">
赤背景のdiv
</div>
</body>linkタグによる外部スタイルの優先度が最も低く、インラインスタイル（htmlタグのstyle属性）が最も優先度が高くなります。
以下の例では、外部ファイルのbackgroud-color: blue;よりもインラインスタイルのbackgroud-color: red;が優先されます。
// HTML
<head>
<link rel="stylesheet" href="common.css">
</head>
<body>
<div class="wrapper" style="background-color: red;"> // インラインスタイルは優先度が高い
赤背景のdiv
</div>
</body>// common.css
.wrapper {
background-color: blue; // 外部ファイルは優先度が低い
}tips!
レスポンシブサイトの場合に利用するメディアクエリは、インラインスタイルで書かないので基本的には外部サイトにCSSは記載しよう
記載順
CSSはファイルの上から読み込まれるので、同じセレクタの記載があれば、ファイルの下側に書いてあるものを優先します。
.wrapper {
background-color: blue;
}
.wrapper {
background-color: red; // ファイルの下側が優先される
}外部ファイルの場合
外部ファイルに記載がまたがっていても下側のものが優先されます。
// index.html
<head>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="single.css">
</head>// common.css
.wrapper {
background-color: blue; // 優先されない
}// single.css
.wrapper {
background-color: red; // 優先される
}tips!
初期化のためのreset.cssやサイト全体に適用させたいcommon.cssはファイルの上で読み込み、特定のページ専用のcssは下側で読み込むようにしよう
詳細度
明確に優先順位を決定するために「詳細度」というものがあります。
| セレクタ | 詳細度 |
|---|---|
| 全称セレクタ（*） | 0 |
| タイプセレクタ疑似要素 1つにつき（p div など） | 1 |
| クラスセレクタ（.wrapper .news_list など） | 10 |
| IDセレクター（#topButton #modal など） | 100 |
| htmlタグのstyle属性（＜div style=”color: red;”＞ など） | 1000 |
!importantは使わない
!importantを利用することで、詳細度を無視してスタイルを当てることができますが。
基本的に!importantは利用しないでおきましょう。
もし!importantを利用した場合
一度!importantを利用しスタイルを当てます。
時が経つと!importantが利用されている箇所を、修正したくなることが必ず出てきます。
当時は修正が入ることがないと言っていたとしてもです。
その時には、!importantが利用されているclassは複雑に絡み合い、容易なことでは紐を解く事ができなくなっています。
面倒になり、さらに!importantで上書きすると最悪です。
そのコードは腐敗していく一方です。
!importantの使用方法
一応使い方を紹介します。
!importantを適応したいスタイル宣言の一番後ろに追記します。
.wrapper {
background-color: blue !important;
}
.wrapper {
background-color: red;
}tips!
セレクタ（下の例では「wrapper」）の後ろは半角スペース開けておこう。
.wrapper{ // NG 半角スペース開けていない
background-color: blue;
}
.wrapper { // OK 半角スペース開けている
background-color: blue;
}bootstrapの中身を見ると!importantを利用している記述を確認できますが、そのようなプラグイン内の利用は良いです。
まとめ
いかがでしたか？
CSSの優先順位についてこの記事では記載しました。
優先順位があっていてもうまくCSSが効かない場合は、スペルミスやcssファイルを読み込めていないとか、親クラスが邪魔していたとか他に原因があると思います。
わからなかったらtwitterのDMで軽く相談してみてください。
それでは良い開発ライフを！！