HTMLタグ内でCSSが適用される優先順位を現役デザイナーが解説【初心者向け】
初心者向けにHTMLタグ内でCSSが適用される優先順位について解説しています。HTMLタグ内に書いた場合、外部から読み込んだ場合などによってスタイルが適用される順番は決まっています。優先される順位と一部に強制的にスタイルを適用させる方法を見ていきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
HTMLタグ内でCSSが適用される優先順位について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLタグ内でCSSが適用される優先順位について詳しく説明していくね！
お願いします！
CSSスタイルの基本
cssのスタイルの当たり方には、優先順位というものがあります。下記の表を参照ください。
| 書き方 | 点数 |
|---|---|
| HTMLタグ内にstyle属性 | 1000点 |
| ID | 100点 |
| class | 10点 |
| 属性セレクタ | 10点 |
| 要素名 | 1点 |
| 擬似要素 | 1点 |
| ユニバーサルセレクタ | 0点 |
HTMLタグ内に直接CSSを記述する場合の優先順位
HTML内に直接スタイルを書き込む場合は
<p style="color:red;">ここは赤くなるよ</p>
という風に書き込みます。また、要素が親子関係になっている場合は、子要素に書き込んだスタイルが優先されます。
例
<div style="color:red;"> <p style="color:blue;">ここは青くなるよ</p> </div>
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
外部からCSSを読み込んだ場合の優先順位
cssは基本的に「後から書いたものが優先される」のですが、上に紹介した点数の表を見るとわかるとおり、スタイルの当たり方には優先順位というものも関係してきます。
例えば、classにつけたスタイルより後にidで同じスタイルを付けてしまうと、力関係は「 id ＞ class 」となっており、id のスタイルが優先されてしまいます。
下のコードを参照してください。
HTML
<p id="hoge1" class="hoge2">色は青くなってしまいます。</p>
CSS
#hoge1{
color:blue;
}
.hoge2{
color:red;
}
強制的にCSSを適用する方法
書き方の点数による優先順位を強制的にひっくり返したい、どうしてもつけたいスタイルがある、というときはcssのセレクタの後に「!important」を付けることで強制的にスタイルを当てることができます。
では、以下のようなHTMLとCSSがあった時、実際にあたるスタイルはどれか確認してみましょう。
HTML
<p style="color:red;" id="hoge3">この文字は何色でしょうか?</p>
CSS
#hoge3{
color:blue;
}
p{
color:pink!important;
}
答えは…ピンクとなります。
!importantを付けると、インラインでかこうがIDにスタイルを付けようが強制的に優先順位1番となってしまいます。
ただし、多用するとあとでcssを付け替えたいときなどに「cssが効かない!」などと困ってしまう場合がありますので、どうしても必要な時にだけのみ用いることをお勧めします。
監修してくれたメンター
| メンター増田直子
40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
