今回はCSSのimportantについて学んでいきましょう。お二人はimportantを使ったことがありますか？
もちろんないです
importantは使ったことがありますよ。優先させたいスタイルに使うんですよね
そのとおりです。牛山くんはよく勉強していますね。 importantを使えば、スタイルを最優先で反映させることができますよ
CSSのimportantはスタイル適用の優先度を指定する記述ルールです。プロパティの最後に!importantの記述ルールを加えることで、指定したプロパティが最優先で反映されます。
初心者のうちは、CSSプロパティの優先度について考える機会は少ないかもしれません。このページではCSSのimportantの基本的な使い方のほか、どんなときにプロパティの優先度を変更する必要があるのかを初心者向けに解説します。
CSS importantの基本
それではさっそく、importantがどんなものなのかを学んでいきましょう
CSS importantとは
importantとは、CSSのスタイルを最優先で反映させたいときに使う記述ルールです。
CSSのスタイルはセレクタの書き方によって優先度が変わります。importantを使うと、セレクタで指定した優先度を無視して強制的にスタイルを適用できます。具体的な例を見てみましょう。
HTML
<div>
<div class=”ko”>
インポータント
</div>
</div>CSS
.ko { color : blue; }
div .ko { color : orange; }上記の例では子要素のフォントカラーを青色に指定したあと、2行目でオレンジ色に指定しています。
要素名＋クラス名で記述している2行目のほうがセレクタの優先度が高いため、インポータントの文字はオレンジ色で表示されます。
セレクタの書き方で優先度が変わるんだね
そうですね。では、importantを加えるとどうなるでしょうか。例を見てみましょう
CSS
.ko { color : blue !important; }
div .ko { color : orange; }1行目にimportantを加えたことにより、優先度が高くなってフォントカラーは強制的に青色で表示されます。
CSS importantを使う2つのタイミング
セレクタの書き方で優先度が決まるなら、importantを使わなくてもスタイルを反映できませんか？
牛山くんの言うとおりですね。セレクタの優先度を知っていればimportantを使う必要はありません
じゃあ、importantはどんなときに使うの？
その疑問はもっともですね。では、importantが役に立つ2つのタイミングを紹介します
①：CSSが効かない原因を判断するのに使う
スタイルの優先度が上手く設定できていないと、思ったようにスタイルを適用できないことがあります。そんなときはimportantを使ってみましょう。
もし、importantを使って正しく表示されるならば、スタイルが適用されない原因は優先度設定のミスだと判断できます。
②：HTMLが編集できないときに使う
実際のWeb制作では、importantを使わざるを得ない状況があります。たとえば、HTMLタグに直接styleが書かれていて、そのHTMLタグを修正できない場合です。
HTMLタグに直接styleを書いた場合は、CSSファイルの記述よりも優先度が高くなります。通常であればHTMLのほうを修正するのですが、依頼を受けてWeb制作する場合など何らかの事情によってHTML編集を禁止されている状況があります。
そんなときに活躍するのがimportantです。importantならHTMLを変更せず、CSSだけでデザインを修正できます。
なるほど。困ったときのimportantかー
CSSスタイルの優先度
CSSスタイルの優先度を決める要素は2つあります。
1つ目はセレクタの点数です。CSSのセレクタには優先度を表す点数がついており、点数が高いセレクタが優先されます。セレクタを組み合わせることで点数は合計され、優先度が変わります。
2つ目はCSSの記述箇所です。HTMLファイルに書いた場合と、外部ファイルに書いた場合でCSSの優先度が変わります。
それでは、サンプルを用いながら優先度についてさらに詳しく解説していきます。
CSSの基本原則
CSSの基本原則として、同じ要素に対して複数のスタイルを指定したときは、後ろに書いたものが優先されます。
あとから書いたCSSがスタイルを上書きしていくイメージを持つとわかりやすいですね
同じセレクタでの上書き例
以下はスタイルが上書きされる例です。
CSS
div { font-size : 14px; }
div { font-size : 15px; }この例ではdiv要素のフォントサイズは15ピクセルです。セレクタの優先度が同じなので、あとから書いた指定が優先されます。
同じ優先度での上書き例
同じ優先度を持つセレクタを指定した例です。
HTMLタグ
<div>
<p><span>文章1</span></p>
</div>
<div>
<span>文章2</span>
</div>CSS
div p { font-size : 14px; }
div span { font-size : 15px; }この例では文章1と文章2がフォントサイズ15ピクセルになります。使っているセレクタは異なりますが、セレクタ点数は同じです。そのため、あとから書いた15ピクセルの値が優先されます。
優先度が異なる場合の例
今度は優先度が異なる例を見てみましょう。
HTMLタグ
<div class=”youso”>
<p>文章1</p>
</div>
<div>
<p>文章2</p>
</div>CSS
.youso p { font-size : 14px; }
div p { font-size : 15px; }この例では1行目のほうがセレクタの点数が高いため、文章1と文章2は14ピクセルのフォントで表示されます。
セレクタの点数がよくわからないなぁ
そんな猫田さんのために、セレクタの点数がどんな仕組みになっているのかを解説していきますね
CSS：セレクタの点数の仕組み
CSSはセレクタの書き方によって優先度が変わります。セレクタごとに点数がついており、点数の合計が高いスタイルが優先して反映される仕組みです。
セレクタの点数は、以下のようにドット区切りの5桁の数値で表します。
1.0.0.0.0
数値の左側ほど優先度が高くなります。ドット区切りの表記がわかりにくい場合は整数の1万（10000）をイメージしてもいいでしょう。1番右側の数値が1の位、右から2番目の数値が10の位と考えていきます。
たとえば、要素セレクタの点数は1点です。以下のCSSを見て下さい。
div p { color : red; }要素セレクタが2つあるので優先度は合計2点となります。5桁の数値で表すと以下のようになります。
0.0.0.0.2
ここで注意したいのは、セレクタの点数は繰り上がりをしないということです。11個の要素をセレクタで繋げた例を見てみましょう。
div p p p p p p p p p p { color : red; }
合計のセレクタ点数は11点になりますが、繰り上がりをしないので以下のように表記します。
0.0.0.0.11
わざわざドット区切りの数値で表記する理由は、繰り上がらないことをわかりやすくするためです。
点数の仕組みはわかりました。あとはセレクタごとの点数がわかれば優先度を計算できそうですね
そうですね。それではセレクタごとの点数を紹介していきます
!important
セレクタに!importantがついていると、点数は1.0.0.0.0となります。これは最優先の指定になります。
HTMLにstyle属性を設定
以下のようにHTMLの属性でstyleを設定した場合です。style属性の点数は0.1.0.0.0となります。
<div style=”color:blue;”>スタイル属性</div>idセレクタ
idを使って指定すると点数は0.0.1.0.0となります。HTMLとCSSの表記例を紹介します。
HTMLタグ
<div id=”s1”>idを使った指定</div>CSS
#s1 { color : green; }classセレクタ
classを使って指定すると点数は0.0.0.1.0となります。hoverなどの擬似クラスや属性セレクタもclassセレクタと同じ点数でカウントされます。以下に例を示します。
HTMLタグ
<a class=”c1” href=”#”>クラスを使った指定</a>CSS
.c1 { color : orange; } /* 点数は0.0.0.1.0 */
a:hover { color : gray; } /* 点数は0.0.0.2.0 */
a[href] { color : pink; } /* 点数は0.0.0.2.0 */この例ではリンク色がピンクで表示され、カーソルを乗せたときにグレーで表示されます。
要素セレクタ
divやpなどの要素名を使って指定すると点数は0.0.0.0.1となります。beforeやafterなどの擬似要素も、要素セレクタと同じ点数でカウントされます。以下に例を示します。
HTMLタグ
<div>要素名を使った指定</div>CSS
div { color : black; } /* 点数は0.0.0.0.1 */
div:before { color : white; } /* 点数は0.0.0.0.2 */疑似要素のスタイル優先度は、divの1点とbeforeの1点を足して2点になります。
全称セレクタ
全称セレクタとは、すべての要素に対してスタイルを適用する*（半角アスタリスク）のセレクタです。全称セレクタの点数は0.0.0.0.0となります。
CSS記述箇所によるスタイル優先度
ここからはCSSを書く場所によって、どのように優先度が変わるのか紹介していきます
HTMLに直接記入したスタイル
最も優先度が高いのは、style属性を使ってHTMLに直接記入したスタイルです。
HTML例
<div style=”font-size:14px;”>直接スタイル</div>ヘッダに記入したスタイル
2番目に優先度が高いのは、HTMLファイルの<head>タグ内に書かれたスタイルです。
HTML例
<head>
<style>
div { font-size : 14px; }
</style>
</head>外部ファイルに記入したスタイル
3番目に優先度が高いのは、別途CSSファイルを用意してHTMLから読み込んだときのスタイルです。
HTML例
<head>
<link rel="stylesheet" href="gaibu.css">
</head>ブラウザの基本スタイル
最後に適用されるのがブラウザの基本スタイルです。各ブラウザには見出しタグを大きく表示するなどの基本設定があります。CSSをまったく指定していなくても装飾が行われるのは、ブラウザの基本スタイルが適用されているからです。
CSSを書く場所で優先度が変わるんだね
style属性とimportantはどちらが優先されますか？
優先度を決める条件がいくつもあるので判断が難しいですよね。HTMLのstyle属性とimportantでは、importantのほうが優先されますよ
CSS importantの注意点
importantを使う上で注意したい点を2つ紹介します
①：CSSの管理が難しくなる
importantを使うと優先度の管理が難しくなるため、極力importantは使わないようにしましょう。
散々、importantの説明をしておいて「使うな」とは、これいかに
複雑な構造のHTMLや大規模サイトのCSSを扱うときは、セレクタの書き方を予めルール化しておくのが一般的です。スタイルの優先度を管理しておくことで、スタイルが競合して不具合が発生するのを防ぎます。
importantを使えば、競合したスタイルの優先度を簡単に調整することができます。しかし、CSS全体で見たときの優先度の管理はさらに難しくなってしまいます。つまり、importantを使うのは最終手段です。
②：Webページの読み込みが遅くなる
Webページを表示するとき、ブラウザはHTMLやCSSを読み込み、内容を解釈してから画面に表示します。CSSにimportantを利用すると、その分だけ解釈にかかる時間が増えてしまいます。
CSS：importantの使い方まとめ
はい。というわけで、以上がimportantの基本的な使い方と注意点でした。二人ともどうでしたか？
優先度とimportantの関係がよくわかりました
importantを使うとスタイルが最優先になるってのだけは理解しました
いいですね。今回はスムーズに終われそうです。 では、最後にimportantについて簡単にまとめておきましょう
importantは最優先でスタイルを反映させる記述ルールです。CSSはセレクタの書き方や、CSSを書く場所によって優先度が決まります。importantを使えばそれらの優先度を無視して、最優先の指定ができます。
ただし、importantを使うと優先度の管理が難しくなるため、使いすぎには注意してください。