目次
!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」のみ
デメリット
- 乱用すると制御が効かなくなる
- 分かりにくいソースコードになる
- Webブラウザ読み込み速度が遅くなる
!importantは記述が簡単である反面、乱用するとデメリットが多数ある事が分かります。
-
-
HTMLにCSSファイルを適用する三つの方法をご紹介！HTMLとCSSの関係
続きを見る
!importantの使い方
!importantの基本的な使い方は、cssのスタイルを指定している[プロパティ：値]の後ろにスペースを空け!importantを記述する。
!importantを使用する際にはcssファイルもしくはhtmlファイルのタグ内スタイルの指定の部分に!importantを記述する。
!importantの基本的な書き方
!importantの基本的な書き方
セレクタ名{
プロパティ: 値 !important;
}
- class名に対して!importantを記述する例(style.cssファイル)
|
1 2 3 |
.classname{ background-color:yellow !important; } |
- id名に対して!importantを記述する例(style.cssファイル)
|
1 2 3 |
#Hitomi{ background-color:pink !important; } |
- HTMLのタグに直接記述するstyleの例(index.htmlファイル)
|
1 2 3 |
<body> <div style="background-color:pink">HItomi</div> </body> |
id・classセレクタに!importantを適用する
idセレクタとclassセレクタの優先順位は、idセレクタの方がcss優先順位は高い(idセレクタ>classセレクタ)です。classセレクタとidセレクタが同時適用されたstyle.cssファイルを例にしてclassセレクタ内に!importantを記述してみましょう。
1.id・classセレクタを同時適用したコード
- HTMLコード
|
1 2 3 4 5 6 7 |
<body> <div> <div id="Hitomi" class="Ume">HItomi</div> <div class="Ume">Yoshihiro</div> <div class="Ume">Mei</div> <div> </body> |
- CSSコード
|
1 2 3 4 5 6 |
.Ume{ background-color:yellow; } #Hitomi{ background-color:pink; } |
- 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セレクタでイエローを指定したHTML要素Hitomiはidセレクタで指定したピンクを適用されているのが分かります。CSS優先順位(idセレクタ>classセレクタ)が適用されているのが分かります。
3.classセレクタに!importantを適用したコード
CSSコードの".Ume"(classセレクタ)内に!importantを記述します。
- HTMLコード
|
1 2 3 4 5 6 7 |
<body> <div> <div id="Hitomi" class="Ume">HItomi</div> <div class="Ume">Yoshihiro</div> <div class="Ume">Mei</div> <div> </body> |
- CSSコード
|
1 2 3 4 5 6 |
.Ume{ background-color:yellow !important; } #Hitomi{ background-color:pink; } |
4.idセレクタに!importantを記述した場合の外観
Hitomiの背景色がピンクからイエローに変わりました。!importantを”Ume”（classプロパティ）に記述する事で、css優先順位(idプロパティ＞classプロパティ)を無視して”Ume”（classプロパティ）で指定した背景色イエローが適用されました。
まとめ
!importantまとめ
- !importantを使う事によりcss優先順位を無視してcssを適用する事ができる
- !importantを乱用するとWebブラウザの読み込み速度が遅くなり、cssを制御する事ができなくなってしまうので最終兵器として使用する
-
-
CSS marginとpaddingとは？〜CSSで余白を作る方法〜
続きを見る