カスケードと詳細度
同じ要素に複数のスタイルが当たったとき、どれが勝つのか。CSSの優先順位ルールを理解します。
CSSの「カスケード」って何？
CSSは Cascading Style Sheets の略です。「Cascade（カスケード）」は「上から順に流れ落ちる」という意味です。
滝の水が上から下へ流れていくように、CSSのスタイルも上から下へと適用されていきます。 もし同じ要素に複数のスタイルが書かれていたら、基本的には後に書いた方が優先されます。
p {
color: blue;
}
p {
color: red;
}この場合、p 要素の文字色は 赤 になります。後に書いた color: red; が前の color: blue; を上書きするからです。
実際に確認してみましょう。
赤くなっていますね。これがカスケードの基本です。
カラーコード（#228B22など）も利用できるのでぜひエディタを編集して試してみてください！
同じ要素に複数のスタイルが当たったら？
実際のプロジェクトでは、1つの要素に対して複数のスタイルが当たることがよくあります。
<p class="intro" id="hero-text">こんにちは</p>#hero-text {
color: red;
}
.intro {
color: green;
}
p {
color: blue;
}この <p> 要素には3つのルールが当たっています。
「後に書いた方が優先される」ルールに従うと青色になるはずですが…
赤色になりましたね。 実は、CSSは順番以外にも、の種類によって優先順位が決まっています。
優先順位を決める3つのルール
CSSがどのスタイルを採用するかは、次の3つのルールで決まります。上にあるルールほど優先されます。
| 優先度 | ルール | 説明 |
|---|---|---|
| 高 | 重要度 | !important がついたスタイルは最優先 |
| 中 | 詳細度 | の種類によって強さが決まる |
| 低 | 出現順 | 同じ強さなら後に書いた方が勝つ |
1. 重要度
!important がついたスタイルは、他のすべてのスタイルに勝ちます。
p {
color: blue !important;
}
#hero-text {
color: red;
}通常なら #hero-text が勝ちますが、!important がついている color: blue が優先されます。
!important は強力すぎるため、普段のスタイリングでは使いません。「どうしても上書きできない」緊急時の手段と考えてください。
2. 詳細度（の強さ）
には種類ごとに強さがあります。これを詳細度と呼びます。
| の種類 | 例 | 強さ |
|---|---|---|
| id | #hero-text | 強い |
| class | .intro | 中くらい |
| 要素 | p, h1, body | 弱い |
先ほどの例で #hero-text（id）が勝ったのは、idが最も詳細度が高いからです。
3. 出現順
詳細度が同じ場合は、後に書いた方が勝ちます。最初に見た例がこれにあたります。
p {
color: blue;
}
/* 同じ要素セレクタ → 後に書いた方が勝つ */
p {
color: red;
}グローバルCSSはなぜ詳細度を低くするのか
前回のレッスンで見たグローバルCSSを思い出してください。
/* 1. CSSリセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* 2. ベーススタイル */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
/* 3. デザイントークン（CSS変数） */
:root { --background: #ffffff; --text: #171717; }使われているは *、:root、body、h1 など、すべて要素（最も弱い）です。classやidは使われていません。
これは意図的な設計です。
グローバルCSSはサイト全体の「土台」です。土台のスタイルは、コンポーネント側で簡単に上書きできなければいけません。もしグローバルCSSに #main .title のような強いを使ってしまうと、コンポーネント側で上書きするのが難しくなります。
次のプレビューで、グローバルCSS（要素）をコンポーネントCSS（class）が上書きしている様子を確認してみましょう。
.accent は classなので、要素の h1 より詳細度が高く、自然に上書きできています。グローバルCSSの詳細度が低いからこそ、この仕組みがうまく機能するのです。
| CSS | 使う | 詳細度 | 理由 |
|---|---|---|---|
| グローバルCSS | 要素（body, h1 など） | 低い | 上書きされやすい土台を作るため |
| コンポーネントCSS | class（.button など） | 高い | 土台の上に個別のスタイルを重ねるため |
グローバルCSSは詳細度を低く保つ。これが、コンポーネントCSSと共存するための重要な設計ルールです。
次のステップ
カスケードと詳細度のルールが分かったところで、グローバルCSSの中身を1つずつ見ていきましょう。次のレッスンでは、CSSリセットとベーススタイルを学びます。