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

関連記事

静岡洋館巡り「旧マッケンジー住宅」フォトギャラリー

国登録有形文化財「旧マッケンジー住宅」を見てきました。旧マッケンジー住宅は、明治から昭和初期にかけて活躍した建築家のウィリアム・M・ヴォーリズによる設計です。現在にでも通じるシステムキッチンや浴室があり、70年以上前とは思えないほどの設備が整っています。 概要(引用) ...続きを読む

2015.04.06フォトギャラリー

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

「アイミツ」にて弊社を紹介していただきました

株式会社ユニラボ ( unilabo Inc. )が運営する「アイミツ」にて、『「本当におすすめできる9社をピックアップ」静岡市のホームページ制作会社をアイミツが徹底調査! 』として、デザインスタジオ・エフを紹介していただきました! https://imit...続きを読む

2020.11.27

【無料】商用利用OKシームレステクスチャ「木目パネル(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの木目パネル、壁、フローリングのようなイメージに仕上げています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材...続きを読む

2018.09.14シームレステクスチャ

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー