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

関連記事

【WP】アップロードするメディアフォルダをカスタマイズする

wordpressでは画像などのメディアファイルを投稿すると初期設定では「投稿年」「投稿月」のフォルダが作られ、そのフォルダ内にデータがアップロードされます。 コーポレートサイトとして運用しカスタム投稿や固定ページを多く使用するような場合はカスタム投稿やページ毎に分けて...続きを読む

2015.03.13WordPress

【デザイン】フォトグラファーポートフォリオサイト

今回は、フォトグラファーのポートフォリオサイトを集めてみました。サイトごと写真の見せ方に工夫がありますね。 http://www.vivienneballa.com/ Link:http://www.vivienneballa.com/ http://w...続きを読む

2015.02.15インスピレーション

【WP】WordPressで出力されるHEADタグ内の内容を整理する

WordPressを利用してWebサイトを構築すると、HTMLを構成するHEADタグ内にWordPress特有の記述が見れます。このWordPress特有の記述は自動的に生成されるため、テーマファイルのソースに記述されているheadタグ内の内容を編集するだけでは変更することができ...続きを読む

2021.01.28HTMLコーディングWordPress

2015年のウェブサイトのデザイントレンド

2015年も4月新年度を迎えますね。年度の切り替わるこの時期はウェブサイトのリニューアルも多いと思います。今回は、2015年の注目されるウェブサイトのデザイントレンドをご紹介します。 Startup Framework 「Startup」タイプのウェブサイトは1ページ...続きを読む

2015.03.26WEB

【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。 しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので...続きを読む

2015.02.19WordPress