【4】CSSの優先度のルール(ブラウザが混乱しないためのルールだよ)

CSSのカスケーディングとは、「優先度の処理の仕方」でしたね。
(詳しくは→【1】CSSってどんなもの? カスケーディングって何?

優先度のルールが無いと、ブラウザがどのスタイルを表示するべきか、混乱するから。
今回はその優先度のルールについて見てみましょう。

本日のINDEX
  1. 優先度のルールは「値」をチョイスするためのもの
  2. ブラウザが真っ先に優先するのは、メディアタイプ指定
  3. 出どころ(origins)による優先度
    1. !importantがついた値があれば、優先度が変わる
    2. !important 宣言 の書き方と、使いどころについて
  4. セレクタの詳しさ(specificity)による優先度
    1. セレクタを詳しく書けば書くほど、優先度が上がる
    2. セレクタの詳細度の計算方法
  5. 書いた順番による優先度
  6. インラインで書かれたCSSが最強

優先度のルールは「値」をチョイスするためのもの

CSSの基本構文は、セレクタ { プロパティ : } というカタチでしたね。
CSSの 優先度のルール は、この 1つ1つの を細か〜くチョイス するためのもの。

ブラウザは、同じ要素同じプロパティなのに値が違うのを見つけたとき、
優先度のルールを使って値をチョイスします。
それをHTML上の1つ1つの要素全部に対してやってるの。ご苦労さんだよね...w。

例えば、body { color:#000 } って指定と、body { color:#666 } があるとき、
さて、どっちの文字の色を使うか?(#000 か #666 か)
それを決定するのが優先度のルールです。

ブラウザが真っ先に優先するのは、メディアタイプ指定

ブラウザが優先順位を決めていくには 段取りがあります
こんな手順で スタイルの優先度を調べていきます。

  1. まず CSSのメディアタイプの指定があるか調べ、あればそれを最優先にする

    HTML内の<link>要素、<style>要素の「media属性」や、CSS内の @media や @importメディアタイプがあれば、そっちのスタイルを優先します。(メディアタイプによるCSSの切り替えがあれば、ブラウザは真っ先にそのスタイルを使うんですね。そうじゃないとメディアクエリが効かなくて大変だもんね。)*外部参考サイトあり

  2. メディアタイプ指定がないなら、出どころ(origins)による優先度 で順位決定
  3. 2で選んだ中で、セレクタの詳しさ(specificity)による優先度 で順位決定
  4. それでも優先度が同じなら、書いた順番による優先度 で決定
  5. 別格なのは、インライン で書かれたCSS。3〜4の優先度を無視して最強です。

ブラウザは思ったより複雑な仕事をしているんですね。
基本的には 書いた順番(ブラウザが読み込む順番)で優先度が決まると思っていいんだけど、それ以前に セレクタの詳しさCSSの出どころで優先順位が決まってたら、いくら後で書いていても負けちゃうってわけ。上記の段取りはぜひ覚えておこう。

*外部参考サイトあり
CSSのメディアタイプについてはこちらをご参考に。
・<link>要素の「media属性」→[42-2] link media=" " で 外部CSSをメディア別に切り替えよう
・<style>の「media属性」→[43] style で CSS を HTML内に書いてみよう
・@media, @import →(ちょっとメモ)link よりスマートな CSSの @import と @media

メディアクエリ(デバイスごとにCSSを切り替える)については、こちらをご覧ください。
MediaQueriesとviewportは一緒じゃないと無意味│*Web Design 覚え書き*
Media Queriesの条件分岐とブレイクポイントについて│*Web Design 覚え書き*

それでは、
「出どころ(origins)」 「セレクタの詳しさ(specificity)」 「書いた順番」 による優先度がどんなものか見ていきましょう。

出どころ(origins)による優先度

まずは 出どころ(origins)(=誰が書いたか)による優先度の決定が行われます。
CSS には以下の3つの origins があります。

  • 作成者のスタイル:HTML文書に記述されたCSSってこと。自分で書くヤツね。
  • ユーザースタイル:ユーザーがブラウザ上で設定したスタイルです。
  • ブラウザのデフォルトスタイル:どんなブラウザもデフォルトスタイルがあります。

優先度はこのようになってます。
作成者のスタイル>ユーザースタイル>ブラウザのデフォルトスタイル

!important がついた値があれば、優先度が変わる

ですが、ここで !important がついたがあれば、優先度はちょっと入れ替わります。
!important がついたユーザースタイルの値が、トップに躍り出るのよ。
!importantつきユーザースタイル>!importantつき作成者のスタイル>作成者のスタイル>ユーザースタイル>ブラウザのデフォルトスタイル
ユーザがわざわざ !important まで付けたスタイルを上書きするな、というユーザビリティの理論ですね。ユーザの事情ってもんがあるのでね。

!important 宣言 の書き方と、使いどころについて

!important 宣言「他よりも重要(最優先)な値」にする宣言です。
(先頭に「!」が付いてるので、PHPとかやってると否定なのかと思うけど、肯定なんですね...。)
書き方は、値の直後に !important と記述するだけ。

a {text-decoration:underline !important;}

で、上の優先順の図だけ見ると、!important を使ってもあんまり意味が無い気がしますね。
つけなくても自作のスタイルが最強だし。つけてもユーザの !important には負けるけど、それに別に勝ちたくないし。
でもこれは「自分・ユーザ・ブラウザ」の3者競合のときだけの話。
そうじゃない場合もある。
例えば、
・CMS的なモノでサイトを作ってるとき(ブログとか、楽天などのカートシステムとか)
・WordPressのプラグインを使ってるとき
・jQueryなどのライブラリを使ってるとき
それらの場合、HTML上に自動でCSSが書きだされるコトがありますよね。

そういう自動出力のスタイルって、自分で書いてないけど「作成者のスタイル」として書きだされるのね。
そして、たいていは、
・<head>部分の1番最後に <style>要素で書きだされる。
・HTML要素に直接インラインで(style属性を使って)書きだされる。
といった具合で、順番による優先度が高くなるように書かれます。

それをどうしても上書きしたい時こそが、!important の使いどころです。

!important を付けると、この後で説明する「セレクタの詳しさによる優先度」や「書いた順番による優先度」を無視して優先順位がトップになります。インラインで書かれたものにも勝つ。
同じ「作成者のスタイル」の中でなら最強なんです。
ですので、自分のスタイルの値に !important を付ければ、後で何を書かれようが、優先度で勝てるはず。(ただし、自動で書きだされるスタイルのほうにも !important が付いてたら、負けることもあるけどねw)

こんな「ここぞという時」以外は、あまり使わないかな。!important 。
優先度のルールを理解していれば、普段あまり使うこともない 必殺ワザ です。
意味も無くテキトーに使ってると、後で収拾がつかなくなる。
!important の普段使いはヤメといたほうがイイですよ。

セレクタの詳しさ(specificity)による優先度

セレクタの詳細性(specificity)によって優先度が決まります。
まずその前に、「どんなセレクタか」によって以下のように順位が決まっています。
idセレクタ>classセレクタ>要素セレクタ>*(全称セレクタ)
idセレクタ、classセレクタ、要素セレクタなどについては、↓こちらをご参考に
【3】id とか classって何?(セレクタの「種類」を知っておこう)

セレクタが詳しければ詳しいほど、優先度が上がる

上記のルールに加えて、
セレクタが詳しければ詳しいほど、優先度が上がるルールがあります。
セレクタって「要素」を指定するものだから、その「要素」についての記述が詳しいほど、その要素が特定される。ターゲットが絞り込まれるってことです。

例えばこんなHTMLソースがあったとして、

<div id="top_index">
  <ul class="index_list">
    <li class="special">スペシャルメニュー</li>
    <li>メニュー1</li>
    <li>メニュー2</li>
  </ul>
</div>

「スペシャルメニュー」の文字だけ赤くするには、

.special {color:red;}

だけでもイイんですが、もっと絞り込むなら、ほかにこんな書き方もありますね。

ul li.special {color:red;}
ul.index_list li.special {color:red;}
div ul.index_list li.special {color:red;}
div#top_index ul.index_list li.special {color:red;}
body div#top_index ul.index_list li.special {color:red;}

上のCSSソース、下にいくほど詳しくなってます。で、詳しいほど優先度が上がるんです。

もしも、この<ul>の <li>全部が、
div#top_index ul.index_list li {color:gray;}
とめっちゃ詳しい指定になっていたら。
ul.index_list li.special {color:red;}
じゃ勝てない。文字はグレイのまま。赤くなりません。
div#top_index ul.index_list li.special {color:red;}
と詳細さを合われば、やっと優位に。li.special の文字は赤くなります。

セレクタの詳細度の計算方法

詳細度の計算方法があるので、紹介しておきます。
いちいち計算しなくてもパッと見で詳しさはわかるけど、一応豆知識として書いておきますね。
(コチラを参考にしています→ W3C の Cascading, and Inheritance

下のA,B,C,D の数字を4つ並べて(足すんじゃなくて並べるだけ)、詳細度を表すんだって。

  1. 要素に直接 style属性でスタイルを書いてたら「1」そうじゃなきゃ「0」
  2. セレクタ内の idセレクタの数
  3. セレクタ内の class属性(classセレクタ)、擬似クラス、その他の属性の合計数
  4. セレクタ内の 要素名、擬似要素の合計数

この計算方法で優先順位を計算するとこうなる...っていうのをやってみました。
(さきほどの class="special" の<li>要素で試しています)
下にいくほどセレクタが詳しくなり、優先度がアップします。

* {color:red}
A=0、B=0、C=0、D=0 で、優先度:0 (全称セレクタはまったく最弱ですね)
li {color:red}
A=0、B=0、C=0、D=1 で、優先度:1 (要素1つだけだとこんなに弱いんだね)
li::first-line {color:red} (::first-line は擬似要素なので D でカウント)
A=0、B=0、C=0、D=2 で、優先度:2
.special {color:red}
A=0、B=0、C=1、D=0 で、優先度:10 (classをつけると上がりますね)
li.special {color:red}
A=0、B=0、C=1、D=1 で、優先度:11
ul li:first-child {color:red} (:first-child は擬似クラスなので C でカウント)
A=0、B=0、C=1、D=2 で、優先度:12
ul li.special {color:red}
A=0、B=0、C=1、D=2 で、優先度:12 (classと擬似クラスの強さは同じ)
ul.indexList li.special {color:red}
A=0、B=0、C=2、D=2 で、優先度:22
div ul.indexList li.special {color:red}
A=0、B=0、C=2、D=3 で、優先度:23
div#topIndex ul.indexList li.special {color:red}
A=0、B=1、C=2、D=3 で、優先度:123 (お、id入ると急にグッと上がるね)
body div#topIndex ul.indexList li.special {color:red}
A=0、B=1、C=2、D=4 で、優先度:124
<li style="color:red"> (これは<li>要素に直接インラインでスタイルを書いた場合)
A=1、B=0、C=0、D=0 で、優先度:1000 (やっぱインラインが最強か)

書いた順番による優先度

これはカンタンですね。後から書いたものが優先されます。
後で書いたほう = ブラウザが後で読み込むほうが優先。ブラウザは上から下へ読むので。

HTMLファイルに<style>要素で書いたCSSの中や、外部CSSファイルの中では

同じセレクタ(の優先度)で同じプロパティなら、下に書いたほうが優先。
下に書いたほうが上に書かれたスタイルを上書きします。

HTMLファイルに<link>要素で読み込んだ外部CSSファイルでも

後で指定されたファイルの内容のほうが優先。
例えば、このように複数の外部ファイルを読み込んでいたら、

<head>
<link rel="stylesheet" href="css/layout.css" >
<link rel="stylesheet" href="css/layout2.css" >
</head>

layout.css と layout2.css の中に、同じセレクタ(の優先度)で、同じプロパティの指定があれば、後で読み込まれる layout2.css 内のスタイルが優先されます。

インラインで書かれたCSSが最強

セレクタの詳しさ(specificity)よりもインライン(要素に「style属性」で直接スタイルを書く)で書かれたCSS が強いんですが、
書いた順番でも インライン で書かれたCSSのほうが強いんです。
同じ origins の中ならインラインが最強というわけです。

ちょっと実験してみましょう。
要素にインラインで指定をした下に、<style>要素で他のスタイルを指定してみます。
ブラウザは、文書的に後に書いてある<style>要素のほうを優先するでしょうか?

<div>
<p style="color: red">インラインで文字を赤(red)に指定</p>
<p>インラインでの指定はしていません。</p>

<style scoped>
div {padding: 1em;  border: solid 1px #ccc;}
div p {color: blue; margin: 0;}
</style>
</div>

プレビューはこちら。

インラインで文字を赤(red)に指定

インラインでの指定はしていません。

インラインで「style="color: red"」と指定した<p>要素は、そのまま redで表示。その後で書かれた<style>要素のほうは無視です。...インライン、恐るべし。

インラインが最強ですが、「HTML文書とCSSを分ける」ことをW3Cが推奨しているので、多用しないのがお約束。
後で編集するとき苦労ってこともあるし。 よく使うスタイルなら、ちゃんとCSSにまとめておくのがベストです。

ただし、インライン最強説を覆す存在が !important なのね。
プレビューはこちら。

インラインで文字を赤(red)に指定

インラインでの指定はしていません。

<div>
<p style="color: red">インラインで文字を赤(red)に指定</p>
<p>インラインでの指定はしていません。</p>

<style scoped>
div {padding: 1em;  border: solid 1px #ccc;}
div p {color: blue !important; margin: 0;}
</style>
</div>

次回予告

例えば、ある要素に font-weight: bold; と指定をしたら、その要素の中の全ての要素は、特に指定していなくても 文字が太く(ボールドに)なります。
これは、font-weight プロパティに継承性があるから。

継承性の無いプロパティの値を強制的に継承させる「inherit」という値もあるので、知っていると便利です。
ということで、次回は CSSの値の継承(Inheritance)のルール を見てみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.