CSSで!importantを使った優先順位の変更【初心者向け】
初心者向けにCSSで!importantを使った優先順位の変更方法について解説しています。ユーザー定義のスタイルシートを使う際など役に立つでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はCSSで!importantを使った優先順位の変更を説明します。
CSSの記述が多くなると思い通りのスタイルが適用されなくなる場合があったりしますが、優先順位を決めておくことで色やサイズを指定することができます。いざという時に覚えておくといいでしょう。
そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回は!importantを使ってみるよ。
田島メンター！！!importantというのは何をする機能なんですか〜？
スタイル適用の優先順位を上げることができる宣言なんだ。例えば通常CSSでは後から書いたものほど優先されるけど、これを使った部分は記述場所に関係なく優先されるよ。実際にやってみよう。
分かりました！
目次
優先順を変更する書き方
通常、CSSは上から順番に上書きされて適用されますので、ファイルの下の方に記載されたCSSスタイルが画面に適用されます。
また、CSSセレクタには以下の図のように様々な種類があり、種類ごとに画面に適用される優先順位が決まっています。
CSSのルールではタイプセレクタよりも、HTMLタグに直接指定する方式であるclassセレクタや、idセレクタが優先的に適用されます。
また、idセレクタはclassセレクタより優先されます。
ところが、このようにあらかじめ決められたCSSスタイル適用の優先順位を後から変更する方法があります。
それが、「!important」宣言です。
!importantを使ったサンプルコードを見てみましょう。
サンプル
p {
color : red !important;
}
通常、CSSのルールでは全称セレクタやタイプセレクタなどよりも「id」や「class」を参照した具体性の高いセレクタが優先的に適用されます。
また、「id」セレクタは「class」セレクタより優先されます。
通常、CSSはタグの近くで読まれたスタイルか、より後から読まれたスタイルが優先されます。
しかし、「!important」のキーワードが指定されたスタイルはそのルールを無視して最優先されます。
「!important」は、ユーザー定義のスタイルシートなどで使うことができます。
ユーザー定義のスタイルシートは、Web上で自分が定義したCSSスタイルシートを利用したいときに使います。
「プロパティ:値」の後ろに半角スペースを入れ、!importantを記述するんだ。
これでその部分が優先されるわけですね。
次は実際に、本来優先されない部分に!importantをつけて、結果がどうなるか見てみよう。
実際に書いてみよう
実際に「!important」を使ってみましょう。
HTML
<p class="sample">こんにちは</p>
CSS
p {
color : blue !important;
}
.sample {
color : red;
}
通常、pタグ全体に適用する「タイプセレクタ」よりも、class属性に直接指定する「classセレクタ」が優先されるため、「こんにちは」の文字は赤く表示されます。
ところが「!important」が付与されたスタイルは優先度が上がるため、「こんにちは」の文字は画面上で青く表示されます。
ブラウザで確認してみましょう。
「!important」を使わないとすると次のようになります。
コードとしては、上記CSSから「!important」を削除してください。
以上、!importantの使い方について解説しました。
どうしても変えたくないスタイルがあるときや、一部分だけどうしても優先させたいスタイルがあるときに、「!important」を使うと良いでしょう。
通常は後から書いたものが優先されるから文字列の色は赤になるね。
そこで青色指定のところに!importantを使うと、青色が優先され適用されているんですね。
!importantはあまり使いすぎると全体の構造が分かりにくくなってしまう場合もあるので、よく気を付けて使うようにしよう。
頭に入れておきます。ありがとうございました！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
