CSSはどちらが優先されますか？

 

CSSはどちらが優先されますか？

Webページのデザインを決定づけるCSS。複数のスタイルを指定した場合、どれが優先されるのか、迷ったことはありませんか？この記事では、CSSの優先順位について、具体的な例を交えながら解説していきます。

基本は「後勝ち」ルール

まずはじめに、CSSは「一番最後（下）に書いたものが優先される」と覚えましょう。 ブラウザはHTMLやCSSを上から順番に読み込んでいくので、基本的に後から読み込んだスタイルを最優先して適用させる特徴があります。

<style>
  p {
    color: blue; /* 青色のスタイル */
  }
  p {
    color: red;  /* 赤色のスタイル */
  }
</style>
<p>この文章の色は？</p>

上記の例では、後から指定した「color: red;」が優先され、文章は赤色で表示されます。

CSSの優先順位

CSSの優先順位は、以下の要素によって決定されます。優先順位が高いものほど、スタイルが適用されやすくなります。

優先順位 種類 説明
1. !important 重要度 スタイル指定の最後に「!important」を付与することで、他のどのスタイルよりも優先されます。ただし、安易な使用は避け、本当に必要な場合のみに限定しましょう。
2. インラインスタイル 記述位置 HTMLタグ内に直接記述するスタイルです。適用範囲が狭く、他の要素への影響が少ないですが、HTML構造とスタイルが混在するため、管理が複雑になりがちです。
3. IDセレクタ セレクタの特異度 HTML要素にID属性で指定した要素にのみ適用されます。IDはページ内で一意であるため、特異度が高く、他のスタイルよりも優先されます。
4. クラスセレクタ、属性セレクタ、疑似クラス セレクタの特異度 クラスや属性、要素の状態などを指定してスタイルを適用します。IDセレクタよりも特異度は低くなります。
5. 要素セレクタ セレクタの特異度 HTML要素の種類を指定してスタイルを適用します。最も基本的なセレクタですが、特異度が低いため、他のスタイルで上書きされやすいです。
6. 継承 継承 親要素のスタイルが子要素に引き継がれることを指します。すべてのスタイルが継承されるわけではなく、色やフォントサイズなどは継承されますが、マージンやパディングは継承されません。

具体的な例

以下のHTMLとCSSを例に、優先順位を見てみましょう。

<style>
  p {
    color: blue; /* 要素セレクタ */
  }
  .text-red {
    color: red; /* クラスセレクタ */
  }
  #title {
    color: green; /* IDセレクタ */
  }
</style>
<p class="text-red" id="title">この文章の色は？</p>

この場合、IDセレクタ「#title」で指定された色が最も優先度が高いため、文章は緑色で表示されます。

まとめ

CSSの優先順位を理解することは、Webページのデザインを思い通りに制御するために非常に重要です。基本は「後勝ち」ルールですが、セレクタの種類や!importantの利用などによって、優先順位が変わってくることを覚えておきましょう。優先順位を意識したCSS設計を行うことで、予期せぬスタイルの崩れを防ぎ、保守性の高いWebサイトを作ることができます。

参考資料

よくある質問

Q1. !importantは多用しても問題ない？

A1. !importantは、他のスタイルの優先順位を無視するため、多用するとCSSの管理が複雑になり、後々の修正が困難になる可能性があります。本当に必要な場合のみに限定して使用しましょう。

Q2. インラインスタイルはなぜ推奨されない？

A2. インラインスタイルは、HTML構造とスタイルが混在するため、コードの見通しが悪くなり、管理が複雑になります。CSSを外部ファイルにまとめて記述することで、コードの見通しを良くし、保守性を高めることが推奨されます。

Q3. 優先順位が競合した場合はどうなる？

A3. 優先順位が同じ場合は、後から記述されたスタイルが優先されます。例えば、同じクラスセレクタが二つある場合は、HTML上で後に記述された方のスタイルが適用されます。

その他の参考記事: