メニュー
前回のCSSの構造その2に続き、CSSの基本を学んでいきます。 CSSは、Cascading(カスケーディング)という通り、複数に渡ってCSSを適用していくことができます。スタイルの優先順位を学んで、CSSの基本はほぼ完了になります。

CSSの構造その3-スタイルの優先順位

  • TOP
  • CSS
  • CSSの構造その3-スタイルの優先順位
3年以上前に更新されました。情報が古い可能性があります。
 更新日 : 2019年12月13日

前回のCSSの構造その2に続き、CSSの基本を学んでいきます。

CSSは、Cascading(カスケーディング)という通り、複数に渡ってCSSを適用していくことができます。スタイルの優先順位を学んで、CSSの基本はほぼ完了になります。

前回の復習

前回はスタイルの指定箇所が3箇所あることをご説明しました。

  1. HTMLの<style>タグを利用したパターン
  2. 外部CSSファイルを読み込むパターン
  3. HTMLのタグ内にスタイルを直接指定するパターン

それぞれ指定場所が異なることによるそれぞれのメリット・デメリットを学んでいきました。今回のスタイルの優先順位について学ぶことによって、スタイルの強さがわかります。

基本となるスタイルの強さ3原則

前回のスタイル指定箇所、またセレクタの指定方法によって、スタイルの強さ3原則が決まります。

下記の3原則を学ぶことで、どのようにスタイルが適用されているか理解することができます。

3原則

  1. HTMLタグへ直接指定 > <style>タグでの指定 > 外部ファイルという順番でCSSの適用が強くなる。
  2. セレクタの宣言が細かいほどCSSの適用が強くなる。
  3. 強さに差がつけられない場合には、あとに書いたほうがCSSの適用が強くなる。

この3つが基本となり、どのCSSが適用されるかが決まっていきます。

1. 指定箇所によるCSSの強さ

まず1番目に関してですが、前回のCSS適用箇所によって強さが変化します。

まず、HTMLタグ(divタグなどに直接)にCSSを適用する場合が最強です。
前回のパターン3つ目ですね。これはカスタマイズ性が低く、あまり使われないと説明しましたが、CSSの強さとしては最強です。つまりタグに直接書いたCSSはほぼ間違いなく適用されます。

次に強いのが、<style>タグを利用したCSSです。これは前回のパターン1ですね。HTML内にCSSを適用することにより、2番めの強さになります。

最後が外部ファイルの場合です。パターン2にあたります。
カスタマイズ性が高い代わりに、強さとしては3番目になります。

これを見ると、HTMLに近ければ近いほど、強くなることがわかります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<link rel="stylesheet" href="css/h-color.css">
	<style type="text/css">
		h1 {
			color: yellow;
		}
	</style>
</head>
<body>
	<header>
		<h1 style="color:red;">サイト名</h1>
	</header>
	<article id="sample" align="center">ここにいろんな文を書いたり画像を置いたり…</article>
	<footer>
	</footer>
</body>
</html>
@charset "UTF-8";

h1 {
	color: green;
}

上記のHTMLとCSSから実際に見ていきましょう。

HTMLのファイル名はstructure-of-css-part3.html
CSSのファイル名はh-color.cssとします。

HTML内でh-color.cssを読み込んでいます。
そしてstyleタグでh1の色を黄色にしています。
さらに、h1タグでは赤色にしています。

これを実際にブラウザで表示すると、赤色になります。
h1に直接指定していることによって、このCSSが最強になるので、文字色は赤色になります。

次に、h1タグのCSSを外しましょう。すると結果は黄色になるかと思います。

これも、外部ファイルよりも、HTML内で適用しているCSSが強いためです。

このようにCSSの指定箇所によって強さが決まります。

複数にまたがるCSSを適用したい場合はカスタマイズ性を考え、外部ファイルにてCSSを適用しますが、「特別にこのページだけ違うデザインを適用したい！」「ここのdivタグだけ特殊なデザインにしたい！」などの場合にはこの強さを利用することによって、外部ファイルで読み込みつつ特別なデザインを適用することができます。

2. セレクタの細かさ

スタイルの指定箇所以外にも強さがあります。

CSSの構造その1でやった、セレクタの指定方法を利用する強さの比べ方です。

セレクタ指定には、様々な指定方法がありました。id属性、class属性を利用したセレクタや、子要素、孫要素セレクタなど。

これらのセレクタ指定方法は組み合わせることができました。
通常の要素セレクタにclass属性セレクタを組み合わせ、セレクタをh1.sampleとすれば、h1タグかつsampleクラスにCSSを適用するなど。

もちろん孫要素などもさらに組み合わせることができます。そしてこのスタイル指定が細ければ細かいほどCSSも強くなっていきます。

例えば、h2.sampleとh2.sample.sample2などとすると、
<h2 class="sample sample2">というタグには後者のCSSが適用されます。

単純にセレクタを細かくすればするほど強くなるというものです。

Idセレクタとclassセレクタの場合には、idセレクタのほうがHTML内に1つのみ書くルールのため、細かく指定されたことになり、idセレクタのほうが強くなります。

下記の例を見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<link rel="stylesheet" href="css/h-color.css">
	<style type="text/css">
		h1 {
			color: yellow;
		}
		h2 {
			color: green;
			font-size: 10px;
			text-decoration: underline;
		}
		h2.bigtitle {
			color: red;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<header>
		<h1 style="color:red;">サイト名</h1>
		<h2>見出しその1</h2>
		<h2 class="bigtitle">見出しその2</h2>
	</header>
	<article id="sample" align="center">ここにいろんな文を書いたり画像を置いたり…</article>
	<footer>
	</footer>
</body>
</html>

H2タグを2つ用意して、CSSを2種類追加しました。

結果は下の画像のようになります。

CSSだけ抽出すると以下のようになっています。

h2 {
	color: green;
	font-size: 10px;
	text-decoration: underline;
}
h2.bigtitle {
	color: red;
	font-size: 20px;
}

まず要素セレクタのみのh2には

  • 文字色緑
  • フォントサイズ10px
  • テキスト装飾に下線

となっています。この時点ではどんなh2タグでも(id属性やclass属性があったとしても)、上記のCSSが適用されます。

そして、h2.bigtitleの方は

  • 文字色赤
  • フォントサイズ20px

となっていますね。

この時点で、h2タグであり、class属性にbigtitleが入っているものは、セレクタが細かく設定されているため、CSSが上書きされます。

そのためbigtitleというclass属性が入ったh2タグは色と大きさが変わります。

もともとある下線のCSSプロパティは上書きされず、そのまま利用されます。つまり、上書きされているCSSだけを適用します。

3. 強さに差がない場合には後ろのCSSが適用

ここまででスタイルの指定箇所によるCSSの強さ、セレクタの細かさによるCSSの強さをご説明しました。

では、全く強さが同じCSSの場合はどうなるでしょう。

この場合は、後ろに書いたCSSが適用されます。

単純に上から読み込み、上書きされるという認識で問題ありません。

3原則の例外

最後に特殊なCSSの適用方法を説明します。説明はしますが、あまり推奨されませんし、どうしても上記の強さ関係ではやりづらい場合に利用する例外パターンです。

それが!importantです。

この!importantはプロパティに対して特別に付与するもので、あとに書かれていようが、どこに書かれていようが、最優先でスタイルに適用されます。

article {
	color: red !important;
	color: green;
}

このようにプロパティに対して直接適用します。上記の場合には後ろに書いてある緑色が適用されそうですが、!importantのおかげ(せい)で赤色が最優先で適用されます。

;セミコロンの前に書くことと、!エクスクラメーションマークが必要なことに注意しましょう。

まとめ

CSSの一番大事なカスケーディング機能について学びました。

  • HTMLに近ければ近いほど優先して適用される
  • セレクタを細かく指定すればするほど優先して適用される
  • 同じ強さの場合は後ろに書いたもので上書きされる

ということをしっかり理解していけば、そんなに難しく考えなくても書けるようになるかと思います。

タグ