【CSS】!importantで優先順位を変更する方法を丁寧に解説

CSSで思ったとおりにスタイルが効かないといった悩みは、初心者によくあることです。スタイルが効かない原因の一つとして、セレクタの優先順位による影響を受けている場合が挙げられます。このようなときに、!importantを使えばセレクタの優先順位を変更できます。

この記事では、!importantを使った優先順位の変更方法とセレクタの優先順位を紹介します。最後までお読みいただければ、!importantを正しく扱える、優先順位を理解したコーディングができるようになります。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

!importantとは

!importantは、CSSでスタイルを反映させる際の優先順位を最大まで上げるための宣言です。通常CSSでは後に書いたスタイルが反映されます。しかし、!importantで指定されたスタイルは最優先で反映されます。

後に書いたコードに影響されないように、優先させたいスタイルがある場合には!important宣言を使用するとよいでしょう。

!importantの使い方

!importantの使い方は、優先させたいスタイルに半角を空けて「!important」と記述するのみです。

サンプルコードで確認してみましょう。テキストの文字色を変更する際、pセレクタに赤色を指定し、次にテキストのクラス名main-textに、文字色で青色を指定してみました。

<p class="main-text">!importantを使ってみましょう</p>

p {
    margin: 20px;
    font-size:　24px;
    color: red;
}

.main-text {
  color: blue;
}

通常は後に書いたスタイルが反映されるため、テキストの色は青色に変わります。

ここでpタグのcolorに、!importantを指定します。

p {
  margin: 20px;
  font-size: 24px;
  color: red !important;
}

.main-text {
  color: blue;
}

!importantを指定した赤色が優先されます。このように!importantを指定したスタイルは、後に書いたスタイルに影響を受けず、優先的に反映されます。

セレクタの優先順位

CSSのスタイルを指定するセレクタには優先順位があります。ここでセレクタという用語についておさらいしましょう。

用語解説：セレクタ

セレクタとは、どの要素のスタイルを変更するか指定するものです。下をご覧ください。

CSSの書き方の基本形で使用するのはセレクタ・プロパティ・値の3つです。セレクタで「変化させたい要素」を選択し、プロパティと値で要素の「何をどれくらい」変化させるのかを指定します。

セレクタについて詳しく知りたい方は、こちらの記事をご覧ください。

CSSでセレクタを自由に操る！便利な指定方法をわかりやすく解説！

こちらをお読みいただきますと、セレクタの詳しい使い方を理解できます。

セレクタの種類によって優先順位が異なる

スタイルを指定するセレクタの種類によって優先順位が異なります。必ずしも後に書いたスタイルが反映されないといったケースもあるのです。

タイプセレクタで指定したスタイルは最も優先順位が低く、idセレクタで指定したスタイルは最も優先度が高くなります。

たとえば以下のようなコードでは、id名sample-textに指定した文字色の緑色が優先されます。

#sample-text {
  color: green;
}

.main-text {
  color: blue;
}

p {
  margin: 20px;
  font-size: 24px;
  color: red;
}

id名sample-textに指定した文字色の緑色が反映されました。

次にidへの指定をコメントアウトしてみます。

/*
idへの指定をコメントアウト
#sample-text {
  color: green;
} 
*/

.main-text {
  color: blue;
}

p {
  margin: 20px;
  font-size: 24px;
  color: red;
}

クラス名main-textに指定した文字色の青色に変更されました。

原則CSSでは、後に書いたスタイルが反映されます。しかし上記の場合では、classセレクタはタイプセレクタ（要素全体）よりも優先度が高いため、先に書いたclassセレクタのスタイルが優先されました。このように、セレクタの優先順位が影響して一番後に書いたスタイルが反映されない場合があります。

意図せず、後に書いたスタイルが反映されない問題を防ぐためには、極力classセレクタを使用してスタイルを指定するようにしましょう。セレクタの優先度が高くなったり低くなったりしづらくなるため、後から書いたスタイルが反映されるようになります。

セレクタの優先順位は詳細度で決まる

実はセレクタには詳細度と呼ばれる点数のようなものが存在します。詳細度が高ければ高いほど優先順位も高くなります。今回紹介した、3つのセレクタの詳細度は以下のとおりです。

idセレクタの詳細度は100と3つのセレクタのなかでも最も高いため、優先的にスタイルが反映されます。一方、タイプセレクタは詳細度が1と低いため、優先順位も低いわけです。

 セレクタには紹介した3つの他にも多くの種類が存在しており、セレクタごとに詳細度が細かく設定されています。セレクタの詳細度について詳しく知りたい方は、こちらの記事をご覧ください。

CSSの詳細度を学ぼう

こちらをお読みいただきますと、セレクタの詳細度を理解したうえでコーディングができるようになります。

!importantは多用しないほうがよい

!importantは記述内容がシンプルで使いやすいものの、多用は避けるべきです。

!importantを指定したスタイルは、最優先でブラウザに反映されます。そのため、色々なところに最優先のスタイルができてしまうと、!important同士がぶつかってしまうのです。結果、思ったようなスタイリングができなくなってしまいます。

現場では自分の書いたコードの改修に、他人が後から携わることも少なくありません。そのため、なるべく誰が見てもわかりやすいコードを書く必要があります。!importantを多用しているとコードの全体像がつかめずに、改修作業に支障が出ることも考えられます。

!importantはどうしても優先したいスタイルのみに絞って使うべきです。セレクタの優先順位や詳細度を理解して適切なコーディングを心がければ、!importantが必要になるケースは減らせます。

現在独学中のあなたへ

!importantはとても便利な技術ですが現場では多用を避けるべきです。

!importantの多用に限らず、現場では推奨されていない手法が多く存在します。独学のみで自己流のコーディングが身についてしまうと、現場で全く通用しないことも考えられます。

正しいコーディングスキルを身につけるには、プログラミングスクールで人から学ぶのが最善の手段です。とはいえ、プログラミングスクールは学費が高いイメージがあるため、通いづらいと感じてしまいますよね。

そんなあなたには、完全無料のプログラミングスクール「ZeroPlus Gate」をおすすめします。

ZeroPlus Gateで用意されている教材は50本以上。わからないことはいつでも専属のメンターに相談できます。

プログラミング上達の近道は相談できる環境を持つことです。ZeroPlus Gateのカリキュラムへ本気で取り組めば、30日後には「現場で通用する正しい方法でWebサイトを生み出す力」を手に入れられます。

お申し込みはZeroPlus Gate公式サイトより受け付けております。

公式サイトはこちら

あなたのご参加を、心よりお待ちしております。

まとめ

この記事ではスタイルの優先度を上げる!importantの使い方を紹介しました。

優先したいスタイルの横に!importantと記述するのみで簡単に使用できます。セレクタの優先順位の影響でCSSのスタイルが効かないときでも、!importantを使えばスタイル反映は迅速です。

しかし、多用すると!important同士がぶつかってしまい、思うようなスタイルが効かなくなるといった問題が発生します。

記事内で紹介したセレクタごとの優先順位を理解すれば、!importantを使用せずとも、CSSのスタイルが思うように反映できないといったことは少なくなります。まずはセレクタの優先順位をしっかり押さえ、本当に優先したいスタイルのみ奥の手として!importantを使用するようにしましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー