【初心者向け】css　important　

プログラミングの学習をしている時に、

「!importantがついててcssが効かない！どうすればいいの？」

「!importantって何？どうやって使えばいいの？」

と思ったことはありませんか？

特にプログラミング学習を始めたばかりの人は、一度はぶつかったことがある問題でしょう。

cssをマスターするためには、!importantもしっかり理解しておきたいですよね。

そこで今回は、

について詳しく解説します。

この記事を見れば、!importantの使い方をマスターすることができます。

cssでできることも広がるので、ぜひ最後まで読んでみてくださいね。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

「!important」とはcssの優先順位を上げる宣言のこと

!importantは、cssが反映される優先順位を強制的に上げる宣言のことです。

cssが効かない時や、後から変更してほしくない時に使えるとても便利な手段です。

しかし、!importantの多用はあまりおすすめできません。

使う前に、

をしっかり確認しておきましょう。

cssが反映される優先順位を理解する

cssには独自のルールがあり、反映される優先順位が決まっています。

!importantを正しく使いこなすためにも、まずはcssの優先順位について理解しておきましょう。

覚えておくべきことは以下の2つです。

1.各セレクタの優先順位

まずは、cssの基本の書き方と用語の確認をしましょう。

セレクタ｛プロパティ：値；｝

上記のcssセレクタには様々な種類があり、主なセレクタの種類と優先順位は以下のように決まっています。

では、実際にどのようになるのかコード例を見てみましょう。

<p class="class" id="id" style="color:red;" >こんにちは</p>

p {
 color:green;
}
.class {
 color:yellow;
}
#id {
 color:blue;
}

上記の例から

という優先順位であることがわかります。

2.cssは上から順番に上書きされていく

下の方に記載されたcssスタイルほど優先順位が高くなります。

では、同じセレクタを書いた場合どのようになるのか見ていきましょう。

<p class="class">こんにちは</p>

.class {
color:yellow;
}
.class {
color:blue;
}

ブラウザ上では以下のように表示されます。

同じセレクタでも、後から書いた方が優先されていることがわかるでしょう。

「!important」の使い方【基本編】

cssの優先順位について理解したところで、!importantの使い方を【基本編】と【応用編】にわけて解説していきます。

!importantの基本的な使い方は以下の通り

セレクタ{プロパティ:値!important;}

値の後、「；」の前に!importantを書きます。

また、!importantはセレクタ単位でまとめて宣言することはできません。

プロパティごとに反映されるということをしっかり理解して使用しましょう。

!importantの使い方【応用編】

応用編では、以下のような場合の使い方を解説します。

様々な使い方を知っておくことで、!importantを適切に使うことができるようになります。

1.すでに使用されている!importantを解除したい場合

!importantがすで書かれているセレクタよりも、別のセレクタを優先させたい時は、以下の2つを順に試すことで!importantを上書きすることができます。

では、例を見ていきましょう。

div {
 display:none!important;
}

上記では、divが非表示になっています。

これを表示したい場合には、次のように対応します。

div {
 display:block!important;
}

これでも表示されない場合は、以下のようにコードを書きましょう。

html div {
　display:block!important;
}

2.jQueryで「!important」を使う場合

・使用コードを記載

・注意点

https://qiita.com/shouchida/items/796f80bfe8bde31f1f79

!importantを使う時の3つの注意点

とても便利な!importantですが、多用するのはおすすめではありません。

ここで解説する注意点をしっかり理解して、!importantを正しく使用しましょう。

cssが効かない時でもすぐに「!important」を使わない

cssが反映されないからといって、すぐに!importantを使用してしまうと、何が優先すべきプロパティなのかわからなくなってしまいます。

cssが効かない時には、!importantを使用する前に以下の方法を試してみましょう。

1～4全ての方法を試しても解決しなかった場合の最後の手段として!importantを使用するのが最適です。

!importantを複数使用した場合のルールを理解しておく

!importantの多用は禁物ですが、複数使用しなければならない場合もあるでしょう。

!importantを複数使用する場合、優先順位は通常のcssと同様になります。

例えば

コード例

の2つの!importantがある場合、①→②の優先順位になります。

エンジニアが!importantを非推奨する理由

以下のような理由から、!importantの使用を非推奨としているエンジニアもいます。

cssの基本をしっかり理解していないと、!importantを適切に使用できないでしょう。

特にプログラミング初心者は、!importantの使用に注意が必要です。

まとめ：cssのルールを理解して本当に必要な時にだけ「!important」を使う

!importantは、cssの優先順位を強制的に上げる便利な宣言であることがわかりました。

cssの基礎ルールーや、!importantの注意点を理解することが、正しく使いこなすために必要なことです。

以下、この記事のまとめです。

いざという時に!importantを使いこなして、cssをマスターしましょう。