CSSの「!important」とは？CSSが適用されない時の対応方法

みなさんこんにちは!フリラーランスプログラマーのsatoです。

という状況、心当たりありませんか？その問題のよくある原因の一つが「スタイルシートの優先順位」による問題です。

今回はそんな問題を解決する手段の一つ「!important」について解説していきます。「!important」について、下記の流れで理解していきましょう。

前半で「!important」を使う上で重要となる「スタイルシートの優先順位」について詳しく見ていきましょう。そして後半で、実際の使用例を実例ベースで見ていきましょう。

!importantとは

!importantは一言でいえば、合わせて使用したプロパティを最優先で使用することにする命令です。例えば以下のように、h1のcolorに対して、使用したとしましょう。

h1{
    color: red !important;
}

すると、仮に他のCSSプロパティでh1の色を変更しようとしたとしても「!important」がついているプロパティを最優先して使用してくれるわけです。

!importanをつければ最優先で使用してくれる。まずはこれを覚えましょう!

スタイルシートの優先順位

!importanは優先順位を無視して、プロパティを強制的に最優先で使用させる命令だということがわかりました。ということはつまり、!importantを適切に使いこなすには「そもそもの優先順位」を知っておく必要があるということです。

この項目ではスタイルシートの優先順位について見ていきましょう。覚えておくべきことは以下の二つです。

セレクタによる優先順位

セレクタとは、idやclassなどの書き方の種類のことを言います。セレクタごとの優先順位は以下の通りです。

タイプセレクタが最も上書きされやすく、styleが最も優先されるということですね。もう少し細かく見てみましょう。例えば以下の例では文字色へ「タイプセレクタ(div)で青」「classで赤」「idで緑」「styleで黄色」を指定しています。

CSS部分:

div {
  color:#0000ff;
}
.test-class {
  color:#ff0000;
}
#test-class {
  color:#00ff00;
}

HTML部分:

<div class="test-class" id="test-class" style="color:#ffff00;">テスト色</div>

これをブラウザで見てみると…

文字が黄色で表示されますね!これはstyleで書かれたものが最優先されたためです。試しにstyleだけを外してみましょう。

HTML部分:

<div class="test-class" id="test-class">テスト色</div>

すると次に優先度の高い、idで指定している緑に文字色が変わりました。このように書き方で、優先度が変わるわけです。

同じセレクタは、あとから呼ばれた物が優先

次に同じ書き方をした場合の、書いた順番による優先度の違いです。文字色赤を指定している「test-class」と、文字色青を指定している「test-class」が2つ用意されています。

CSS部分:

.test-class {
  color:#ff0000;
}
.test-class {
  color:#0000ff;
}

HTML部分:

<div class="test-class">テスト色</div>

この場合は、後から書いた方が優先されます。

たしかに、後から書いた青色になっていますね!

!importantを使ってみよう!

優先順位がわかったところで「!important」を実際使っていきましょう。使い方は非常に簡単です!

冒頭でも見たいように、プロパティの後ろにつけるだけです。例えばセレクタごとの優先度を見たこのソースで、タイプセレクタ部分に「!important」をつけてみましょう。

CSS部分:

div {
  color:#0000ff !important;
}
.test-class {
  color:#ff0000;
}
#test-class {
  color:#00ff00;
}

HTML部分:

<div class="test-class" id="test-class" style="color:#ffff00;">テスト色</div>

文字色がタイプセレクタで指定している青色になりました。優先度の低いはずのタイプセレクタが、「!important」を付けた影響で、最優先されるようになりましたね!

使う上での注意点

使い方は非常に簡単でしたね。しかし「!important」を多用してはいけないということも意識しておきましょう。

「最優先」「最優先」「最優先」といろいろな場所に、最優先指定がされていたらどんなCSSになってしまうでしょうか?そう一体なにが本当に優先すべきプロパティなのか、わけがわからなくなってしまいます。

基本的には「優先度」通りでことが済むように設計は行いましょう。その上で、どうしようもなくなったとき役立つのが「!important」という認識でいましょう!

ウェブサイト制作スキルで自由に働きたい人は

CSS、及びHTMLはWEBサイトを製作する上で基本中の基本ですよね。もちろんこの二つの言語をしっかり習得することは必須なのですが、よりクオリティの高いWEBサイトを製作したり、高単価案件などを獲得していきたいと考えた場合、他のプログラミング言語も一緒に身に付ける事をオススメします。

例えば動きをつけたWEBサイトを作るならJavaScriptを学ぶといいですし、PHPを覚えればワードプレスなどのCMSをカスタマイズする事も可能になります。もちろん、CSS単体よりも好条件な案件を獲得しやすくなりますし、案件自体も多くなります。

CSSとセットで学ぶのにオススメの言語は他にもたくさんありますので、興味がある人はまず「プログラミング言語無料診断」を使ってみてください。あなたにぴったりのプログラミング言語を無料で診断することができます。

また、ゆくゆくはフリーランスとして活躍していく事も視野に入れている人は、プログラミングスクールを利用する事も検討するといいでしょう。やはりいくつもの言語を独学で習得するのは、挫折してしまう可能性が高いですし、独学だと仕事獲得のコツがわからず遠回りしてしまう可能性も高いです。

弊社「侍エンジニア」では、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。

結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。

少しでも興味を持った方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。

入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください！

無料カウンセリングの
予約はこちら

まとめ

今回は「!important」の使い方。そして、CSSの優先度について見てきました。

「!important」は非常に強力な命令です。ただし強力ゆえに、使いすぎれば拡張性・可動性が下がる命令でもあることも意識し使っていきましょう。