HTMLとCSS、どっちが優先？スタイル適用ルールを徹底解説！
Webページのデザインにおいて、HTMLとCSSは切っても切り離せない関係にあります。HTMLが文章の構造を決め、CSSがその見栄えを整える役割を担っています。しかし、HTMLとCSSの記述が競合した場合、どちらが優先されるのでしょうか？
この記事では、HTMLとCSSの優先順位について、具体的な例を交えながら解説していきます。
1. CSSを書く順番：後勝ちルール
まず初めに、CSSは「一番最後（下）に書いたものが優先される」と覚えましょう。
ブラウザはHTMLやCSSを上から順番に読み込んでいくので、基本的に後から読み込んだスタイルを最優先して適用させる特徴があります。
<style>
p {
color: blue; /* 最初に指定した青色 */
}
p {
color: red; /* 後から指定した赤色が優先される */
}
</style>
<p>このテキストは赤色で表示されます。</p>
上記の例では、同じ p タグに対して異なる color プロパティが設定されていますが、後から指定した color: red; が優先され、テキストは赤色で表示されます。
2. CSSの適用範囲：より具体的であれば勝ち！
CSSの適用範囲が異なる場合は、より具体的な記述の方が優先されます。例えば、HTMLの要素に直接スタイルを指定する「インラインスタイル」は、<style> タグ内で指定するスタイルよりも優先されます。
| 優先順位 | 適用範囲 | 記述例 |
|---|---|---|
| 高 | インラインスタイル | <p style="color: red;">赤いテキスト</p> |
| 中 | <style>タグ内 | p { color: blue; } |
| 低 | 外部CSSファイル | /* style.css */
p { color: green; } |
上記のように、同じ要素に複数のスタイルが適用される場合、優先順位の高いスタイルが適用されます。
3. !important宣言：強制的に優先！
!important 宣言を使うと、他のCSSの記述よりもそのスタイルを強制的に優先させることができます。
<style>
p {
color: blue !important; /* !importantで青色を強制 */
}
p {
color: red;
}
</style>
<p>このテキストは青色で表示されます。</p>
上記の例では、後から指定された color: red; よりも、 !important 宣言がついた color: blue; が優先され、テキストは青色で表示されます。
ただし、!important は多用するとCSSのメンテナンス性を低下させる可能性があるので、本当に必要な場合にのみ使用しましょう。
よくある質問
Q1: 外部CSSファイルと<style>タグ内のCSS、どちらを優先すべき？
A1: 基本的に外部CSSファイルに記述することを推奨します。外部CSSファイルにまとめることで、HTMLファイルがシンプルになり、CSSの再利用性も高まります。
Q2: インラインスタイルは使ってはいけないの？
A2: インラインスタイルは、HTMLとCSSの分離を妨げ、メンテナンス性を低下させる可能性があるため、特別な理由がない限り使用は避けるべきです。
Q3: CSSの優先順位が複雑で覚えられない場合は？
A3: 開発者ツールなどを活用して、実際にブラウザがどのCSSを適用しているかを確認しながら、スタイルを調整していくと良いでしょう。
その他の参考記事: