【CSS】スタイルを強制上書きする方法(!important)

2023年1月29日2023年7月9日

CSSでサイトのデザインを変更したいけど、既存のスタイルが優先されて上手く反映されない。優先順位の法則を調べたけどイマイチ理解できないという方向けに、本記事ではCSSでスタイルを強制上書きする方法について解説しています。

HTML/CSSの学習におすすめ書籍

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

総合評価

( 5 )

メリット

楽天ブックス

¥2,486 （2024/11/18 14:59時点 | 楽天市場調べ）

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

ポチップ

!importantの使い方

スタイルの強制上書きする方法はとても簡単で、通常通りの書き方の後ろに「!important」を付けるだけでOKです。

h1 {
    color: blue !important;
}

!importantはCSSの優先順位に関係なく上書きできるため、便利に思われる方もいますが1つのページに何個も使用してしまうと後々!importantだらけになって、後の修正や改修などで大変な目に遭います。。

先輩くん

!importantに頼らないと修正することが出来ない！という場面以外では使用するのは控えましょう。

よかったらシェアしてね！