CSSのスタイルシートルールを上書きする優先順位ルール

CSSのスタイル適用優先順位とは

スタイルシートには複数の定義方法がありますが、同じ要素に対して異なるルールが指定された場合、どのスタイルが適用されるかは明確な優先順位に従って決まります。ここでは、任意のスタイルシートルールを上書きする際の基本ルールを解説します。

1. インラインスタイルが最も優先される

HTML要素のstyle属性に直接記述したインラインスタイルは、最も高い優先度を持ちます。そのため、<style>...</style>タグ内で定義されたルールや、外部スタイルシートファイルで定義されたルールよりも優先して適用されます。

<p style="color: red;">このテキストは赤色で表示されます</p>

2. <style>タグ内のルールが次に優先される

HTML文書内の<style>...</style>タグで定義されたルールは、外部スタイルシートファイルで定義されたルールを上書きします。ページ固有のスタイルを一時的に調整したい場合などに活用できます。

3. 外部スタイルシートファイルの優先度が最も低い

外部スタイルシートファイル（.cssファイル）で定義されたルールは、優先度が最も低くなります。これらのルールが実際に適用されるのは、インラインスタイルおよび<style>タグ内のルールが存在しない場合のみです。

優先順位のまとめ

スタイルの適用優先順位を高い順に並べると、以下のようになります。

1. インラインスタイル（style属性）
2. <style>タグ内のルール
3. 外部スタイルシートファイルのルール

なお、これらの優先順位に関係なく特定のスタイルを強制的に適用したい場合は「!important」を使用する方法もあります。ただし乱用するとスタイルの管理が難しくなり、メンテナンス性が低下するため、使用は最小限にとどめることが推奨されます。