
問題16:styleの優先順位を変更しよう
styleの優先順位を変更してみましょう。
ご自身のCSSファイルに記述して文字を青色にしてみましょう。
ご自身のCSSファイルに記述して文字を青色にしてみましょう。
あらかじめエディタに書くコード
<p style="color: red;">この文字をCSSを使用して青色にしてみましょう。</p>
¥HTML¥
期待する画面

解答ソースコード
<p style="color: red;">この文字をCSSを使用して青色にしてみましょう。</p>
¥HTML¥
p {
color: blue !important;
}
¥CSS¥
補足
HTMLの要素にCSSを反映させる場合、記述方法によって優先順位が異なります。優先順位は以下のような仕組みになっています。
タイプセレクタ(divやpなどのタグ)< class < id < HTMLファイル内のstyleタグ
最も優先されるのは、HTMLファイルに記述するstyleタグです。
ですが、今回の問題で登場した「!important」を付与することで、どのstyle指定よりも最優先で反映されるようになります。
ただ解説でも説明されているように多用することはやめておきましょう。importantが色々なところにあると何が最優先のstyleなのかが分からなくなってしまいます。
基本的には、上記の優先度通りでことたりるように記述するようにしましょう。
タイプセレクタ(divやpなどのタグ)< class < id < HTMLファイル内のstyleタグ
最も優先されるのは、HTMLファイルに記述するstyleタグです。
ですが、今回の問題で登場した「!important」を付与することで、どのstyle指定よりも最優先で反映されるようになります。
ただ解説でも説明されているように多用することはやめておきましょう。importantが色々なところにあると何が最優先のstyleなのかが分からなくなってしまいます。
基本的には、上記の優先度通りでことたりるように記述するようにしましょう。
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
HTMLのスタイルが優先されます。(HTML > CSS)
またHTMLやCSSファイルは
上から下にかけて実行されていきますので
全く同じセレクタにスタイルが上下で付与されている場合
下に記述されているスタイルが優先されます。
あまりこの方法は好ましくありませんが
プロパティに!importantを付与することによって優先順位をあげることができます。緊急回避として覚えていただければ役に立つと思います。