先生と生徒の会話形式で理解しよう

生徒

「CSSって、同じタグに違うスタイルを何回も書いたら、どっちが優先されるんですか？」

先生

「とても大事なところに気がつきましたね。実は、CSSには『優先度（ゆうせんど）』と『読み込み順序（じゅんじょ）』というルールがあるんですよ。」

生徒

「読み込み順序って何ですか？どっちが先とか後とか関係あるんですか？」

先生

「ありますよ！同じ場所に対してスタイルが重なったときには、どのCSSが有効になるかをルールで決めてるんです。それでは、くわしく解説していきましょう！」

1. CSSの読み込み順序とは？

CSS（スタイルシート）は、HTMLのタグに「見た目」を与えるルールです。たとえば文字の色や大きさ、背景の色などを決めるときに使います。

CSSをページに反映させるには、「どの順番でCSSを読み込むか」がとても大切です。なぜなら、同じ場所に複数のスタイルが書かれているとき、どれが実際に使われるかがこの「順番」で決まることがあるからです。

HTMLにCSSを読み込む方法は主に3つあります：

外部ファイルで読み込む（linkタグ）
HTML内に直接書く（styleタグ）
タグの中に直接書く（style属性）

2. CSSの優先度とは？

優先度（ゆうせんど）とは、スタイルの「強さ」です。たとえば、ある場所に赤い文字のスタイルと青い文字のスタイルが両方あった場合、どっちが優先されるかはこの「優先度」で決まります。

初心者の方にわかりやすくたとえると、「命令が強い人の言うことが聞かれる」ようなイメージです。

CSSでは、優先される順番がこのようになっています：

インラインスタイル（HTMLタグの中に直接書く）
styleタグで書いたCSS
外部ファイルから読み込んだCSS

つまり、いちばん強いのはインラインスタイルです。

3. 実際に優先度を試してみよう

同じh1タグに対して、複数の方法で色を指定してみましょう。


<style>
	h1 {
	    color: green;
	}
</style>

<h1 style="color: red;">こんにちは！</h1>

ブラウザ表示

この場合、style属性で直接h1タグに書かれた「赤色」が最優先で適用されます。

いくら外部やstyleタグで「緑」と指定しても、style属性に書かれた色が勝ちます。

4. CSSの読み込み順序が影響する例

次に、外部ファイルやstyleタグを使ったときに、読み込む順番がどう影響するかを見てみましょう。

下のコードは、後から読み込まれたCSSが、前のCSSを上書き（うわがき）するという例です。


<style>
	h1 {
	    color: blue;
	}
</style>

<style>
	h1 {
	    color: orange;
	}
</style>

<h1>今日はいい天気</h1>

ブラウザ表示

この例では、最初に「青」を指定していますが、後から「オレンジ」が書かれているので、結果的にオレンジ色が表示されます。

5. CSSセレクタの種類による優先順位

実は、CSSの「セレクタ（指定の仕方）」によっても優先度が変わります。

以下のような順で優先されます（下に行くほど強くなる）：

タグ名だけのセレクタ（例：h1、pなど）
クラスセレクタ（例：.title、.main）
IDセレクタ（例：#mainTitle）
インラインスタイル（HTMLタグの中に直接書く）

同じタグに対して、IDとクラスが両方指定されていたら、IDのほうが強い命令になります。

6. 優先度と読み込み順序がぶつかったら？

ときには、「セレクタの強さ」と「書かれた順番」が両方関係してくることがあります。

その場合、まずは「優先度」が決め手になります。それでも同じ優先度なら、「後に書かれたもの」が適用されます。

下の例では、どちらも同じ「h1」にクラスで色を指定していますが、あとで書いたものが適用されます。


<style>
	.title {
	    color: pink;
	}
</style>

<style>
	.title {
	    color: purple;
	}
</style>

<h1 class="title">CSSって奥が深い！</h1>

ブラウザ表示

7. !importantを使うとどうなる？

どうしてもこのCSSを一番強くしたい！というときは、!important（インポータント）という記号を使うことができます。

これは「とにかくこれを最優先してね」という命令です。


<style>
	h1 {
	    color: yellow !important;
	}
</style>

<h1 style="color: black;">インポータントとは？</h1>

ブラウザ表示

通常ならインラインスタイルの「黒」が勝つのですが、!importantがついている「黄色」が最終的に使われます。

ただし、多用すると管理が大変になるので、本当に必要なときだけ使うようにしましょう。

8. 初心者が気をつけたいポイント

インラインスタイルが最優先になることを覚えておく
同じセレクタでも、後に書いた方が強くなる
クラスよりIDの方が優先される
複数のCSSがある場合は、読み込み順にも注意
!importantの使いすぎには注意

CSSのルールを守れば、きれいで思い通りのデザインを作ることができます。

まとめ

この記事では、CSSの読み込み順序と優先度の仕組みを基礎から応用まで丁寧に学びながら、実際のデザインにどのように影響するのかを理解してきました。Webページに見た目のスタイルを適用するとき、同じ要素に複数のCSSが関わってくる状況はとても多く、どのスタイルが最終的に有効になるかを正確に理解しておかないと、意図しない表示になってしまうことがあります。そのため、読み込み順序や優先度を正しく把握しておくことは、初心者だけでなく中級者以上にとっても重要な知識です。 CSSは、HTMLに読み込まれた順番やセレクタの種類によって強さが変わる仕組みになっています。外部ファイルのCSS、styleタグで書いたCSS、インラインスタイルの三種類があり、その中でも最も強いのはインラインスタイルという特性があります。また、セレクタにはタグ、クラス、IDなど複数の種類があり、それぞれに優先順位が存在します。IDセレクタはクラスセレクタより強く、クラスセレクタはタグセレクタよりも強いというルールを知っておくことで、意図したデザインを確実に反映できるようになります。読み込み順序も大切で、同じセレクタを使っていても、後から読み込まれたCSSが優先されるという仕組みがあります。これは「上書き」という考え方で、特に外部ファイルを複数読み込む場面や、ページの途中でstyleタグを使う場面などで重要な意味を持ちます。さらに、!important の使用方法も紹介し、絶対にこのスタイルを適用したい場合の最強の指定方法として理解を深めました。ただし、多用するとコードの管理が難しくなるため、必要な場面に絞って使うことが推奨されます。実際の制作現場では、読み込み順序、優先度、セレクタの強さ、!important のすべてが組み合わさって複雑な状況が生まれます。これらの仕組みを理解することで、なぜ特定のスタイルが適用されないのか、どのセレクタを使えば意図したスタイルを当てられるのか、論理的に判断できるようになります。特に、複数のデザイナーや開発者が協力して作業するプロジェクトでは、CSSの競合が起きやすいため、この知識はとても有用です。さらに、実際に動作を確認できるサンプルコードでは、読み込み順序の違い、インラインスタイルの強さ、クラスの上書き、!important の効果などを実際のコードで確かめることができ、理解を深めることができたはずです。読み込み順による上書きの例では、最初に青を指定していても、後に書いたオレンジが適用されるという結果を動画やブラウザで確認することで、より直感的に理解できるようになります。以下では、読み込み順序と優先度を一度に確認できるサンプルコードを追加で掲載しておきます。これを自分の環境でためしながら、実際にどのスタイルが有効になるのかを確かめることで、より安定したCSSの書き方を身につけることができます。

読み込み順序と優先度をまとめて確認できるサンプルコード


<style>
h1 {
    color: blue;
}
.title {
    color: green;
}
#mainTitle {
    color: purple;
}
</style>

<style>
h1 {
    color: orange;
}
</style>

<h1 id="mainTitle" class="title" style="color: red;">優先度と読み込み順序のデモ</h1>

ブラウザ表示

先生と生徒の振り返り会話

生徒「CSSの優先度ってなんとなく知っていたけれど、今回の説明とサンプルで、どれが強いのかが一気に分かりやすくなりました。」

先生「そうですね。特にインラインスタイルが最強だということは、初心者の方がよくつまずく部分なんですよ。」

生徒「読み込み順序も、後から書いた方が優先されるというのが意外でした。同じセレクタでも順番によって結果が変わるんですね。」

先生「そのとおりです。同じクラスで色を決めていても、後に書かれたものが上書きするという仕組みを理解しておけば、意図したデザインが適用されやすくなります。」

生徒「IDの方がクラスより強いというルールも覚えやすいですね。強さの順番を知っておくと、CSSを書くときに迷わなくてすみそうです。」

先生「そして、!important についても理解しておくと、どうしてもスタイルを強制したい場面で役立ちます。ただし使いすぎると管理がむずかしくなるので注意しましょう。」

生徒「今日学んだことを活かして、CSSの競合が起きても落ち着いて原因を考えられそうです。これから実際の制作でも気をつけながら書いてみます！」

先生「非常に良い心がけです。優先度と読み込み順序をしっかり理解すれば、デザインの自由度が大きく広がりますよ。」