ログイン
問題16

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

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

アイコン画像

問題16: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!!
LINEの友達追加でお役立ち動画をGET!!

閉じる