読み込み中...

CSS importantの使い方・書き方と応用例を徹底解説！

CSS importantを徹底解説 CSS
2023.12.08
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSはWebページの見た目を整える上で欠かせない技術ですが、いざ使おうと思ってもなかなか思い通りにならないことがあるかと思います。

そこで今回は、CSSの中でも重要なプロパティである「CSS important」について解説します。

CSS importantの使い方や書き方、そして応用例まで詳しく紹介するので、初心者の方でも分かりやすくマスターできるようになっています。

●CSS importantとは？

CSS importantは、プロパティの優先度を上げることができるキーワードです。

通常、CSSでスタイルを指定する際には、セレクタによって優先度が決まります。

しかし、CSS importantを使うことで、優先度を上げることができます。

●CSS importantの書き方

CSS importantを使うには、プロパティの値の最後に「!important」と書きます。

例えば、次のように書くことができます。

background-color: red !important;

このように書くことで、そのプロパティの優先度が上がります。

●CSS importantの使い方の例

CSS importantを使う場合、基本的にはセレクタの後ろに書くことが多いです。

例えば、次のように書くことができます。

h1 {
  color: blue !important;
}

このように書くことで、h1タグの文字色が青色に変わります。

通常、h1タグに別のスタイルが指定されていた場合でも、CSS importantが使われている場合には、このスタイルが優先されます。

また、複数のプロパティにCSS importantを使うこともできます。

例えば、次のように書くことができます。

h1 {
  color: blue !important;
  font-size: 24px !important;
}

このように書くことで、h1タグの文字色が青色に変わり、フォントサイズも24pxに変わります。

●CSS importantの応用例

CSS importantは、優先度を上げることができるため、いくつかの応用例があります。

【1.デバイスごとにスタイルを変更する場合】

CSS importantを使うことで、デバイスごとに異なるスタイルを指定することができます。

例えば、次のように書くことができます。

@media screen and (max-width: 480px) {
  h1 {
    font-size: 20px !important;
  }
}

このように書くことで、画面幅が480px以下の場合には、h1タグのフォントサイズが20pxに変わります。

この場合、CSS importantが使われているため、別のスタイルが指定されていた場合にも、このスタイルが優先されます。

【2.アニメーションを制御する場合】

CSS importantを使うことで、アニメーションを制御することもできます。

例えば、次のように書くことができます。

@keyframes slide-in {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

div {
  animation: slide-in 1s linear infinite !important;
}

このように書くことで、divタグがスライドインするアニメーションが実行されます。

ここでもCSS importantが使われているため、別のスタイルが指定されていた場合にも、このアニメーションが優先されます。

【3.フォームのスタイルを変更する場合】

CSS importantを使うことで、フォームのスタイルを変更することもできます。

例えば、次のように書くことができます。

input[type="text"] {
  border: 1px solid red !important;
}

このように書くことで、テキスト入力欄の周囲に赤い枠線が表示されます。

ここでもCSS importantが使われているため、別のスタイルが指定されていた場合にも、このスタイルが優先されます。

まとめ

CSS importantは、プロパティの優先度を上げることができるキーワードです。

使い方や書き方は非常に簡単であり、初心者でもすぐにマスターできます。

また、応用例も多くあり、デバイスごとにスタイルを変更する場合や、アニメーションを制御する場合、フォームのスタイルを変更する場合などに有用です。

ただし、CSS importantは優先度を上げることができる反面、使いすぎるとスタイルの優先度が混乱し、予期しない結果になることがあります。

そのため、必要な場合に限って使うようにしましょう。