CSSにおけるimportantの意味や使い方、注意点を徹底解説

2021.09.16

「CSSを記述した筈なのに、スタイルが効かない」

こんな経験はないでしょうか。それは、同じ箇所に別のスタイルが適用されていて、バッティングを起こしている可能性があります。

この記事では、CSSがバッティングを起こすとはどういうことなのか、そして、その解決策であるimportantの使用法や注意点などを解説しています。

実際のコードを用いてわかりやすく解説しますので、最後までご覧ください。

importantとは

importantは「重要」の言葉の意味の通り、これが記述されたスタイルを最優先に適用させるという宣言です。CSSには優先度があります。

HTML
<div class=”sample”>
   <p>色を変えるよ</p>
</div>
CSS
p {
  color:#cccccc;
}

div p.sample {
  color:#000000;
}

上記のコードでは、3つの理由で下のcolor(テキストの色)が#000000(黒)のスタイルが優先されます。

理由として、

  • 一つめは、後に記述されていること。CSSは、下に記述していくにつれて上書きするのが一般的
  • 二つめは、クラス名。クラス「sample」が指定されているので、より詳細な記述となり優先される。
  • 三つめは、子孫セレクタ。上のスタイルはただのp要素だが、下はdiv要素の中のp要素という指定。クラス名と同様、より詳細な指定となるので優先される。

上記の#cccccc(グレー)のように、CSS上の優先度が低く、適用されないスタイルをどうしても使いたい時に使用するのが「important」です。importantを記述すれば、必ず有効になります。非常に、強制力がある宣言なのです。

まずはimportantの使い方から紹介していきます。

importantの使い方

ここからはimportantの実践を解説します。方法は簡単です。

importantの前に半角のエクスクラメーションマーク「!」をつけて「!important」とします。これをCSSの値の後ろに記述します。具体的には、以下のような形です。

CSS
p {
  color:#cccccc !important;
}

上記のように記述すると、本来優先されるスタイルがあったとしても、p要素のcolor(色)が#cccccc(グレー)になります。

なお、値とエクスクラメーションマーク「!」の間の半角スペースは無くても問題ありませんが、あった方がコードが見やすくなります。

もっとわかりやすくコードで例えると、

CSS
p {
  color:#cccccc !important;
}
p {
  color:#000000;
}

この場合、本来は下にある#000000(黒)が優先されますが、#cccccc(グレー)にimportantが記述されているので、そちらが優先されます。

クラス名や子孫セレクタなど、他の要因で優先順位が劣っている場合でも、importantは必ず最優先となります。

importantの解除方法

importantを解除する方法はありません。最優先という意味なので、それ以上に強力な宣言は存在しないのです。importantを記述した箇所以上に優先させたいスタイルがある場合は、importantを削除しても意図したスタイルがすべて適用されるよう、優先順位を意識してCSSを書き換えなければなりません。

それが難しいというときは、importantを二重にするという方法があります。

CSS
p {
  color:#cccccc !important;
}
p {
  color:#000000 !important;
}

このようにどちらのスタイルにもimportantが記述されている場合、本来の優先順位が上である#000000(黒)が適用されます。importantの上からimportantをかぶせるということは可能です。

スタイルを解除する、initialという値も覚えておくと便利です。

CSS
p {
  color:#cccccc;
}
p {
  color:initial;
}

最初のスタイルでp要素のcolor(色)が#cccccc(グレー)に設定されましたが、initialによって、デフォルトの設定値に戻ります。スタイルを、一旦リセットすることができるのです。

importantを使わずとも、スタイルの記述を共存できるようになるかもしれません。

importantの注意点

importantはとても便利な宣言ですが、使いすぎには注意が必要です。

理由としては、

  • 本来の優先順位を無視して割り込むというものなので、CSSの原則や、独自で定めたルールが見えにくくなる
  • 表示が崩れた際、原因を突き止めたとしても、そこにimportantが関わっていたとしたら、かなり大掛かりな修正作業を強いられる
  • importantを多用していると、CSS内が最優先というスタイルばかりになり、優先すべきスタイルが分からなくなる
  • 本当にimportantが必要なときに他のimportantとぶつかってしまい、使用できなくなる可能性がある
  • スタイルを上書きするために、毎回のようにimportantを使用していたのでは必ずコードに無駄な箇所が出てきて管理が難しくなる

CSSはできる限り自然なルールに則って記述し、importantの使用は必要最小限に留めるようにしてください。

importantを使う前に

前述の通り、importantの乱用は好ましくありません。スタイルが効かないからといって、すぐにimportantを記述してしまうのは禁物です。

スタイルが効かない代表的な理由を紹介するので、importantを使う前にチェックしてみてください。

優先順位

先にも解説した通り、スタイルの優先順位が低い場合は、適用されません。上に来ているスタイルが無いか確認し、子孫セレクタやクラス名、ID名などを上手く使って優先順位をあげるようにしてください。

キャッシュ

とてもよくあるパターンです。CSSを修正して更新ボタンを押しても変化が無いという場合、CSSのキャッシュが残っていて、修正ファイルを読み込めていないという可能性があります。キャッシュをクリアしてから、もう一度確認してみてください。

スペルミス

クラス名や、ID名の記述に特に注意が必要です。任意で決めるものなので、ミスがおきやすくなっています。スタイルが多くなってくると、似たような名前も増えてきて、間違ってしまうということもあります。

HTML側と、CSS側の名前が必ず同じになるようにしてください。もちろん、要素名なども気を付けなければなりませんが、慣れと共にミスは減っていくでしょう。

セレクタの順番が違う

例えば、以下のような場合です。

HTML
<article>
  <div>
    <p>サンプル</p>
  </div>
</article>
CSS
div article p {
  color:#cccccc;
}

HTMLはarticle要素の中のdiv要素の中にp要素が入っていますが、CSSはdiv要素の中のarticle要素の中のp要素という指定です。このようにセレクタの順番が間違っていると、スタイルは適用されません。

ページの構造が複雑になってくると、こうしたミスも起こりがちなので気を付けてください。

まとめ

importantはすべてに優先させてスタイルを適用できるので、とても便利な存在です。その分、管理や修正におけるデメリットも大きく、安易な使用は好ましくありません。しかしながら、スタイルシートが長いときや、複数のスタイルシートを使用しているときなど、頼らざるを得ないシチュエーションも存在します。

importantはとても使い勝手が良いことは間違いないので、使いどころを間違わず、上手に利用するように心掛けましょう。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5