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

関連記事

【Win10】ファイルを削除する前に確認メッセージを表示する

Windows10でファイルやフォルダーを削除したい場合、エクスプローラーのメニューやツールバーで表示される【削除】や、マウスの右クリックで表示される【削除】を実行する方法や、キーボードの【Delete】キーを押すことで、ファイルやフォルダーを削除(ファイルやフォルダーをゴミ箱に...続きを読む

2019.07.06Windows10パソコンの使い方

LGP(ラッキーガールズプロモーション)様WEBサイト制作

静岡を拠点に活動している『LGP(ラッキーガールズプロモーション)』様のWEBサイトを制作いたしました。ラッキーガールズプロモーション様では、カットモデル・サロンモデル・カメラマン派遣・体験モニター・撮影会・モデルイベント・パーティー企画・変身ビフォーアフター、ホームペー...続きを読む

2015.02.06WEBサイト制作

【JavaScript】文字設定をレスポンシブ対応してくれるライブラリ『FlowType』

『FlowType』はレスポンシブデザインのサイトにおいて、横幅の変化に応じて設定されている文字の大きさや行の高さを自動的に調整をしているJavaScriptライブラリです。 イメージ ダウンロード ライブラリのダウンロードはこちらから行うことが出来ます。 ...続きを読む

2015.02.10HTMLコーディング

はぴねす歯科様WEBサイトのデザイン提案

大阪にある歯科クリニックのはぴねす歯科様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。かわいらしいキャラクターのロゴにデザインを合わせて、親しみやすいかわいらしいデザインになるように心がけました。虫歯治療をはじめ、歯周病、予防歯科、矯正などイラストやイメージ...続きを読む

2019.04.17WEBデザイン歯科医院

サロンドブー様で行われたテレビ撮影に密着しました

富士市にある美容室とエステサロンの『サロンドブー』様の写真撮影をいたしました。サロンドブー様でサービス提供している霧でかける新感覚のパーマシステム「プルームパーマ」のテレビ撮影があるとのことで、密着さいて撮影の様子や「プルームパーマ」の施術の様子を撮影いたしました。 ...続きを読む

2015.04.23フォトギャラリー