CSSの!importantはいつ使う？注意点と代替方法
CSSで指定した色や大きさが、なぜか反映されない。
そんなときに「!important を付ければ効く」と聞いたことがあるかもしれません。
この記事では、!important とは何か、使ってよい場面と、使わずに済ませる方法を解説します。
1.最優先の印は最後の手段
!important は、CSSの指定のあとに付けると、その指定をほかの指定より優先させる印です。
.button {
color: #fff !important;
}便利に見えますが、使いすぎると、あとから直すのが難しくなります。使う場面は、ほかの方法では直せないときに限りましょう。
| 使ってよい場面の例 | 理由 |
|---|---|
| プラグインや外部のCSSが、直接書き換えられない | ほかの方法で上書きできないことがある |
| どんな場合も必ず効かせたい、決まった役割の指定 | 画面を読み上げる機能向けの隠し方など |
2.使いすぎない方がよい理由
CSSには、どの指定を優先するかを決める仕組み（詳細度）があります。!important は、この仕組みを飛び越えて優先されます。
一度 !important を使うと、それを上書きするために、別の場所でも !important が必要になります。これをくり返すと、どの指定が効いているのか分からなくなり、少し直すだけでも時間がかかるようになります。
!important は、ほかの方法で直せないときの、最後の手段にしましょう。
3.!importantを使わずに済ませる方法
CSSの優先順位の仕組み
| 優先される順（強い順） | 例 |
|---|---|
| !important | color: red !important; |
| HTMLに直接書いた style | style="color: red" |
| id のセレクタ | #header |
| class のセレクタ | .button |
| タグのセレクタ | p |
同じ強さなら、あとに書いた指定が優先されます。
効かないときの直し方
- 01どの指定が効いているか確かめる
ブラウザの開発者向けの機能で、要素を選び、どの指定が使われていて、どれが打ち消されているかを見ます。
- 02書く順番を見直す
同じ強さなら、あとに書いた方が優先されます。読み込む順番も確かめます。
- 03セレクタを少しだけ具体的にする
例：.button より .header .button の方が優先されます。
- 04どうしても直せないときだけ使う
外部のCSSなどで、ほかに方法がない場合に限ります。
WordPressで使うときの注意
テーマのCSSを上書きするときは、子テーマや「追加CSS」で、セレクタを具体的にして上書きするのが基本です。子テーマについては、WordPressの子テーマとは？で解説しています。
4.よくある質問
!important を付けたのに、効きません。
ほかの場所でも !important が使われている可能性があります。その場合は、より具体的なセレクタの方や、あとに書いた方が優先されます。
!important を全部消してもよいですか？
まとめて消すと、表示が崩れることがあります。1つずつ、代わりの方法で直せるかを確かめながら減らしましょう。
HTMLに直接書いた style は、使ってもよいですか？
優先される力が強く、あとから直しにくいため、CSSのファイルにまとめて書くのがおすすめです。
どの指定が効いているか、分かりません。
ブラウザの開発者向けの機能で、要素を選ぶと、効いている指定と打ち消された指定が表示されます。
5.まとめ
!important は、CSSの指定を最優先にする印です。便利ですが、使いすぎるとあとから直しにくくなるため、最後の手段にしましょう。
- まず、ブラウザの開発者向けの機能で、どの指定が効いているか確かめる
- 書く順番や、セレクタの具体さで優先順位を調整する
- 外部のCSSなど、ほかに方法がないときだけ使う
まずは、効かないCSSがあったら、!important を付ける前に、開発者向けの機能で原因を確かめてみましょう。
CSSが効かない、表示が思いどおりにならない場合は、浅草Web屋にご相談ください。