HTMLとCSSどちらが優先されますか？
本文では、HTMLとCSSの優先順位について説明しています。特にCSSの優先順位について詳しく学びます。CSSを書く際には、一番最後（下）に書いたものが優先されるということを覚えておくことが重要です。ブラウザはHTMLやCSSを上から順番に読み込むので、後から読み込んだスタイルを最優先して適用します。
1. CSSを書く順位
まずはじめに、CSSは「一番最後（下）に書いたものが優先される」と覚えましょう。ブラウザはHTMLやCSSを上から順番に読み込んでいくので、基本的に後から読み込んだスタイルを最優先して適用させる特徴があります。
| 記述順 | 出力されるスタイル |
|---|---|
| 例1: 最初のCSS | 背景色: 青 |
| 例2: 最後のCSS | 背景色: 赤 |
上記の例では、同じ要素に対して背景色を設定していますが、最後に書かれた赤の背景色が適用されます。
2. CSSの読み込み順序
内部スタイルシートおよび外部スタイルシートの読み込み順も重要です。外部スタイルシートが内部スタイルシートよりも先に読み込まれる場合、内部スタイルシートのルールが優先されることとなります。
| CSSのタイプ | 優先順位 |
|---|---|
| 外部スタイルシート | 低 |
| 内部スタイルシート | 高 |
| インラインスタイル | 最高 |
インラインスタイルが最も優先されるため、特定の要素に直にスタイルを適用したい場合にはインラインスタイルを使うことができます。
3. 詳細度の重要性
CSSの優先順位では、詳細度（Specificity）の概念も重要です。同じ要素に対して複数のスタイルルールが競合する場合、より詳細に指定された方が優先されます。
| スタイルの種類 | 詳細度 |
|---|---|
| セレクター | 低 |
| クラスセレクター | 中 |
| IDセレクター | 高 |
セレクター、クラスセレクター、IDセレクターの順で詳細度が高くなります。それによってどのスタイルが適用されるかが決まります。
まとめ
以上より、CSSを書く順位や読み込み順序、詳細度がCSSの優先順位に大きな影響を与えることが分かります。HTMLとCSSを適切に使用することで、望んだ通りのウェブページをデザインすることが可能です。
その他の参考記事:html css 練習 問題