CSSが効かない時の最終手段！最強の「!important」とは？

「指定したCSSが効かない！」

こんなシーンの時、あなたならどうしますか？

• 指定ミスの確認
• 優先度の確認
• 単純なスペルミスが無いかの確認

など、対処法はいくつか思いつくと思います。その中で、強力な対処法と呼べるのが、「!important」を使った方法になります。

今回は、この「!important」について詳しく見ていきます。

お助け猫

今回の記事は、次のような方にお勧め！

・!importantとは何か知りたい方
・使いどきにイマイチ悩んでいる時

!importantとは？

本来、CSSの優先順位というのは、様々な「規則」に沿って決定されます。

• セレクタ指定による優先順位の点数（詳細度という）
• 後から出てきた指定の方が強い

など上記のような規則に沿って決定されます。ですが、本来のCSSの優先順位を完全に無視して、優先順位を強制的に上げる指定方法が存在します。それが、「!important」を使う方法です。

使い方は、下記サンプルコードのように、値の後ろに半角スペースを入力して、「!important」と記述します。

p{
  color: blue !important;
}

この記述で、優先順位が「最強」になり、p要素の色の指定は「青」となり、他のどの指定にも負けなくなりなります。

乱用で起こる支障について

お悩みさん

CSSが上手く効かなくて悩んでたけど、めちゃくちゃ便利♪いっぱい使います！

と思った方は、一旦ストップです！

乱用すると、サイトの更新作業の際、支障が出る場合があります。「!important」は、存在するだけで本来のCSSの優先順位を狂わせてしまうため、サイトの更新作業を行う際、CSS本来の指定が上手く効かなくなり、面倒な事になります。

その為、原則使用しない事をおすすめします。

使い分けについて

お悩みさん

え？じゃあ、具体的にどんな場合に使うべき指定なの？

使用OKなシーンと、使用NGなシーンを分けて解説します。

使用OKの場合

WEBサイトの規模が小さく、コードが少なくて支障が出ない場合と、どの指定にも負けたく無いパーツを作成する際は、使用しても問題ありません。

使用NGの場合

コード量やチームの人数等、規模が大きければ大きい程、どこに何の指定が効いているか確認するのが大変になりますので、上記のような場合は、使わないことをおすすめします。

まとめ

いかがでしょうか？一見便利に見える指定方法ですが、使い方には、十分注意してお使いいただければと思います。