スタイルが反映されない！？覚えておきたいCSSの優先順位

2021/09/16

コーディング

まるこ

Webページの装飾を担うCSS。正しく書いているはずなのに「スタイルが反映されない」とお困りの方もいるのではないでしょうか。実はCSSには、スタイルが適用される「優先順位」が存在します。
本記事では、CSSのスタイルが反映される優先順位について、簡単に解説していきます。

※CSSの内容は、Webサイト全体に大きな影響を及ぼしますので、作業は慎重に行ってください。

スタイル適用の優先順位
パターン① 定義（記述）する場所による優先順位
パターン② スタイルシートによる優先順位
パターン③ セレクタによる優先順位
優先順位のおさらい
まとめ

スタイル適用の優先順位

CSSは、ひとつの要素にスタイルが複数指定され、スタイルが競合した場合「要素にどのスタイルを適用するか」を決める優先順位があります。パターンは次の3つです。
スタイルを適用させるには、3つのパターンを加味して、もっとも優先度を高くする必要があります。

パターン	概要
①定義（記述）する場所	HTMLタグ内、head要素内、外部スタイルシート
②スタイルシートの種類	制作者スタイルシート、ユーザースタイルシート、ユーザーエージェントスタイルシート
③セレクタの内容	セレクタの記述順、セレクタの点数、!important宣言

パターン① 定義（記述）する場所による優先順位

まず1つ目は、CSSを定義（記述）する場所による優先順位です。定義は次の3箇所で行うことができます。

定義場所	概要
①HTMLタグ内	HTMLタグのstyle属性を使用して、要素に直接スタイルを指定
②head要素内	head要素内にstyleタグを使用して、スタイルを指定
③外部スタイルシート	外部スタイルシート（CSS専用のファイル）を作成し、HTMLファイル内で読み込みスタイルを反映させる

優先順位は①がもっとも高くなります。例えば、③の外部スタイルシートに記述したスタイルを適用しようとしても、①のHTMLタグ内で別のスタイルを指定していると、①のスタイルが適用されます。つまり「要素に一番近いスタイルが優先される」ということです。

②と③はどちらもhead要素の中に記述するので、優先度は同じです。②と③の両方にスタイルが指定されたときは、「CSSは記述が後ろにあるものが優先される（上書きされる）」という特徴があるため、head要素内に記述した順番で、優先度が決まります。

各定義場所へのスタイル指定方法と、メリット・デメリットを見てみましょう。

①HTMLタグにstyle属性を使用して直接指定

スタイルを適用させたいHTMLタグ内に、style属性を使用して指定します。

メリット：スタイルを適用させたい要素に、ピンポイントで指定できる
デメリット：指定した要素以外には、スタイルを適用できない

<p style="color: blue;">HTMLタグに直接スタイル指定</p>

<!-- 複数の要素に同じスタイルを適用させたいとき -->
<p style="color: blue;">HTMLタグに直接スタイル指定1</p>
<p style="color: blue;">HTMLタグに直接スタイル指定2</p>
<p style="color: blue;">HTMLタグに直接スタイル指定3</p>

優先度が高いというメリットはあります。しかし、複数の要素に同じスタイルを適用したい場合、要素ひとつずつにスタイルの指定を行わなければならないため、作業工数がかかります。

②head要素内にstyleタグを使用して指定

スタイルを適用させたいHTMLファイルのhead要素内に、styleタグを使用して指定します。

メリット：記述したHTMLファイル内にある対象要素すべてに、スタイルを適用できる
デメリット：記述したHTMLファイル内の要素にしか、スタイルを適用できない

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>head要素内にスタイルを指定</title>
  <style>
    p{
      color: blue;
    }
  </style>
</head>
<body>
  <p>このHTMLファイル内のpタグすべてに、スタイルが適用されます</p>
  <p>このpタグもスタイル適用の対象です</p>
</body>
</html>

①の要素に直接スタイルを指定する場合とは違い、HTMLファイル内の対象要素すべてにスタイルを適用できます。ただし、複数のHTMLファイルにまたがって、同じスタイルを適用したい場合、HTMLファイルごとに記述を行わなくてはいけないため、作業工数がかかります。

③CSS専用の外部スタイルシートを作成して指定

CSS専用の「外部スタイルシート」というファイルを作成し、HTMLファイル内にlinkタグを使用して、ファイルを読み込みます。

メリット：CSSを一括で管理できるため、メンテナンスしやすい。（Webサイト内の共通スタイルを使い回せる、コードの記述量が少ない等）
デメリット：大きなデメリットは特にない

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部スタイルシートを作成して指定</title>
  <link rel="stylesheet" href="style.css">
</head>

スタイルの定義（記述）場所としてもっとも一般的なのは、③の外部スタイルシートでの指定です。①、②に定義すると、「HTMLファイルの記述が冗長になる」「CSSの適用範囲が限定的で汎用性がない」など、Webサイトの制作時も公開後も、更新や修正が行いにくくなります。（制作前に、公開後の運用・メンテナンスなどを十分考慮して、定義場所を決めてください。）
HTMLファイルは文書構造、CSSファイルは装飾と、役割を分けて管理するのがいいでしょう。

パターン② スタイルシートによる優先順位

2つ目は、スタイルシートによる優先順位です。スタイルシートには次の3種類があります。

スタイルシートの種類	概要
①制作者スタイルシート	Webサイト制作時に作成するもの
②ユーザースタイルシート	ユーザー（閲覧者）が、独自のスタイルにカスタマイズできるもの
③ユーザーエージェントスタイルシート	ブラウザ（Google Chrome、Safari等）ごとに、標準で設定されているもの

優先順位は①がもっとも高く、次に②、③というように、スタイルを適用させます。
※「!important宣言」があった場合は、優先順位が逆転（③＞②＞①）します。

わたしたちがWebサイトを閲覧しているブラウザ（Google Chrome、Safari等）には、標準でスタイルシートが用意されています。スタイルを特に指定しなくても、「<h1>要素は太字で表示」などが自動で適用されます。これが③のユーザーエージェントスタイルシートです。

しかし、各ブラウザごとに標準で設定されているスタイルが異なるため、思っているレイアウトを実現するのが難しいというデメリットがあります。そこで、一般的なWebサイト制作では、①の制作者スタイルシートを使って、不要なブラウザのスタイルをリセットしています。

パターン③ セレクタによる優先順位

ここまで、定義場所・スタイルシートの種類による優先順位を見てきました。この章では、同一ファイル内でスタイルを指定したときの、優先順位を解説していきます。（CSSは外部スタイルシートに記述しているものとします。）

セレクタの種類と優先順位を決める点数

まず、スタイルを適用させたい要素を「セレクタ」と言います。セレクタにはいくつか種類があり、各セレクタのランクごとに、“点数”が割り振られています。
スタイルが競合した場合は、セレクタの内容からブラウザが点数を計算し、より点数が高いスタイルを適用します。

ランク	セレクタの種類	例	点数
A	idセレクタ	#id	100
B	クラスセレクタ疑似クラス属性セレクタ	.class :first-child a[href=”aaa.jp”]	10
C	要素セレクタ疑似要素	h1 :before	1

点数が同じ場合は、最後に記述したスタイルが適用される

セレクタの点数が同じ場合は、「CSSは記述が後ろにあるものが優先される（上書きされる）」という特徴を踏まえて、最後に記述したスタイルが適用されます。

/* 以下の場合は「青(blue)」が適用される */
p { /* 1点 */
  color: red;
}

p { /* 1点 */
  color: blue;
}

例では、要素セレクタ（p）に対して、2つのスタイルが指定されています。この場合、文字の色は後に記述した「青（blue）」になります。

点数が異なる場合は、点数が高いスタイルが適用される

セレクタの点数が異なる場合は、点数が高い方のスタイルが適用されます。

/* <p id="id" class="class">セレクタの点数</p> */
/* 以下の場合は「緑(green)」が適用される */
#id { /* 100点 */
  color: green;
}

.class { /* 10点 */
  color: red;
}

p { /* 1点 */
  color: blue;
}

例では、ひとつの要素に対して、3つのスタイルが指定されています。最後に記述しているのは要素セレクタ（p）ですが、セレクタの点数はidセレクタが一番高いため、文字の色は「緑（green）」になります。

次のように、セレクタが複数記述されている場合は、合計の点数が高いスタイルが適用されます。

/* 以下の場合は「赤(red)」が適用される */

/* section(1点) + .class(10点) = 11点 */
section .class {
  color: blue;
}

/* section(1点) + p(1点) + :first-child(10点) = 12点 */
section p:first-child {
  color: red;
}

最優先される「!important宣言」

「!important」と書くだけで、セレクタの点数を無視して最優先でスタイルを適用できます。
※HTMLタグに直接スタイルの指定があっても、「!important」が書かれているスタイルが優先されます。

/* <p id="id" class="class">最優先の!important宣言</p> */
/* 以下の場合は「青(blue)」が適用される */
#id {
  color: green;
}

.class {
  color: red;
}

p {
  color: blue!important;
}

最優先でスタイルが反映されるので、とても便利なように見えますよね。しかし「!important」で溢れかえったCSSは、「どのスタイルが重要なのか」がわかりにくく、管理しづらくなります。できるだけ「!important」を使用しない方法を選択しましょう。