ほんっとにはじめてのHTML5とCSS3：【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）

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

最終更新日：2017年11月13日　（初回投稿日：2015年08月10日）

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

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

本日のINDEX

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

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

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

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

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

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

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

まず CSSのメディアタイプの指定があるか調べ、あればそれを最優先にする
HTML内の<link>要素、<style>要素の「media属性」や、CSS内の @media や @import にメディアタイプがあれば、そっちのスタイルを優先します。（メディアタイプによるCSSの切り替えがあれば、ブラウザは真っ先にそのスタイルを使うんですね。そうじゃないとメディアクエリが効かなくて大変だもんね。）＊外部参考サイトあり
メディアタイプ指定がないなら、出どころ（origins）による優先度 で順位決定
2で選んだ中で、セレクタの詳しさ（specificity）による優先度 で順位決定
それでも優先度が同じなら、書いた順番による優先度 で決定
別格なのは、インライン で書かれた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;}

もしも、この<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つ並べて（足すんじゃなくて並べるだけ）、詳細度を表すんだって。

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

この計算方法で優先順位を計算するとこうなる...っていうのをやってみました。
（さきほどの 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>
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）のルール を見てみましょう。

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-13（Mon）│
投稿日：2015-08-10（Mon）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿