ログイン

問題16 styleの優先順位を変更しよう

HTML_CSSの問題

HTML_CSS

CSSでstyleを指定する方法にはいくつかありますが、一部だけ優先させたいスタイルがある場合などに役立つ方法となります。それぞれの指定方法に優先される順番があるのでこの際把握しておきましょう。

styleの優先順位を変更しよう

問題

styleの優先順位を変更してみましょう。
ご自身のCSSファイルに記述して文字を青色にしてみましょう。

自分の環境に書くコード

              <p style="color: red;">この文字をCSSを使用して青色にしてみましょう。</p>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <p style="color: red;">この文字をCSSを使用して青色にしてみましょう。</p>
¥HTML¥
            
              p {
  color: blue !important;
}
¥CSS¥
            
答えのアイコン

解説

HTMLファイルにスタイルが当てられている場合
HTMLのスタイルが優先されます。(HTML > CSS)

またHTMLやCSSファイルは
上から下にかけて実行されていきますので
全く同じセレクタにスタイルが上下で付与されている場合
下に記述されているスタイルが優先されます。

あまりこの方法は好ましくありませんが
プロパティに!importantを付与することによって優先順位をあげることができます。緊急回避として覚えていただければ役に立つと思います。
ログインして解答を見る
HTMLの要素にCSSを反映させる場合、記述方法によって優先順位が異なります。優先順位は以下のような仕組みになっています。
タイプセレクタ(divやpなどのタグ)< class < id < HTMLファイル内のstyleタグ
最も優先されるのは、HTMLファイルに記述するstyleタグです。
ですが、今回の問題で登場した「!important」を付与することで、どのstyle指定よりも最優先で反映されるようになります。
ただ解説でも説明されているように多用することはやめておきましょう。importantが色々なところにあると何が最優先のstyleなのかが分からなくなってしまいます。
基本的には、上記の優先度通りでことたりるように記述するようにしましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!