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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

分かりました!

 

目次

 

優先順を変更する書き方

通常、CSSは上から順番に適用するために、下側にあるCSSスタイルの方が適用されることになります。

CSSには多くの優先順位の決め方がありますが、最も強いのが今回説明する「!important」です。

サンプル

p{
  color: #d9534f !important; //red;
  color: #5bc0de; //blue
}

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

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

CSSはタグの近くで読まれたスタイルか、より後から読まれたスタイルが優先されるが、「!important」のキーワードが指定されたスタイルが最優先になります。

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

 

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

実際に書いてみよう

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

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS arrow</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  </head>
  <body>

    <p>何色ですか?</p>

  </body>
</html>

CSS

p{
  color: #d9534f !important; //red;
  color: #5bc0de; //blue
}

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

スクリーンショット 2016-08-31 16.22.21

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

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

スクリーンショット 2016-08-31 16.24.45

 

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

「!important」を使うタイミングとしてはどうしても変えたくないスタイルがあるときや、ユーザー定義のスタイルシートを使ってみるときなどに用いてみるとよいかもしれません。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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