スタイルシートの記述方法による適用順位

スタイルシートの記述方法は、以下のとおりの記述方法があります。

  1. スタイルシート定義ファイル(外部スタイルシート定義ファイル)
  2. head要素に記述するスタイルシート
  3. style属性で、要素に記述するスタイルシート

スタイルシートの記述方法による適用順位は、文書外のスタイルシート定義ファイル(外部スタイルシート定義ファイル)は、head要素内に記述されるスタイルに上書きされ、head要素内に記述されるスタイルは要素に記述するスタイルシートに上書きされ適用されます。


例1a) スタイルシート定義ファイル(example001.css)

p{
color: red;
}

例1b) HTMLドキュメント

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="example001.css">
    <title></title>

<style type="text/css">
<!--
p {
color: blue;
}
-->
</style>

</head>
<body>

<p>テキストAAAaaa</p>

</body>
</html>

上記のHTMLドキュメント

例1a)、例1b)では、スタイルシート定義ファイルでp要素に赤色(red)を指定していますが、head要素で青色(blue)を指定していますので、p要素のテキストは青色で表示されます。


また、同じ文書で、body要素内のp要素にstyle属性で緑色(green)を指定すると、スタイルシート定義ファイル、head要素で指定したスタイルは上書きされ、p要素のテキストは緑色(green)で表示されます。

例2)

<body>
<p style="color: green;">テキストAAAaaa</p>
</body>

上記のHTMLドキュメント


記述の順序における優先順位

スタイルシート定義ファイルやhead要素内に記述するスタイルシートでは後述された指定が優先されます。

例)

p{
color: blue;
color: red;
}

上記のHTMLドキュメント

p要素のテキストに青色と赤色を設定していますが、適用されるのは後述の赤色です。

セレクタの具体性による優先順位

要素のみのセレクタ指定よりも特定要素の子要素として記述した場合やid属性やclass属性で区分けをして記述した場合の指定の方が優先され適用されます。

特定要素の子要素 例)

body p{
color: red;
}
p{
color: blue;
}
	
本文)
<p>テキストAAAaaa</p>

上記のHTMLドキュメント

p要素のテキストに赤色と青色を設定していますが、適用されるのはより具体的なセレクタ指定のある赤色です。


class属性 例)

スタイルシート)
p.text{
color: red;
}
p{
color: blue;
}

本文)
<p class="text">テキストAAAaaa</p>

上記のHTMLドキュメント

p要素のテキストに赤色と青色を設定していますが、適用されるのは要素をclass属性で区分けしたセレクタ指定のある赤色です。


!important

セレクタ{プロパティ: 値 !important;}

値のうしろに!importantを記述し、スタイルの優先順位を最上位へ位置することができます。

例)

p{
color: red !important;
color: blue;
}

本文)
<p>テキストAAAaaa</p>

上記のHTMLドキュメント

上記は、p要素の内容のフォントカラーを指定しています。記述の順序における優先順位のルールに従えば、blueが適用されますが、redに!importantの指定をしているので、p要素の内容のフォントカラーはredになります。


なお、フォントサイズや、フォントスタイル、カラー、行間など、ホームページを閲覧するユーザーが、ユーザースタイルシートの使用など、自由にならないと不便なスタイルに関しては、 Web制作者は 特別な理由が無い限り、!important 指定をしない方が良いと思います。


ユーザーがホームページを閲覧する場合、以下の順位でスタイルがWebページに適用されます。

  1. Web制作者が設置するスタイルシート
  2. ユーザースタイルシート
  3. ブラウザスタイルシート

ユーザーがユーザースタイルシートを作成していない場合、Webページのスタイルは、制作者が指定したスタイルが適用され、制作者がスタイルを指定していなければ、ブラウザが指定するスタイルが適用され表示されます。


例えば、行間(line-heightプロパティ)

ユーザーが、Webページの行間を広くしたい場合、ユーザーは、ユーザースタイルシートを作成し、値に希望する行間値を指定すれば、そのスタイルが適用されますが、Web制作者が、!importantを記述しているWebページには、ユーザーが指定した行間値は適用されず、ユーザースタイルシートのline-heightプロパティに!importantを記述する必要があります。(※ブラウザにより解釈が異なる場合があります。)