カスケード
初級読み方：カスケード｜英語：Cascade
CSSの「C」で、複数のスタイルが競合したとき優先順位に従って適用される仕組みだよ。
やさしい説明
カスケードとは、CSSで複数のスタイルが競合したときの優先順位の仕組みです。「Cascading Style Sheets」の「Cascading（滝のように流れ落ちる）」が語源です。
同じ要素に複数のスタイルが指定されたとき、どれが勝つかを決めるルールです。基本は「後に書いた方が優先」「詳細度が高い方が優先」「!importantが最優先」です。
CSSが思い通りに効かないとき、原因のほとんどはカスケードの仕組みを理解していないことです。開発者ツールで「どのスタイルが打ち消されているか」を確認する習慣をつけましょう。
具体例・使い方
/* 同じセレクタなら後に書いた方が勝つ */
p { color: red; }
p { color: blue; } /* ← こっちが適用される */
/* 詳細度が高い方が勝つ */
p { color: red; } /* 0-0-1 */
.text { color: blue; } /* 0-1-0 ← こっちが勝つ */
/* !important は最優先（非推奨） */
p { color: red !important; } /* 強制的に勝つ */勝敗を決める順番
複数のスタイルが競合したとき、上から順にチェックして勝者が決まります。
| 優先 | ルール | 例 |
|---|---|---|
| ① 最強 | !important | 強制的に勝つ（乱用注意） |
| ② 次に強い | 詳細度が高い | ID > クラス > タグ |
| ③ 同点なら | 後に書いた方 | 下に書いたCSSが勝つ |
いつ使う？
CSSを書くときは常にカスケードが働いています。「スタイルが効かない」「上書きされてしまう」と思ったら、カスケードのルールを確認しましょう。
スタイルが効かないときは開発者ツール（F12）のElementsタブを開きましょう。打ち消されたスタイルには取り消し線が入って表示されます。「何に負けているか」が一目でわかり、原因究明が一気に速くなります。
間違いやすいポイント
❌ !important を乱用する
!important で無理やり上書きすると、さらに上書きしたいときに「!importantを!importantで上書き」する泥沼になります。基本は詳細度で管理し、!importantは最終手段に。
❌ CSSファイルの読み込み順を意識しない
後に読み込んだCSSファイルが優先されます。リセットCSSは最初に、自分のCSSは最後に読み込みましょう。順番を逆にするとリセットに上書きされて効きません。
よくある疑問
Q: !importantは使っていい？
A: 緊急時以外は使わないようにしましょう。セレクタの詳細度を調整する方が正しい解決方法です。!importantが増えると管理不能になります。
Q: カスケードの優先順位は？
A: ①!important ②インラインスタイル ③IDセレクタ ④クラスセレクタ ⑤要素セレクタ の順です。同じ優先度なら後に書いた方が勝ちます。
Q: スタイルが上書きされるのを防ぐには？
A: セレクタの詳細度を上げる（クラスを追加する等）か、CSSの記述順を調整します。!importantは最終手段です。
関連用語
📖 関連レッスン
レッスンを見る →