CSS !importantが効かないときの原因と解決方法7選

こんにちはテイクです。ホームページを作り続けて9年になります。

CSSは同じセレクタに同じCSSプロパティを指定されたとき、どちらか一方しか効きません。そのためCSSには優先度があります。

さらにその優先度を無視して最優先にする方法が「!important」を追加することです。

しかし、!importantを指定してもCSSが効かないときがあります。

私もこの現象になりましたが以下の方法で直してきました。

CSS !importantが効かないときの原因と解決方法を説明します。

以下の記事で「!important」の基本について詳しく記載しています。

CSSの!importantの意味・使い方･注意点まで徹底解説!

CSSの!importantの意味・使い方・書き方・優先順位・重複したらどうなるのか、注意点・効かないときの確認方法などを徹底的に解説します。マンガもあります。

この記事を読む

競合相手に!importantがついていないか

「!important」はCSSの優先度を最大にしますが、それはあくまで競合しているCSSに「!important」がなければの話です。

競合相手にも「!important」がついている場合、「!important」以外の優先度で決定します。

例

div{
    margin: 10px !important;
    /*コッチを優先させたい*/
}

div{
    margin: 20px !important;
    /*こちらにも!importantがついていて かつ優先度が高いためこちらが優先される*/
}

解決方法は以下の2つに一つです。

/*優先度を高くする*/
body div{
    margin: 10px !important;
    /*コッチを優先させたい*/
}

div{
    margin: 20px !important;
}

div{
    margin: 10px !important;
    /*コッチを優先させたい*/
}

div{
    margin: 20px;/*!importantを消す*/
}

CSSの優先度については以下の記事を参考にしてみてください。

CSSセレクタの優先順位と点数計算

疑似クラス、属性セレクタなど含めたCSSセレクタの優先順位と点数計算方法を解説します。

この記事を読む

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

スペルミスをしていないか

意外とスペルミスをしている場合があります。

ドリームウィーバーなどでは「!important」が予測変換で出てこないため、自分で入力します。

「!important」です。よく見てください。

以下チェックしましょう。

ビックリマーク「!」を忘れていないか

div{
  margin:10px important;
}

div{
  margin:10px !important;
}

「important」ではなく「!important」です。「!」が頭に必要です。

「m」と「n」を混同していないか

div{
  margin:10px !inportamt;
}

div{
  margin:10px !important;
}

「m」も「n」も「ん」の発音のため間違いがちです。確認しましょう。

「!important」の使い方を間違えていないか

CSSの前に書いていないか

div{
  !important margin:10px;
}

div{
  margin:10px !important;
}

「!important」はCSSの後に書きます。

セミコロン「;」の後に書いていないか

div{
  margin:10px;!important
}

div{
  margin:10px !important;
}

「!important」はCSSとセットです。「;」の前に書きます。

!importantを指定したつもりになっていないか

div{
  margin:10px !important;
  padding:10px;
}

div{
  margin:10px !important;
  padding:10px !important;
}

「!important」はセレクタ単位ではなく、CSSプロパティ単位で指定します。

失敗例の場合「margin」には指定していますが、「padding」には指定されていません。

上記の方法でも「!important」が効かない場合は以下の記事を参考にしてみてください。

CSSが効かない原因と回避方法【よくあるケアレスミス】

CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。

この記事を読む

max-widthを超えようとしていないか

<style>
.example{
    max-width: 100px;
    width: 300px !important;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example">

<style>
.example{
    max-width: none;
    width: 300px;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example">

max-widthは最大幅、min-widthは最小幅を指定するCSSです。これが指定されているとwidthに!importantをつけようが超えることはできません。

max-widthをnoneで初期化するなどmax-width・min-widthのほうを修正しましょう。

まとめ

!importantが効かないときは下記をチェックしてみましょう。

以上、CSS !importantが効かないときの原因と解決方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む