【実践】CSSの優先度を確認してみよう

ホームページのデザインをしていく上でCSSが効かずに困ることは多々あります。そんな時に一つずつ整理して原因を探る上で、CSSの優先度の考え方を理解しておくと良いと思うので、内容をまとめてみます。

CSSの優先度整理の全体像

今回はワードプレスの独自テーマで最小構成を作って、CSSの要素を一つずつ試していく形にしました。まずはindex.phpとstyle.css、そしてウェブページで開いた画面とDevToolsの使い方の全体像の画面を載せるので、イメージを掴んでいただくと良いと思います。

①クラスが一つの場合

②クラス名が重複している場合

③クラスが二つの場合

④クラスが階層構造の場合

⑤クラス以外のもの。IDの場合

⑥クラス以外のもの。要素タグの場合

この６パターンに大まかに分類できると思います。

CSSの優先度は、IDは100点、クラスは10点、要素タグは1点と考えて、合計点数の比較で優先度が決まるという整理が良いとされています。また、CSSの効き方の分類を整理しておくことで、自分の望むデザインの変更箇所を探る際に役立つと思います。