CSS

!importantとは?〜CSSが効かないときの対処法〜

!importantとは?

!importantはcssの優先順位を無視してcssを最優先して適用する事ができます。cssの優先順位の高い1.HTMLの要素に直接指定するstyleや3.idセレクタが適用されている場合でも!importantを使用すればcss優先順位を無視して適用する事ができます。

「cssを思うように適用されない・・・。」「cssファイルが複雑でどのcssセレクタが適用されているか分からない。」というような状況の時に、!importantを使う事により最優先(cssの優先順位を無視)してcssを適用する事ができます。

CSSのidとclassとは?違いを分かりやすく説明

続きを見る

適用されない場合の最後の手段が「!important」

!importantを使用すると、cssの優先順位を無視して最優先してcssを適用する訳ですから、分かりにくいソースコードになりwebブラウザ読み込み速度も遅くなります。!importantはcssの優先順位を無視してしまうので!importantを乱用すると制御が効かなくなります。その為、!importantはcssが適用されない場合に、最後の手段として使用しましょう。

!important使用時のメリット、デメリット

メリット

  • css優先順位を無視して適用する事ができる
  • 記述が簡単「!important」のみ
!importantは記述が簡単でcss優先順位を無視して適用する事ができるので使用する事自体は簡単です。使用方法が簡単ですが、デメリットもあります。

デメリット

  • 乱用すると制御が効かなくなる
  • 分かりにくいソースコードになる
  • Webブラウザ読み込み速度が遅くなる

!importantは記述が簡単である反面、乱用するとデメリットが多数ある事が分かります。

HTMLにCSSファイルを適用する三つの方法をご紹介!HTMLとCSSの関係

続きを見る

!importantの使い方

!importantの指定方法

!importantの基本的な使い方は、cssのスタイルを指定している[プロパティ:値]の後ろにスペースを空け!importantを記述する。

!importantを使用する際にはcssファイルもしくはhtmlファイルのタグ内スタイルの指定の部分に!importantを記述する。

!importantの基本的な書き方

!importantの基本的な書き方

セレクタ名{

プロパティ: 値 !important;

}

  • class名に対して!importantを記述する例(style.cssファイル)

  • id名に対して!importantを記述する例(style.cssファイル)

  • HTMLのタグに直接記述するstyleの例(index.htmlファイル)

id・classセレクタに!importantを適用する

idセレクタとclassセレクタの優先順位は、idセレクタの方がcss優先順位は高い(idセレクタ>classセレクタ)です。classセレクタとidセレクタが同時適用されたstyle.cssファイルを例にしてclassセレクタ内に!importantを記述してみましょう。

1.id・classセレクタを同時適用したコード

  • HTMLコード

  • CSSコード

  • HTMLコード
  • Hitomi・・・idセレクタでid="Hitomi"を指定。classセレクタでclass="Ume"を指定。
  • Yoshihiro・・・classセレクタでclass="Ume"を指定。
  • Mei・・・classセレクタでclass="Ume"を指定。
  • CSSコード
  • classセレクタ「.Ume」・・・背景色をイエローに指定。
  • idセレクタ「#Hitomi」・・・背景色をピンクに指定。

2.id・classセレクタを同時適用した場合の外観

idセレクタとclassセレクタが適用されたcss

idセレクタでピンク、classセレクタでイエローを指定したHTML要素Hitomiはidセレクタで指定したピンクを適用されているのが分かります。CSS優先順位(idセレクタ>classセレクタ)が適用されているのが分かります。

3.classセレクタに!importantを適用したコード

CSSコードの".Ume"(classセレクタ)内に!importantを記述します。

  • HTMLコード

  • CSSコード

4.idセレクタに!importantを記述した場合の外観

css id・class・!imporatantを適用

Hitomiの背景色がピンクからイエローに変わりました。!importantを”Ume”(classプロパティ)に記述する事で、css優先順位(idプロパティ>classプロパティ)を無視して”Ume”(classプロパティ)で指定した背景色イエローが適用されました。

まとめ

!importantまとめ

  • !importantを使う事によりcss優先順位を無視してcssを適用する事ができる
  • !importantを乱用するとWebブラウザの読み込み速度が遅くなり、cssを制御する事ができなくなってしまうので最終兵器として使用する
CSS marginとpaddingとは?〜CSSで余白を作る方法〜

続きを見る

-CSS
-

© 2021 OWLVIEW Powered by AFFINGER5