【CSS】スタイルシートが適用される優先順位について

priority-level-css-declaration

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。

そうなると、同じ名前の宣言で異なる値を与えてしまい意図しない結果になってしまうことも考えられます。

そこで、CSSを記述する上でCSSの設定内容がどのように反映されるのか優先順位に着目してまとめてみました。

最後に読み込まれるほうが優先順位が高い

同じ条件化で宣言された場合、最後に読み込まれるほうの設定が優先されます。記述例の場合は、文字サイズは「font-size: 10px;」が適用されます。

/* CSS記述例 */
.example {
	font-size: 20px;	
}
.example {
	font-size: 10px;	
}

詳細に宣言されているほうが優先順位が高い

要素や親子関係など詳細に記述されてるほうが優先度が高くなります。最初の記述例では、P要素が宣言されている「p.example」の内容が読み込まれる順番よりも優先されます。

/* CSS記述例-その1- */
p.example {
	font-size: 20px;	
}
.example {
	font-size: 10px;	
}
<!-- 表示側HTML-その1- -->
<p class="example">文字サイズは20pxになります。</p>
<span class="example">文字サイズは10pxになります。</span>

親要素がある場合も、読み込まれる順番より詳細度が優先されて反映されます。

/* CSS記述例-その2- */
.container p.example {
	font-size: 20px;	
}
p.example {
	font-size: 10px;	
}
<!-- 表示側HTML-その2- -->
<div class="container">
  <p class="example">文字サイズは20pxになります。</p>
</div>
<p class="example">文字サイズは10pxになります。</p>

重要指定ほうが優先順位が高い

「!important」が宣言されている場合、「!important」のほうが優先順位が高くなります。

/* CSS記述例 */
p.example {
	font-size: 20px !important;
}

p.example {
	font-size: 10px;	
}
<!-- 表示側HTML -->
<p class="example">文字サイズは20pxになります。</p>

いろいろ組み合わせてみたら

下記のような記述例の場合は、「!important」の内容が最も優先されて反映されます。

/* CSS記述例 */
.example {
	font-size: 10px !important;	
}
.container p.example {
	font-size: 20px;	
}
<!-- 表示側HTML -->
<div class="container">
 <p class="example">文字サイズは10pxになります。</p>
</div>

「!important」が付加している場合が最も優先順位が高くなります。

これまでの記述内容は、同じ宣言場所での記述による優先順位でしたが、今度は、外部のCSSなのか同一ドキュメント内なのかといった記述場所の違いによる優先度をまとめてみます。

記述場所の違いによる優先度

まずは、記述場所に関係なく「!important」が宣言されている内容が最も優先され、次に要素内で「style属性」が宣言されている場合が優先順位が高くなっています。

(優先順位高)

・「!important」が宣言されている

・要素内で「style属性」が宣言されている

・head要素内でスタイルの内容が宣言されている

(優先順位低)

/* CSS記述例 */
.example {
	font-size: 10px !important;	
}
<!-- 表示側HTML -->
<p class="example" style="font-size:30px;" >文字サイズは10pxになります。</p>

head要素内での記述について

head要素内でのCSSは外部のスタイルシートを読み込む場合と、直接style要素で記述する場合がありますが、この場合は後から読み込まれる内容が優先されます。

以前は、head要素内で直接記述された内容が外部スタイルシートよりも優先されるというような認識でしたが、今回、「Google Chrome 32」「firefox 26」「 Internet Explorer 11」でそれぞれ確認したら同等の扱いのようです。

@charset "utf-8";
/* 外部スタイルシート style.css */

.example {
	font-size: 10px;
}
<head>
<!-- 表示側HTML -->
<style type="text/css">
.example {
	font-size: 20px;	
}
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<p class="example">文字サイズは10pxになります。</p>
</body>
</style>

作成者スタイルシートとユーザースタイルシート

「作成者スタイルシート」は、制作者が記述したCSSの内容で実際にサーバ上などにあるCSSまたはHTMLの記述です。対して「ユーザースタイルシート」は閲覧するユーザーが使用しているブラウザに設定することができるCSSです。

一般的には作成者スタイルシートが優先されますが重要指定「!important」が付加しているとユーザスタイルシートが優先されます。

(優先順位高)

・ユーザスタイルシート中で重要指定「!important」された宣言

・作成者スタイルシート中で重要指定「!important」された宣言

・作成者スタイルシート中の通常の宣言

・ユーザースタイルシート中の通常の宣言

(優先順位低)

もしユーザー側で制作側とは異なる表示がされる場合は「ユーザスタイルシート」のことを確認してみるといいかもしれません。

以上、CSSの記述による優先順位についてのまとめでした。

関連記事

【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法

前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換(コンパイル)してCSSとして書き出してWEBサイトに組み込むことを...続きを読む

2019.05.16HTMLコーディング

【美容業界】マーケティングの参考になる統計情報

WEBサイトや販促ツールを制作するにあたり市場の動向を調べて取り掛かることがあります。ヘアサロン・エステサロンなど美容業界のお客様のお仕事させていただくことが多く、今回のブログではヘアサロンやエステサロンなどの美容業界のマーケティングに参考となる統計情報を発信しているサイトを...続きを読む

2015.02.17マーケティング

【デザイン】リアルの花を使った美しいイラストレーションの世界

今回は素敵だなと思ったアーティストさんの作品をご紹介します。表題のとおり、リアルの花や自然のものを使い、美しくかわいらしいイラストレーションの作品を手掛ける Lim Zhi Wei さん。シンガポールを拠点に活動されているアーティストです。 Lim Zhi Wei 彼...続きを読む

2015.02.16インスピレーション

Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。 主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成して...続きを読む

2015.03.09HTMLコーディング

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」のプログラムの案内人をしました。 お気に入りの着物を着て、春の蓮華寺池公園界隈を散策しながら、人物撮影のテクニックを学ぶことができる写真の講座と街歩きを合わせたプログラムを...続きを読む

2019.05.05フォトギャラリー藤枝