@scopeでCSSの適用範囲を制御する

概要

サイトリニューアルを行う際、ページのmainコンテンツ部分だけ旧サイトのCSSを使用したい、というケースがよくあります。しかしheaderやfooterには新レイアウトのCSSを使いたいため、作業者は新旧のCSSが混ざらないよう細心の注意を払う必要があります。

この悩みを解決してくれるのが @scope です。使い方を解説していきます。

Scopeについて

スコープの種類

1. グローバルスコープ

HTML全体の該当する要素すべてに影響します。

p {
  color: red;
}

2. ローカルスコープ

特定のコンポーネントや要素の中だけにスタイルを適用します。Vueなどで使用されます。

<style scoped>
p {
  color: red;
}
</style>

スコープの目的

• 大規模プロジェクトでのスタイルの衝突防止

• コンポーネント単位での再利用性・保守性の向上

• グローバルスタイルへのバグ混入の防止

@scopeとは

スタイルの適用範囲を明示的に指定できる構文です。

例：mainタグに囲まれたdivタグだけを赤色にしたい場合

<main>
  <div>赤色</div>
</main>

<div>黒色</div>

@scope (main) {
  div {
    color: red;
  }
}

実装例：旧サイトCSSへの適用

上記の書き方を使い、旧サイトのCSSに以下のような @scope を追記しました。

index.html

<link rel="stylesheet" href="new_style.css">
<link rel="stylesheet" href="old_style.css">

<main>
  <section>
    <div class="c-content">
      <p>赤色</p>
    </div>
    <div class="old_flg">
      <div class="c-content">
        <p>赤色</p>
      </div>
    </div>
  </section>
</main>

old_flg クラスを作成し、その中に旧サイトで使用していた要素を入れます。

old_style.css

@scope (.old_flg) {
  /* 旧サイトCSS */
  .c-content {
    p {
      color: red;
    }
  }
}

@scope を検討すべきケース

• CSS ModulesやShadow DOMのように、ネイティブで厳密なカプセル化がほしい

• JavaScriptとCSSを完全に分離したい（例：Noビルド環境やWeb Components）

• 将来的にビルドレスのCSS設計（原子化CSS、Cascade Layersなど）を目指している

• コンポーネントライブラリをグローバルに干渉させず安全に配布したい

@scopeの便利な機能

特定の要素間にあるタグだけにスタイルを適用させることもできます。

例：section1 クラス配下かつ section2 クラスより手前にある h2 だけを赤色にする

<main>
  <section class="section1">
    <h2>section1：赤色になる</h2>
    <section class="section2">
      <h2>section2</h2>
    </section>
  </section>
</main>

@scope (.section1) to (.section2) {
  h2 {
    color: red;
  }
}