HTMLタグ内でCSSが適用される優先順位を現役デザイナーが解説【初心者向け】
初心者向けにHTMLタグ内でCSSが適用される優先順位について解説しています。HTMLタグ内に書いた場合、外部から読み込んだ場合などによってスタイルが適用される順番は決まっています。優先される順位と一部に強制的にスタイルを適用させる方法を見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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>
外部から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が効かない!」などと困ってしまう場合がありますので、どうしても必要な時にだけのみ用いることをお勧めします。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター増田直子
40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
