【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の記述による優先順位についてのまとめでした。

関連記事

【リリース】新サービス「プロモーションビデオ制作」

サービス内容に新しく「プロモーションビデオ制作」が加わりました。インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベン...続きを読む

2015.02.16

【WP】WordPress5.0の編集エディターを旧バージョンに戻す方法

WordPressのバージョンが、これまでの4.0の系統から5.0系統の最新版へのリリースとなりました。 安全性やバグの修正はもちろんですが、今回、5.0系統の最新リリースで大きく変わったのが投稿時の編集エディターとして「Gutenberg」が標準採用されたことだと思います...続きを読む

2019.02.13WordPress

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー

【デザイン】HTML5を使用したアニメーションサイト

HTML5より新しく登場した「Canvas」などによって、AdobeのFlashのような動的な2次元グラフィックを、HTML形式ファイルをベースに制作することができるようになりました。 今後、デザインとして設計されるのはもちろん、アニメーションやゲーム、WEBアプリケー...続きを読む

2015.02.16インスピレーション

【フォト】港町焼津の新年の漁船・大漁旗・富士山

静岡県焼津市では新年三ヶ日になると、漁船に大漁旗が掲げられた姿をみることができます。色とりどりの大漁旗が晴天の青空にとても映えます。天気の良い日は富士山と一緒にみることもできます。 フォトギャラリー ※写真をクリックすると拡大表示します。[gallery link="fi...続きを読む

2017.01.03フォトギャラリー