カスケード
初級読み方：カスケード｜英語：Cascade
CSSの「C」で、複数のスタイルが競合したとき優先順位に従って適用される仕組みだよ。いつ使う？ 意識しなくても常に働いている仕組みだよ。「なぜこのスタイルが効かないの？」と思ったとき、カスケードのルールを理解していると原因がわかるよ。間違いやすいポイント: 同じ詳細度のスタイルが競合した場合、後に書いた方が勝つよ。CSSファイルの読み込み順やスタイルの記述順が重要だよ。!importantは最終手段で、多用するとカスケードが壊れるよ。
やさしい説明
カスケードとは、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; } /* 強制的に勝つ */いつ使う？
CSSを書くときは常にカスケードが働いています。「スタイルが効かない」「上書きされてしまう」と思ったら、カスケードのルールを確認しましょう。
間違いやすいポイント
❌ !important を乱用する
!important で無理やり上書きすると、さらに上書きしたいときに困ります。詳細度を適切に管理する方が健全です。
❌ CSSファイルの読み込み順を意識しない
後に読み込んだCSSファイルが優先されます。リセットCSSは最初に、自分のCSSは最後に読み込みましょう。
よくある疑問
Q: !importantは使っていい？
A: 緊急時以外は使わないようにしましょう。セレクタの詳細度を調整する方が正しい解決方法です。!importantが増えると管理不能になります。
Q: カスケードの優先順位は？
A: ①!important ②インラインスタイル ③IDセレクタ ④クラスセレクタ ⑤要素セレクタ の順です。同じ優先度なら後に書いた方が勝ちます。
Q: スタイルが上書きされるのを防ぐには？
A: セレクタの詳細度を上げる（クラスを追加する等）か、CSSの記述順を調整します。!importantは最終手段です。
関連用語
📖 関連レッスン
レッスンを見る →