CSSの!importantの使い方をサンプルコード付き解説!

CSSのスタイルの優先順位を無視して、強制的にスタイルを適用できる「!important」の使い方をサンプルコード付きで解説します。!importantのデメリットも把握して適切に使えるようになりましょう。

コンテンツ [表示]

  1. 1CSSの!importantとは?
  2. 1.1スタイルの優先順位
  3. 1.2優先順位を無視してスタイルを適用したい
  4. 1.3!importantの使い方
  5. 2CSSの!importantのデメリット

CSSの!importantとは?

CSSではセレクタに対して、プロパティを使ってスタイルを定義していきます。例えばh1要素のテキストの色を赤にしたい場合は

h1要素のテキストの色を赤にする

h1 {
  color: red;
}

のようにします。これでh1要素の文字色は赤になりますが、では別途h1要素にheadingというクラス名が付与されていて、

.headingのスタイル

.heading {
  color: blue;
}

と文字色を青した場合は、h1要素の文字色に対して複数のスタイルが適用される形になります。もちろんどちらかしか適用されませんが、この時にスタイルの優先順位を考える必要が出てきます。

スタイルの優先順位

CSSのスタイルの優先順位は点数計算で計算され、下記のように点数を考え、合計点数が高いセレクタの指定が適用されます。
 

CSSの点数方式の計算式
セレクタの指定 点数
タグのstyle属性で指定 1,000点 style="color: blue;"
IDセレクタ 100点 #header
classセレクタ 10点 .header
属性セレクタ 10点 a[href="qumeru.com"]
疑似要素 1点 :beforeなど
要素名 1点 liなど
ユニバーサルセレクタ 0点 *

 

優先順位を無視してスタイルを適用したい

とはいえ、スタイルの優先順位を厳密に点数計算するのには時間がかかります。

時に手っ取り早く自らのスタイルを適用したいケースもあり、その場合は!importantを使うことで優先順位を無視した強制的なスタイルの適用が可能になります。

!importantの使い方

それでは早速!importantの使い方をサンプルコードで見てみましょう。

上記のサンプルコードでは!importantを使わない場合では.headingのセレクタのスタイル(文字色青)が適用されます。

しかし!importantを使うことで優先順位を無視して、h1のセレクタのスタイル(文字色赤)が最優先で適用されます。

もし!importantが上手く効かないという方は下記を参考にしましょう。

あわせて読みたい
CSSでスタイルが効かない場合の最終手段「!important」の書き方を解説!のイメージ
CSSでスタイルが効かない場合の最終手段「!important」の書き方を解説!
CSSで「!important」を記述したスタイルはCSSの優先順位を無視して、強制的に適用されます。今回は「!important」の書き方とそれでもスタイルが効かない場合の対処法を紹介します。

このように優先順位を無視できる!importantは一見便利に見えますが、デメリットも存在します。

次章で!importantのデメリットを紹介していきます。

CSSの!importantのデメリット

!importantを使いすぎると、スタイルの指定で!importantだらけになったコードとなり本来のCSSのスタイルの優先順位の計算が複雑化します。

そのため、その場しのぎの!importantを多用していると、将来的にCSSのメンテナンスのコストが増える可能性があります。つまり保守がしにくくなります。

あくまで最終手段として!importantを利用するようにしましょう。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次