CSSの!importantの意味は？CSSの優先順位を変更する方法を解説

「CSS」のスタイル適用には優先度が存在し、それによってどのスタイルが最終的に適用されるかが決まります。この優先度を手動で変更するための特殊な記法が「!important」です。!importantは特定のスタイルルールを強制的に優先できますが、利用には注意が必要です。

本記事では、「!important」の具体的な使い方とその機能、利用する際の注意点について詳しく解説します。「CSS」の優先度の理解を通じて、より効率的なWebデザインを実現しましょう。

CSSの!importantとは？

「CSS」には、特定のスタイルが適用される順番や優先度があります。この優先度は、セレクタの詳細度やスタイル宣言の位置などによって自動的に決まります。

しかし、自動的に決まる優先度を意図的に変更するプロパティが!importantです。この!importantは重要という意味があり、記述されたスタイルは他のスタイルより優先的に「HTML」のDOM操作で読み込まれます。

この!importantの記述によって、スタイルシート内やインラインスタイルで指定された他のスタイルよりも優先して適用されます。

CSSの優先順位について

「CSS」のスタイルを適用する際には、セレクタの優先順位が非常に重要です。pやdivなど「HTML」要素セレクタと呼び、各々に「CSS」のプロパティが適用されます。たとえば、以下の「CSS」コードでは、2つの

タグにそれぞれ異なる背景色を設定しています。

p {
  background-color: blue; # 背景を青色する
}

p {
  background-color: red; # 背景を赤色する
}

基本的に、後に書かれたスタイルが優先されます。上記の例では、DOM操作で

タグの背景色を青色にするスタイルが適用されたのちに、次のスタイルが読み込まれ最終的に「赤」になります。

このように優先順位を理解することで、デザイン通りの「CSS」を適用できます。

優先順位が決まる仕組み

「CSS」は、同じ要素に複数のスタイルを適用する場合、セレクタの種類によって優先度が変わります。具体的には、タグセレクタ（例：p）は最も低く、classセレクタ（例：.example）が続いて、idセレクタ（例：#unique）が最も高いです。

以下、具体例を見ていきましょう。

p { 
 color: blue; 
}

.example { 
 color: green; 
}

#unique { 
 color: red; 
}

上記「CSS」を適用すると、優先度が一番高いのは#uniqueなので以下の「HTML」は赤になります。

<p class="example" id="unique">このテキストはどの色？</p>

このように「HTML」に設定する要素と「CSS」セレクタの違いによって優先度が異なることを理解しておきます。

CSSの!importantが必要になる状況

「CSS」のスタイリングにおいて優先順位は重要な要素ですが、Webサイトのデザインによっては優先順位を無視して特定のスタイルを強制的に適用する状況があります。

優先度を意図的に変更する場合に使用するのが、「CSS」の!importantルールです。ここでは、!importantが必要とされる状況について詳しく解説します。

• HTMLのコードが長い場合
• 同じclass名を複数作った場合
• 他人の作ったテンプレートを使用する場合

!importantを使用する場合と使用しない場合の違いを理解しましょう。

HTMLのコードが長い場合

長く複雑な「HTML」コードにおいては、複数のclass属性やid属性を組み合わせる場面が多々あるでしょう。このような状況では、優先順位が変わり「CSS」が意図通りに適用されなくなる場合があります。

たとえば、以下のような「HTML」と「CSS」のコードを考えましょう。

• 「HTML」

<div class="box highlight">テキスト</div>

• 「CSS」

.box {
  background-color: blue;
}

.highlight {
  background-color: yellow;
}

ここで、.boxと.highlightが両方適用されるため、後に記述された.highlightが優先され背景色は黄色になります。それが意図した結果と違う場合に、!importantを使用することで明示的に優先度を変更できます。

同じclass名を複数作った場合

同じclass属性を複数作成すると、セレクタが重複しそれぞれのスタイルが意図せず動作することがあります。

具体的なコード例は、以下の通りです。

• 「HTML」

<div class="box">テキスト1</div>
<div class="box">テキスト2</div>

• 「CSS」

.box { 
 color: blue; 
}

.box { 
 color: red; 
}

この場合テキストは赤色になりますが、以下のように!importantを追記することで優先度を変更できます。

.box { 
 color: blue !important; 
}

これでテキストは、青色になります。このように、単純な「CSS」のセレクタやスタイルの変更で効果が出ない場合には、!importantが有用です。

他人の作った「HTML」と「CSS」のテンプレートを使用する場合

第三者が作った「HTML」と「CSS」のテンプレートは、既存の「CSS」セレクタやプロパティが詳細に設定されていることが多いです。その場合に新しいスタイルを適用しようとすると、既存の「CSS」が優先され新規のスタイルが反映されない場合があります。

.template-box {
  font-size: 16px;
  color: gray;
}

ここで自分でカスタマイズを加えたい場合、以下のように新しい「CSS」を追加します。

.template-box {
  font-size: 20px !important;
}

このように!importantを使うと、新しいfont-sizeを優先的に適用できます。

CSSの!importantの書き方

「CSS」で!importantを使う際の書き方は、非常に簡単です。対象とするプロパティの最後は、セミコロン(;)の前に!importantを記述します。

以下は実際のコード例です。

• 通常の「CSS」

p {
  color: red;
}

• !importantを使用した「CSS」

p {
  color: blue !important;
}

「HTML」要素の

に対して通常はredを指定していますが、!importantによってblueが優先されます。

ただし、!importantは他のセレクタやプロパティより常に優先されるため、使いすぎには注意が必要です。多用すると、後からスタイルを変更するときに修正が複雑になる場合もあります。

CSSの!importantが非推奨といわれる理由

「CSS」の!importantをつけたスタイルは最優先で適用されるため、優先したいセレクタとプロパティが複数ある場合に全てに!importantを適用したくなります。この場合、!importantが適用された「CSS」ファイル同士が競合して思うようなスタイリングができません。

とくに現場では複数名が作業をするので、自分の書いたコードの改修に他人が後から携わる場合があります。そのため、なるべく誰が見てもわかりやすいコードを書く必要があるでしょう。

また、!importantを多用しているとコードの全体像がつかめずに、改修作業に支障が出ることも考えられます。ゆえに!importantの使用は最小限にとどめ、!importantを記述した箇所にどのような目的で適用したかコメントを追記しましょう。

CSSの!importantを使う前に確認したいこと

「CSS」のスタイリングで困ったとき、多くの開発者が!importantに頼ります。しかし、ツールの使い方を誤ると、後で大きな問題を引き起こす可能性があります。そこで、!importantを使用する前に確認すべきポイントを説明します。

• 「CSS」の詳細度を考慮しているか
• キャッシュによってブラウザの表示に反映されていない可能性はないか
• 単なるスペルミスはないか
• セレクタの順番に問題はないか

これらのポイントを押さえることで、!importantの使用を最小限に抑え、より効率的な「CSS」コーディングを目指しましょう。

CSSの詳細度を考慮しているか

「CSS」の詳細度（specificity）は、どのスタイルルールが適用されるかを決定するための重要な概念です。セレクタがどれだけ「詳細」かを数値で表現し、数値が高いほどそのスタイルルールが優先されます。

たとえば、idセレクタ（#id）はclassセレクタ（.class）よりも、クラスセレクタはタグセレクタ（p、div等）よりも詳細度が高いでます。

具体的なコード例は、以下の通りです。

#header p { 
 color: blue; 
}

p { 
 color: red; 
}

この場合、idセレクタの詳細度がタグセレクタよりも高いため、「HTML」の#header属性を持つ

タグは青色になります。

詳細度を考慮することで、!importantを使わずスタイリングの問題を解決できる場合があります。

キャッシュによってブラウザの表示に反映されていない可能性はないか

「CSSの変更が反映されていない」と感じたとき、問題の原因はブラウザのキャッシュである可能性があります。ブラウザは一度読み込んだ「CSS」ファイルを一時保存するため、新しい変更が即座に反映されない場合があります。

解決方法としては、ブラウザのキャッシュを強制的にクリアすることが一般的です。多くのブラウザでは、開発者ツールを開いた状態でページをリロードすることでキャッシュを無視してページを再読み込みします。

• styles.css（変更前）

body {
  background-color: blue;
}

• styles.css（変更後）

body {
  background-color: red;
}

たとえば、上記のようにstyles.cssを変更した後でブラウザが反映していない場合は、キャッシュが原因かもしれません。

単なるスペルミスはないか

「CSS」のスタイリングが反映されない問題に対して、最初に確認すべき要因はスペルミスです。スペルミスがあると、「CSS」のプロパティは無視されスタイルは適用されません。
具体的なコード例は以下の通りです。

body {
  background-color: red; /* 誤字により反映されない */
}

正しくはbackground-colorですが、上記はbackgroud-colorと記述しているため、正しいスタイルが反映されません。

単純なスペルミスでも、「CSS」のコードが複雑化して見つけづらい要因となります。そのため、!importantを使用する前にスペルミスがないか確認しましょう。

セレクタの順番に問題はないか

「CSS」のコードを書いていると、セレクタの優先度やプロパティの設定によってスタイルが効かないことがあります。この場合、!importantで優先度をつける前に確認する要素のひとつが「セレクタの順番」です。

例として、次のようなコードがあると仮定します。

このスタイルは反映されない 
p {
  color: red;
}

このスタイルが優先される p {
  color: blue;
}

この場合、

タグのテキスト色はblueとなります。両方のセレクタが同等の詳細度を持っている場合は、後述のコードが優先されセレクタの順番が結果に影響を与えます。

最初のpセレクタに!importantを設定することでテキスト色をredにできますが、後に「CSS」の改修が難しくなります。

その場合、後述のpセレクタをコード内から削除することで問題を解決できるでしょう。このようにセレクタの重複防止や順番を適切に管理することで、無用な!importantの使用を避け、コードの可読性が向上します。

CSSの!importantを使わないための方法

「CSS」のコーディングにおいて、!importantはできるだけ避けるべきです。その理由は、コードの可読性や維持性に悪影響を及ぼすからです。

「CSS」の!importantを使わないためには、以下が重要なポイントとなります。

• 「CSS」の優先度を把握しよう
• セレクタの詳細度を計算しよう

上記を意識して、可読性と維持性の高い「CSS」コードを目指しましょう。

CSSの優先度を把握しよう

「CSS」の優先度を把握することは、効率的なスタイリングに不可欠です。以下の図でその優先順位を確認しましょう。

順位	優先度
1	「CSS」ファイル内のメディアタイプの指定	style要素内にmedia属性、もしくは、「CSS」ファイル内に@mediaがあれば、最も強く優先されます。
2	作成者がHTML文書に記述した「CSS」	HTMLタグ内にstyle属性を使用してプロパティを記述する方法です。
3	作成者がheadタグ内に記述した「CSS」	head内にstyleタグを設定し、その中に「CSS」を書きます。
4	作成者の「CSS」ファイル(外部ファイル)	idセレクタやclassセレクタ、擬似クラスなど。
5	ブラウザのデフォルト「CSS」	これは、ブラウザごとに設定されているCSS指定です。

優先度を理解することで、!importantを使用せず意図したスタイルの適用が可能です。

セレクタの詳細度を計算しよう

詳細度とは、あるスタイルが適用される優先度を数値で表したものです。具体的な数値を、以下の表で確認しましょう。

順位	種類	詳細度数値
1	!importnatがついたセレクタ	1.0.0.0.0
2	style属性内のCSS	0.1.0.0.0
3	idセレクタ	0.0.1.0.0
4	classセレクタ/擬似クラス/属性セレクタをもつセレクタ	0.0.0.1.0
5	要素セレクタ/擬似要素	0.0.0.0.1
6	全称セレクタ	0.0.0.0.0

たとえば、「.header_button span」というセレクタがあったとします。

セレクタ名	詳細度	個数	結果
.header_button （classセレクタ）	0.0.0.1.0	1つ	0.0.0.1.0
span （要素セレクタ）	0.0.0.0.1	1つ	0.0.0.0.1

表から分かるように、このセレクタの詳細度は、「0.0.0.1.1」となります。たとえば他に詳細度0.0.2.2.3のセレクタがあれば、そちらの優先度が高くなります。

計算方法を知っておくと、どのスタイルが優先されるかを把握して、予期せぬスタイル適用の未然防止が可能です。

CSSの!importantをなるべく使わずにコーディングを進めよう

「CSS」の!importantは強力なツールであり、スタイルシートの優先順位を変更する際に便利です。
しかし使いすぎてしまうと、逆にコードの可読性や維持性を損ないます。

本記事で、!importantの基本的な意味と使い方・注意点を解説しました。「CSS」の優先度や詳細度を理解して、!importantを使用するかどうか見極めながらコーディングを進めてみましょう。