CSSの継承とセレクタの優先度について

Writer： otsubo　更新日：2024/04/26

こんにちは、デジナーレ福岡オフィスの大坪です。

皆さんは、ウェブサイトをデザインしているときに、適用したはずのスタイルが機能していないことに気づいた経験はありませんか？多くの場合、この問題は同一要素に対して異なるルールが競合しているために起こります。このような競合を解決し、どちらのルールが優先されるかを決定するためには、スタイルの継承規則とルールの優先順位の概念を理解することが必要です。今回の記事では、予期せずに起こるスタイルの適用問題や、CSSプロパティが親要素からどのように継承されるか、また継承されないのかといった疑問についても触れていきたいと思います。

 

CSSの「継承」とは？

継承とは、特定のCSSプロパティが親要素から子要素へ自動的に「継承」される仕組みです。これをうまく使えば、全体のフォントや色などを一括で設定できたり、同じプロパティを何度もの要素ごとに書くなどのコードの重複することが減り、スタイルシートをより簡潔に保つことが可能になります。

 

継承されるプロパティの例

HTML：

CSS：

OUTPUT：

 

この例では、body 要素にCSSスタイルが指定されています。このスタイルにより、color 、font-family 、font-size プロパティが指定されており、これらのプロパティは子要素に継承されます。具体的には、div、section、footer 内の各 p 要素に対して、指定されたフォントスタイルが適用されることになります。

 

継承されないプロパティの例

ではCSSのみ以下のように書き換えたらどのようなスタイルが適用されるでしょうか？

CSS：

OUTPUT：

 

この結果では、body要素に対してwidth、border、 div 、section 、footer には適用されません。

このようにCSSを用いて具体的なHTML要素にスタイルを指定する場合、継承されるプロパティとそうでないプロパティを明確に理解することが重要です。それにより、デザインの意図に合わせて適切なプロパティを選択し、予期せぬレイアウトの変更を避けることができます。

こちらで挙げた例以外にも継承されるプロパティ、継承されないプロパティはまだまだありますので、調べてみましょう。

 

セレクタと優先度

CSSでは、複数のセレクタが同一の要素に適用される場合、セレクタの優先度に基づいてどのスタイルを適用するかが決定されます。これを理解できれば、予期せずに起こるスタイルが適用されない課題を解決する鍵になります！

 

セレクタの詳細度の具体例

パターン１

HTML：

CSS：

基本的にはCSSは後から記述されたものを優先します。ですのでこの場合は、

OUTPUT:

テキストの色が緑になります。ではこれはどうでしょうか？

 

パターン２

HTML：

CSS：

HTMLファイルではstyle要素の中にp要素のスタイルが記述され、ここではテキストの色が赤になるように指定されています。このような書き方を内部スタイルシートと言います。
内部スタイルシートの下の方にはp要素の中に直接スタイル属性が追加され、ここではテキストの色が青になるように指定されています。この書き方をインラインスタイルと言います。
CSSファイルはどうでしょう？こちらにもテキストの色が緑になるように指定されていますね。このように別途CSSファイルを作成し、そこにスタイルを記述していく書き方を外部スタイルシートと言います。

このように記述場所が異なるだけでも優先順位が変わってきます。

 

記述場所の優先順位

結果はこのようになります。

 

OUTPUT:

 

 

パターン３

HTML：

CSS：

この場合はどうなるでしょうかidセレクタとclassセレクタでのテキストの色の指定と、タグセレクタでのテキストの色の指定があります。パターン１で紹介したCSSは後から記述されたものを優先する。というルールがあるので、これも最後に記述しているタグセレクタのみのスタイルの優先度が高くなると思いますよね？

では、OUTPUTを見てみましょう。

OUTPUT:

テキストの色が赤になっていますね。しかし、ちょっと待ってください。color: red; は最初に記述したのに適用されているのはなぜでしょう？

実はセレクタの種類の中でも優先順位があります。ですので、たとえ最初に記述したとしてもidセレクタの優先度が高くなっていたのです。

 

セレクタの優先順位

ちなみにこれらの詳細度は計算して算出できますが、その計算方法のアルゴリズムは少々複雑ですので、今回は割愛させていただきます。
気になる方はこちらを見てみるとよいでしょう。

参考：詳細度の計算方法

このようにCSSの詳細度と優先順位を把握することで、複数のスタイルルールが競合した場合でも、どのスタイルが適用されるかを予測することが可能になります。これは、特に複雑なウェブサイトのデザインや、複数のスタイルシートが組み合わさっている場合において、効果的なスタイル管理を行う上で知っておかなければなりません。

 

魔法の呪文「!important」

詳細度が高ければ優先順位が高いというのをお伝えしましたが、その全ての優先順位を無視する存在がいます。!importantです。トランプの大富豪でいうジョーカーの立ち位置ですね。優先させたいプロパティがあるのであれば、!importantを使用するとよいでしょう。

!importantは便利そうだし、全部これでスタイルを適用させればいいじゃないか！と思うかもしれません。しかし、この使用はなるべく避けるべきです。多用しすぎると今度は!important同士で競合が発生してしまい、思うようなスタイルにできなかったり、複数人での開発現場ではコードが見にくくなったりすることもあります。誰が見ても分かりやすいコードを書く為には、セレクタの優先順位を理解して開発していきましょう。

 

まとめ

CSSの継承とセレクタの優先度に関する知識は、ウェブサイトの開発において非常に重要です。全てを完璧に覚える必要はありませんが、これらの基本的な概念を適切に理解し活用することで、スタイルが予期せずに機能しない場合の原因を特定し、効果的に問題を解決できるようになります。ステップバイステップで学び、実践することが大切です。この知識を活用して、より効率的で効果的なウェブデザインを実現しましょう！