問題
16styleの優先順位を変更しよう
CSSでstyleを指定する方法にはいくつかありますが、一部だけ優先させたいスタイルがある場合などに役立つ方法となります。それぞれの指定方法に優先される順番があるのでこの際把握しておきましょう。
HTML_CSSの問題に挑戦しよう！
問題
「styleの優先順位を変更しよう」
styleの優先順位を変更してみましょう。
ご自身のCSSファイルに記述して文字を青色にしてみましょう。
あらかじめエディタに書くコード
<p style="color: red;">この文字をCSSを使用して青色にしてみましょう。</p>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
HTMLファイルにスタイルが当てられている場合
HTMLのスタイルが優先されます。(HTML > CSS)
またHTMLやCSSファイルは
上から下にかけて実行されていきますので
全く同じセレクタにスタイルが上下で付与されている場合
下に記述されているスタイルが優先されます。
あまりこの方法は好ましくありませんが
プロパティに!importantを付与することによって優先順位をあげることができます。緊急回避として覚えていただければ役に立つと思います。
補足
HTMLの要素にCSSを反映させる場合、記述方法によって優先順位が異なります。優先順位は以下のような仕組みになっています。
タイプセレクタ(divやpなどのタグ)< class < id < HTMLファイル内のstyleタグ
最も優先されるのは、HTMLファイルに記述するstyleタグです。
ですが、今回の問題で登場した「!important」を付与することで、どのstyle指定よりも最優先で反映されるようになります。
ただ解説でも説明されているように多用することはやめておきましょう。importantが色々なところにあると何が最優先のstyleなのかが分からなくなってしまいます。
基本的には、上記の優先度通りでことたりるように記述するようにしましょう。
