CSSで!importantを使った優先順位の変更【初心者向け】

初心者向けにCSSで!importantを使った優先順位の変更方法について解説しています。ユーザー定義のスタイルシートを使う際など役に立つでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

今回はCSSで!importantを使った優先順位の変更を説明します。

CSSの記述が多くなると思い通りのスタイルが適用されなくなる場合があったりしますが、優先順位を決めておくことで色やサイズを指定することができます。いざという時に覚えておくといいでしょう。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回は!importantを使ってみるよ。

大石ゆかり

田島メンター!!!importantというのは何をする機能なんですか〜?

田島悠介

スタイル適用の優先順位を上げることができる宣言なんだ。例えば通常CSSでは後から書いたものほど優先されるけど、これを使った部分は記述場所に関係なく優先されるよ。実際にやってみよう。

大石ゆかり

分かりました!

 

目次

優先順を変更する書き方

通常、CSSは上から順番に上書きされて適用されますので、ファイルの下の方に記載されたCSSスタイルが画面に適用されます。

また、CSSセレクタには以下の図のように様々な種類があり、種類ごとに画面に適用される優先順位が決まっています。

CSSのルールではタイプセレクタよりも、HTMLタグに直接指定する方式であるclassセレクタや、idセレクタが優先的に適用されます。

また、idセレクタはclassセレクタより優先されます。

ところが、このようにあらかじめ決められたCSSスタイル適用の優先順位を後から変更する方法があります。

それが、「!important」宣言です。

!importantを使ったサンプルコードを見てみましょう。

サンプル

p {
  color : red !important;
}

通常、CSSのルールでは全称セレクタやタイプセレクタなどよりも「id」や「class」を参照した具体性の高いセレクタが優先的に適用されます。

また、「id」セレクタは「class」セレクタより優先されます。

通常、CSSはタグの近くで読まれたスタイルか、より後から読まれたスタイルが優先されます。

しかし、「!important」のキーワードが指定されたスタイルはそのルールを無視して最優先されます。

「!important」は、ユーザー定義のスタイルシートなどで使うことができます。

ユーザー定義のスタイルシートは、Web上で自分が定義したCSSスタイルシートを利用したいときに使います。

 

田島悠介

「プロパティ:値」の後ろに半角スペースを入れ、!importantを記述するんだ。

大石ゆかり

これでその部分が優先されるわけですね。

田島悠介

次は実際に、本来優先されない部分に!importantをつけて、結果がどうなるか見てみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

実際に「!important」を使ってみましょう。

HTML

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

CSS

p {
  color : blue !important;
}

.sample {
  color : red;
}

通常、pタグ全体に適用する「タイプセレクタ」よりも、class属性に直接指定する「classセレクタ」が優先されるため、「こんにちは」の文字は赤く表示されます。

ところが「!important」が付与されたスタイルは優先度が上がるため、「こんにちは」の文字は画面上で青く表示されます。

ブラウザで確認してみましょう。

「!important」を使わないとすると次のようになります。

コードとしては、上記CSSから「!important」を削除してください。

 

以上、!importantの使い方について解説しました。

どうしても変えたくないスタイルがあるときや、一部分だけどうしても優先させたいスタイルがあるときに、「!important」を使うと良いでしょう。

 

田島悠介

通常は後から書いたものが優先されるから文字列の色は赤になるね。

大石ゆかり

そこで青色指定のところに!importantを使うと、青色が優先され適用されているんですね。

田島悠介

!importantはあまり使いすぎると全体の構造が分かりにくくなってしまう場合もあるので、よく気を付けて使うようにしよう。

大石ゆかり

頭に入れておきます。ありがとうございました!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。