「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（黒）のスタイルが優先されます。

理由として、

上記の#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を使う前に

前述の通り、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はとても使い勝手が良いことは間違いないので、使いどころを間違わず、上手に利用するように心掛けましょう。

＼プログラミングスクールを比較／