CSSでスタイルが効かない場合の最終手段「!important」の書き方を解説!

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

コンテンツ [表示]

  1. 1CSSでスタイルが効かない場合の最終手段の「!important」
  2. 1.1CSSの!importantのデメリット
  3. 2CSSの!importantの書き方
  4. 3CSSの!importantを付けてもスタイルが効かない場合は?
  5. 3.1!importantが複数箇所で設定されている
  6. 3.2CSSの文法ミス

CSSでスタイルが効かない場合の最終手段の「!important」

CSSでは同じ要素にスタイル指定が複数あり、重複している場合は優先順位を考える必要があります。優先順位は点数で計算ができ、上手くセレクタを指定することで思い通りにスタイルが適用できるはずです。

一方でその点数の計算を無視し、強制的にスタイルを適用させる方法としてあるのが「!important」です。

この!importantですが、どうしてもスタイルが適用されないときの救世主にもなりえますが、基本的には使わない方が良いとされています。

Photo byStockSnap

CSSの!importantのデメリット

CSSの!importantは多様してしまうと、思わぬ事故につながります。!importantは点数の計算を無視して適用されるため、点数をしっかり計算しているプロジェクトに導入されると「あれ?なぜか点数通りにやってもCSSが反映されない。。」と言った事態になりえます。

「!important」は後々にCSSを書いていく際に問題になってくる可能性があり、つまり「メンテナンス性」を損なうというデメリットがあります。

bootstrapなどのライブラリのスタイルも効かなくなることも

更に自分の定義したスタイル上で!importantがあると、あとでbootstrapなどのデザインのライブラリを適用した際に、デザインが適用されないといった可能性も出てきいます。

このように!importantは何も考えず、自分のスタイルを短期的にはすぐに適用できますが、中期・長期で見たときに思わぬ落とし穴にはまる可能性があるものになります。

CSSの!importantの書き方

さて、CSSの!importantのデメリットを紹介してきましが、どうしてもすぐにスタイルを適用する必要があるときの手段としてぜひ書き方は覚えておきましょう。

!importantは下記のように記述していきます。

上記の例ではCSSの優先順位を考えると点数上は後者の.headingが勝っています。しかし前者のh1のセレクタのスタイルでは!importantが記述されており、最終的にはそちらが優先され、文字が赤く表示されています。

このようにCSSの!importantは下記のように記述します。

!importantの書き方

セレクタ {
  プロパティ: 値 !important;
}

importantの前に!があるのと、;(セミコロン)の位置は文末ですので、その点だけ注意しましょう。

CSSの!importantを付けてもスタイルが効かない場合は?

さてこの!importantですが、付けてもスタイルが効かないケースがあります。どういう場合でしょうか?

!importantが複数箇所で設定されている

下記の例を見てみましょう。

前者のh1のセレクタで!importantがついていますが、最終的には後者の指定が適用されています。これは前者・後者両方で!importantが指定されているためです。

このように競合相手も!importantがついている場合は同条件で、この場合は優先度勝負になります。

この場合は素直に優先度を計算して対応しましょう。

あわせて読みたい
CSSのスタイルの優先順位のルールと優先度を上げる方法を解説!のイメージ
CSSのスタイルの優先順位のルールと優先度を上げる方法を解説!
CSSではスタイルの指定が複数あり重複しているときに優先順位を考える必要があります。CSSの優先順位のルールと優先度の上げ方について解説していきます。

CSSの文法ミス

その他!importantはスペルミスや、文法エラーに注意しましょう。初心者でこのようにミスは結構発生することがあります。

エディターの文法チェックの機能があれば、そこで見つけるか下記のサービスでも文法チェックが行なえますので、ぜひ利用してみましょう。

The W3C CSS Validation Service

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

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

関連記事

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

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

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

目次