【CSS】スタイルを強制的に上書きする方法｜詳細度・!important・@layerまで完全解説

この記事で分かること

• CSSカスケードの仕組みと優先順位の全体像
• 詳細度（Specificity）の計算方法と実践的な活用
• !importantの正しい使い方と注意点
• インラインスタイルの優先度と使いどころ
• セレクタの組み合わせで詳細度を上げるテクニック
• CSSカスタムプロパティ（CSS変数）での上書き
• @layerによるモダンな優先度制御
• よくある「CSSが効かない」原因と対処法

実務で最も重要なのは、同じオリジン（作成者スタイル）内での優先度です。同じカスケードレベルの場合、次に詳細度（Specificity）で比較され、それも同じなら後に書かれたスタイルが勝ちます。

p {
    color: red;
}

/* 後に書かれたスタイルが優先される */
p {
    color: blue; /* ← こちらが適用される */
}

<!-- framework.css の p { color: red; } より -->
<link rel="stylesheet" href="framework.css">

<!-- custom.css の p { color: blue; } が優先される -->
<link rel="stylesheet" href="custom.css">

注意：詳細度は10進数のように繰り上がりません。クラスを11個書いても、ID1つには勝てません。(0, 11, 0) < (1, 0, 0) です。

/* :where() → 詳細度 (0, 0, 0) - 引数は無視 */
:where(#header .nav) a {
    color: red; /* 詳細度: (0, 0, 1) */
}

/* :is() → 引数の最高詳細度が加算される */
:is(#header .nav) a {
    color: blue; /* 詳細度: (1, 1, 1) */
}

ポイント：DevToolsの「Styles」パネルでは、優先度の高いルールが上に表示されます。打ち消し線のあるプロパティは「負けた」スタイルです。まずはDevToolsで現状を確認してから上書き方法を選びましょう。

.text {
    color: red !important;
}

/* IDセレクタでも !important には勝てない */
#content .text {
    color: blue; /* ← 適用されない */
}

/* 詳細度 (0, 1, 0) + !important */
.text {
    color: red !important;
}

/* 詳細度 (1, 1, 0) + !important → こちらが勝つ */
#content .text {
    color: blue !important; /* ← 適用される */
}

注意：!important の乱用は「詳細度戦争」を引き起こします。あるスタイルを !important で上書きすると、それを上書きするにも !important が必要になり、さらに詳細度を上げて…という悪循環に陥ります。!important は最終手段として使いましょう。

<!-- インラインスタイル: どんなセレクタよりも優先される -->
<p style="color: red;">このテキストは赤</p>

/* これだけ詳細度を上げても、インラインスタイルには勝てない */
body #content .wrapper p.text {
    color: blue; /* ← 適用されない */
}

/* !important なら勝てる */
p {
    color: green !important; /* ← これならインラインスタイルに勝つ */
}

実務でインラインスタイルが適切な場面：

• JavaScriptで動的にスタイルを変更する場合
• HTMLメールのスタイリング（外部CSS非対応のメールクライアント）
• CMSのエディタで特定の要素だけ見た目を変えたい場合
• 一度きりの特殊なスタイル調整

/* テーマのCSS: 詳細度 (0, 1, 0) */
.btn {
    background: gray;
}

/* カスタムCSS: 親要素を追加して詳細度 (0, 2, 0) */
.content .btn {
    background: blue; /* ← 勝つ */
}

/* さらに詳細度を上げたいなら: (0, 3, 0) */
.page .content .btn {
    background: green;
}

/* テーマのCSS: 詳細度 (0, 3, 0) */
.header .nav .menu-item {
    color: black;
}

/* IDを使えば一発で勝てる: 詳細度 (1, 0, 0) */
#site-header a {
    color: blue; /* ← 勝つ */
}

注意：IDセレクタは再利用性が低くなるため、コンポーネント設計では避けるのが一般的です。ただし、ページ固有のカスタマイズやWordPressテーマの上書きでは有効な手段です。

/* 属性セレクタはクラスと同じBレベルの詳細度 */
[id="header"] .nav a {
    color: blue; /* 詳細度: (0, 2, 1) */
}

/* 比較: IDセレクタ */
#header .nav a {
    color: red; /* 詳細度: (1, 1, 1) → こちらが勝つ */
}

/* テーマのCSS: 詳細度 (1, 0, 1) */
#header a {
    color: black;
}

/* :is() でIDの詳細度を借りつつ、柔軟に対象を指定 */
:is(#header) .custom-link {
    color: blue; /* 詳細度: (1, 1, 0) → 勝つ */
}

/* 詳細度 (0, 1, 0) */
.btn {
    background: gray;
}

/* 同じクラスを2回書く → 詳細度 (0, 2, 0) */
.btn.btn {
    background: blue; /* ← 勝つ */
}

/* 3回でも可 → 詳細度 (0, 3, 0) */
.btn.btn.btn {
    background: green;
}

ポイント：このテクニックはHTMLの構造を変えずに詳細度だけを上げたい場合に有効です。ただし可読性が下がるため、チーム開発ではコメントを添えましょう。

/* 親テーマのスタイル（変更不可） */
/* .entry-content h2 { color: #333; font-size: 24px; } */

/* 方法1: 同じセレクタ + 後書き優先（同じ詳細度なら子テーマが後に読まれる） */
.entry-content h2 {
    color: #0284c7;
    font-size: 28px;
}

/* 方法2: bodyを追加して詳細度を上げる */
body .entry-content h2 {
    color: #0284c7;
    font-size: 28px;
}

/* 方法3: ページ固有のカスタマイズ（body_classを活用） */
.page-id-123 .entry-content h2 {
    color: #dc2626;
}

/* 方法4: どうしても効かないときだけ !important */
.entry-content h2 {
    color: #0284c7 !important;
}

/* 変数を定義（:root はhtml要素と同じ） */
:root {
    --primary-color: #0284c7;
    --font-size-heading: 24px;
    --spacing: 16px;
}

/* 変数を使用 */
.btn {
    background: var(--primary-color);
    padding: var(--spacing);
}

h2 {
    color: var(--primary-color);
    font-size: var(--font-size-heading);
}

/* グローバルな定義 */
:root {
    --btn-bg: #0284c7;
    --btn-color: #fff;
    --btn-radius: 4px;
}

.btn {
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    padding: 8px 16px;
}

/* 変数を上書きするだけでバリエーションを作れる */
.btn-danger {
    --btn-bg: #dc2626;
}

.btn-success {
    --btn-bg: #16a34a;
}

/* 特定のセクションだけ丸いボタンにする */
.hero-section {
    --btn-radius: 999px;
}

ポイント：CSS変数による上書きは !important も詳細度の引き上げも不要です。変数の値を再定義するだけなので、CSSの保守性が大幅に向上します。

/* Bootstrap 5のデフォルト変数を上書き */
:root {
    --bs-primary: #0284c7;
    --bs-primary-rgb: 2, 132, 199;
    --bs-body-font-family: "Noto Sans JP", sans-serif;
    --bs-body-font-size: 15px;
    --bs-border-radius: 8px;
}

/* 特定コンポーネントだけ変更 */
.card {
    --bs-card-border-radius: 12px;
    --bs-card-spacer-y: 1.5rem;
}

/* ライトモード（デフォルト） */
:root {
    --bg-color: #ffffff;
    --text-color: #1e293b;
    --border-color: #e2e8f0;
}

/* ダークモード: 変数を上書きするだけ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1e1e2e;
        --text-color: #cdd6f4;
        --border-color: #313244;
    }
}

/* コンポーネントは変数を参照するだけ */
body {
    background: var(--bg-color);
    color: var(--text-color);
}

.card {
    border: 1px solid var(--border-color);
}

@layerの重要なルール：後に宣言したレイヤーほど優先度が高くなります。そして、どのレイヤーにも属さないスタイルは、すべてのレイヤーよりも優先されます。

/* レイヤーの優先順位を宣言（後ほど高い） */
@layer reset, base, components, utilities;

/* reset レイヤー（最も低い優先度） */
@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

/* base レイヤー */
@layer base {
    body {
        font-family: sans-serif;
        line-height: 1.7;
    }
    a {
        color: #0284c7;
    }
}

/* components レイヤー */
@layer components {
    .btn {
        padding: 8px 16px;
        background: #0284c7;
        color: #fff;
    }
}

/* utilities レイヤー（最も高い優先度） */
@layer utilities {
    .hidden {
        display: none;
    }
    .text-center {
        text-align: center;
    }
}

/* フレームワークのCSSをレイヤーに入れて読み込む */
@import url("bootstrap.css") layer(framework);

/* 自分のCSSはレイヤー外 → フレームワークより常に優先 */
.btn {
    background: #0284c7;  /* 詳細度に関係なく勝つ */
}

ポイント：@layerを使えば、フレームワーク側がどんなに高い詳細度のセレクタを使っていても、!important なしで上書きできます。これは従来の「詳細度戦争」を根本的に解決する画期的な仕組みです。

/* レイヤーはネストできる */
@layer framework {
    @layer base {
        body { font-size: 16px; }
    }
    @layer components {
        .btn { padding: 8px; }
    }
}

/* ドット記法でネストしたレイヤーを参照 */
@layer framework.components {
    .btn { border-radius: 8px; }
}

/* NG: プロパティのスペルミス */
.box {
    backgroud: red;  /* background のスペルミス → 無視される */
}

/* NG: セミコロン忘れ */
.box {
    color: red   /* ← セミコロンがない */
    background: blue; /* この行も巻き込まれて無効になる場合がある */
}

/* NG: 閉じ括弧忘れ */
.box {
    color: red;
/* } が抜けると以降のスタイルがすべて壊れる */

/* NG: クラス名の不一致 */
/* HTMLでは class="main-content" なのに */
.mainContent {  /* ← キャメルケースになっている */
    color: red;
}

対処法：DevToolsの「Styles」パネルでプロパティ名の横に警告アイコン（⚠）が出ていないか確認しましょう。また、CSSファイルを保存した後にブラウザをハードリロード（Ctrl + Shift + R）して、キャッシュを排除します。

/* テーマ側: 詳細度 (1, 1, 1) */
#content .post-body p {
    font-size: 14px;
    line-height: 1.8;
}

/* 自分のCSS: 詳細度 (0, 0, 1) → 負ける */
p {
    font-size: 16px; /* ← 適用されない */
}

/* 解決策: テーマ側と同等以上の詳細度にする */
#content .post-body p {
    font-size: 16px; /* ← 同じ詳細度 + 後書きで勝つ */
}

<!-- NG: カスタムCSSが先に読まれ、テーマCSSに上書きされる -->
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="theme.css">

<!-- OK: テーマCSSの後にカスタムCSSを読み込む -->
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="custom.css">

/* 継承されるプロパティ */
.parent {
    color: red;        /* ← 子要素にも適用される */
    font-size: 16px;   /* ← 子要素にも適用される */
    line-height: 1.7;  /* ← 子要素にも適用される */
}

/* 継承されないプロパティ */
.parent {
    border: 1px solid red; /* ← 子要素には適用されない */
    padding: 20px;         /* ← 子要素には適用されない */
    margin: 10px;          /* ← 子要素には適用されない */
}

/* inherit で強制的に継承させる */
.child {
    border: inherit; /* 親のborderを継承する */
}

/* PC向けスタイル（768px以上）→ スマホでは適用されない */
@media (min-width: 768px) {
    .sidebar {
        display: block;
    }
}

/* viewportメタタグが正しいか確認 */
/* <meta name="viewport" content="width=device-width, initial-scale=1"> */

注意：viewportメタタグがないと、スマホでもPC版の幅（通常980px）でレンダリングされるため、メディアクエリが期待通りに動きません。必ず <meta name="viewport" ...> を確認しましょう。

ポイント：DevToolsの「Computed」タブでは、カスケードの結果として最終的に適用された値が一覧表示されます。「Styles」タブと合わせて使うことで、どのルールが勝っているかを正確に特定できます。

自分のCSS内でスタイルが競合している場合

→ セレクタの見直しと詳細度の調整。CSSの設計を整理する良い機会です。

WordPressテーマやCSSフレームワークを上書きしたい場合

→ まず同じセレクタで後書き優先を試す。ダメなら親要素を追加して詳細度を上げる。CSS変数対応なら変数を上書き。それでもダメなら !important。

新規プロジェクトの設計段階の場合

→ @layer で優先度を最初から制御する。CSS変数ベースのデザインシステムを構築する。

インラインスタイルを上書きしたい場合

→ !important を使う。これがインラインスタイルに勝てる唯一のCSS側の方法です。