入門5:【CSS/important】の基本的な使い方と注意点〜初心者向

【CSS/important】の基本的な使い方と注意点〜初心者向 CSS入門
CANIT先生
CANIT先生

今回はCSSのimportantについて学んでいきましょう。お二人はimportantを使ったことがありますか?

猫田さん
猫田さん

もちろんないです

牛山くん
牛山くん

importantは使ったことがありますよ。優先させたいスタイルに使うんですよね

CANIT先生
CANIT先生

そのとおりです。牛山くんはよく勉強していますね。 importantを使えば、スタイルを最優先で反映させることができますよ

CSSのimportantはスタイル適用の優先度を指定する記述ルールです。プロパティの最後に!importantの記述ルールを加えることで、指定したプロパティが最優先で反映されます。

初心者のうちは、CSSプロパティの優先度について考える機会は少ないかもしれません。このページではCSSのimportantの基本的な使い方のほか、どんなときにプロパティの優先度を変更する必要があるのかを初心者向けに解説します。

CSS importantの基本

CANIT先生
CANIT先生

それではさっそく、importantがどんなものなのかを学んでいきましょう

CSS importantとは

importantとは、CSSのスタイルを最優先で反映させたいときに使う記述ルールです。

CSSのスタイルはセレクタの書き方によって優先度が変わります。importantを使うと、セレクタで指定した優先度を無視して強制的にスタイルを適用できます。具体的な例を見てみましょう。

HTML

<div>
        <div class=”ko”>
                インポータント
        </div>
</div>

CSS

.ko { color : blue; }
div .ko { color : orange; }

上記の例では子要素のフォントカラーを青色に指定したあと、2行目でオレンジ色に指定しています。

要素名+クラス名で記述している2行目のほうがセレクタの優先度が高いため、インポータントの文字はオレンジ色で表示されます。

猫田さん
猫田さん

セレクタの書き方で優先度が変わるんだね

CANIT先生
CANIT先生

そうですね。では、importantを加えるとどうなるでしょうか。例を見てみましょう

CSS

.ko { color : blue !important; }
div .ko { color : orange; }

1行目にimportantを加えたことにより、優先度が高くなってフォントカラーは強制的に青色で表示されます。

CSS importantを使う2つのタイミング

牛山くん
牛山くん

セレクタの書き方で優先度が決まるなら、importantを使わなくてもスタイルを反映できませんか?

CANIT先生
CANIT先生

牛山くんの言うとおりですね。セレクタの優先度を知っていればimportantを使う必要はありません

猫田さん
猫田さん

じゃあ、importantはどんなときに使うの?

CANIT先生
CANIT先生

その疑問はもっともですね。では、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の基本原則として、同じ要素に対して複数のスタイルを指定したときは、後ろに書いたものが優先されます。

CANIT先生
CANIT先生

あとから書いた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ピクセルのフォントで表示されます。

猫田さん
猫田さん

セレクタの点数がよくわからないなぁ

CANIT先生
CANIT先生

そんな猫田さんのために、セレクタの点数がどんな仕組みになっているのかを解説していきますね

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

わざわざドット区切りの数値で表記する理由は、繰り上がらないことをわかりやすくするためです。

牛山くん
牛山くん

点数の仕組みはわかりました。あとはセレクタごとの点数がわかれば優先度を計算できそうですね

CANIT先生
CANIT先生

そうですね。それではセレクタごとの点数を紹介していきます

!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記述箇所によるスタイル優先度

CANIT先生
CANIT先生

ここからは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はどちらが優先されますか?

CANIT先生
CANIT先生

優先度を決める条件がいくつもあるので判断が難しいですよね。HTMLのstyle属性とimportantでは、importantのほうが優先されますよ

CSS importantの注意点

CANIT先生
CANIT先生

importantを使う上で注意したい点を2つ紹介します

①:CSSの管理が難しくなる

importantを使うと優先度の管理が難しくなるため、極力importantは使わないようにしましょう。

猫田さん
猫田さん

散々、importantの説明をしておいて「使うな」とは、これいかに

複雑な構造のHTMLや大規模サイトのCSSを扱うときは、セレクタの書き方を予めルール化しておくのが一般的です。スタイルの優先度を管理しておくことで、スタイルが競合して不具合が発生するのを防ぎます。

importantを使えば、競合したスタイルの優先度を簡単に調整することができます。しかし、CSS全体で見たときの優先度の管理はさらに難しくなってしまいます。つまり、importantを使うのは最終手段です。

②:Webページの読み込みが遅くなる

Webページを表示するとき、ブラウザはHTMLやCSSを読み込み、内容を解釈してから画面に表示します。CSSにimportantを利用すると、その分だけ解釈にかかる時間が増えてしまいます。

CSS:importantの使い方まとめ

CANIT先生
CANIT先生

はい。というわけで、以上がimportantの基本的な使い方と注意点でした。二人ともどうでしたか?

牛山くん
牛山くん

優先度とimportantの関係がよくわかりました

猫田さん
猫田さん

importantを使うとスタイルが最優先になるってのだけは理解しました

CANIT先生
CANIT先生

いいですね。今回はスムーズに終われそうです。 では、最後にimportantについて簡単にまとめておきましょう

importantは最優先でスタイルを反映させる記述ルールです。CSSはセレクタの書き方や、CSSを書く場所によって優先度が決まります。importantを使えばそれらの優先度を無視して、最優先の指定ができます

ただし、importantを使うと優先度の管理が難しくなるため、使いすぎには注意してください。

手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました