CSSの!importantルールとは？使いどころと注意点を解説
CSSの!importantルールは、Webページのスタイル設定を強制的に上書きするために使われます。ただし正直なところ、!importantを「使うべきでない」場面の方が「使うべき」場面よりも多いのが実情です。この記事では、!importantの具体的な使い方と、なぜ使用を最小限にとどめるべきなのかを解説します。
そもそも!importantルールとは？
通常、CSSは「詳細度（specificity）」と「記述順序」に基づいて、どのスタイルを適用するかを決定します。しかし、プロパティの値の後に!importantを付けると、その宣言は通常のカスケードルールを無視して最優先で適用されます。非常に強力な反面、扱いを誤るとデバッグを難しくする原因にもなるため、注意が必要です。
ユーザーエージェントスタイルシート（フレームワークのスタイル）を上書きする
CSSを書いていると、既存のスタイルシートを上書きしたいケースに遭遇します。たとえば、BootstrapのようなCSSフレームワークを使って素早くプロジェクトを立ち上げた場合、フレームワークに組み込まれたスタイルをカスタマイズしたくなることがあるでしょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Important Keyword: Overriding Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.container {
display: flex;
}
.nav {
color: black;
background-color: pink;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</nav>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
上記のコードエディタの中身を細部まで理解する必要はありません。「実行」ボタンを押して、自分が把握できている要素に注目してみてください。クラスやIDを持つHTML、Bootstrap由来とおぼしきCSSスタイルシートへのリンク、そしてドキュメントの<head>内に記述された独自のスタイル——ところが、そのスタイルが正しく反映されていないことがわかります。
.navbarセレクター内のbackground-color: pink;という行に「!important」を追記してみましょう。色の値と!importantルールの間には半角スペースを入れてください。コードを再実行すると、ナビゲーションバーの背景色は変わったでしょうか？
これが!importantルールの1つ目のユースケースです。CSSフレームワークなどから提供されるユーザーエージェントスタイルシートが存在する場合、このルールを使えばBootstrap標準のスタイルを上書きできます。
インラインスタイルを上書きする
もう1つのユースケースは、要素に直接指定されたインラインスタイルを上書きしたい場合です。インラインスタイルは詳細度が非常に高いため、通常は外部のスタイルシートから上書きできませんが、!importantを使えば優先させることが可能です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Important Keyword: Overriding Inline Styles</title>
<style>
.line-item:first-child{
color: purple;
}
.line-item:last-child {
color: crimson;
font-size: xx-large;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Doctor Who Characters</h1>
<ul>
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li>
<li class="line-item">Jackie Tyler</li>
<li class="line-item">Mickey</li>
<li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
</ul>
</body>
</html>
上記のコードでは、body内の要素にインラインスタイルが指定されており、<style>タグ内にはそれを上書きするためのスタイルが定義されています。CSS側で!importantルールを使うことで、インラインスタイルに打ち勝つことができます。
!importantを使う際の注意点
最後に忘れてはならないのは、!importantルールは必ずしもベストプラクティスではなく、比較的控えめに使用すべきだという点です。乱用すると、後になって原因を特定しにくいバグを引き起こす可能性があります。
もしフレームワークを使用していない環境で!importantルールが必要だと感じたら、まずはセレクターの構成を見直すことで、意図した表示はほとんどの場合実現できるはずです。
-
CSSの標準リンクスタイルとは？リンク状態ごとのデフォルト色とカスタマイズ方法
リンクは、目的に応じて自由にスタイルを設定できます。リンクは通常のテキストと視覚的に区別できるスタイルにすることが推奨されています。リンクの各状態におけるデフォルトのスタイルは、以下の表のとおりです。 リンク状態デフォルトの色 Active（アクティブ・クリック中）#EE0000 Focus（フォーカス時）#5E9ED6 または類似の青系のアウトライン（Windows・Macの場合）Linuxでは #F07746 のアウトライン（テキストの色は変わりません） Hover（ホバー時）#0000EE Link（未訪問リンク）#0000EE Visited（訪問済みリンク）#551A8B
-
CSSでアイコンバーを作成する方法｜横型・縦型のサンプルコード付き解説
CSSを使えば、Webサイトのナビゲーションに便利な「アイコンバー」を簡単に作成できます。この記事では、Font Awesomeのアイコンを使用した横型・縦型のアイコンバーの作り方を、実際のコード例とともにわかりやすく解説します。 準備：Font Awesomeの読み込み アイコンを表示するために、ここではFont Awesome（4.7.0）を使用します。HTML内で以下のCDNリンクを読み込んでおきましょう。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font