CSSの@scopeでスタイルを局所化する：新しいスコープ機能の基礎と使い方

@scopeとは？：CSSにおけるスコープ機能の概要

@scopeは、CSSで定義したスタイルを、特定の範囲のHTML要素（DOM）内だけに限定して適用するための構文です。まるでJavaScriptのブロックスコープのように、CSSの影響範囲を限定できます。

基本構文

<div class="container">
  <h2>スコープ内の見出し</h2>
  <p>この段落もスコープ内</p>
</div>

<h2>スコープ外の見出し</h2>

@scope (.container) {
    h2 {
        color: crimson;
    }
}

この例では、.container の中の h2 要素だけに color: crimson; が適用され、それ以外には影響しません。

補足：スコープの終了点を指定する構文（to）

CSSの @scope には、開始点だけでなく「終了点」を明示的に指定する構文も仕様として存在します。たとえば以下のように書くことで、.parent から .stop-here までの範囲にのみスタイルを適用するという意図を表現できます：

@scope (.parent to .parent .stop-here) {
    p {
        font-size: 14px;
    }
}

しかし、2025年5月現在、この「to」構文は主要ブラウザ（Chrome, Edge など）では未実装のため、実際の反映はされません。

そのため、現時点では以下のような開始点のみを使ったスコープ指定が推奨されます：

@scope (.parent) {
    p {
        font-size: 14px;
    }
}

将来的には to を使ったより柔軟なスコープ制御が可能になる予定ですが、当面は progressive enhancement の考え方で取り入れるとよいでしょう。

比較：従来のセレクタとの違い

従来のCSSセレクタを使った方法と、@scope を使った方法では、スタイルの適用範囲に大きな違いがあります。

通常のネストセレクタ

<div class="container">
  <h2>通常の見出し</h2>
</div>

<h2>別のセクションの見出し</h2>

.container h2 {
    color: crimson;
}

このように書くと、.container 内の h2 にだけスタイルが適用されるように見えますが、複雑なプロジェクトやコンポーネントが増えていくと、次のような問題が起こることがあります：

• 他の場所でも .container クラスが使われていると、思わぬ場所に影響が出る
• クラス名の使い回しやカスケードの影響で、スタイルの優先度が分かりにくくなる

つまり、セレクタのスコープがグローバルに広がってしまい、副作用が起こりやすいという欠点があります。

@scopeを使うと

<div class="container">
  <h2>スコープ適用見出し</h2>
</div>

<h2>別のセクションの見出し</h2>

@scope (.container) {
    h2 {
        color: crimson;
    }
}

このように書くと、.container の中にある h2 にだけスタイルが適用され、スコープ外の h2 には一切影響しません。これにより、スタイルの予期しない干渉を防ぎ、安全に局所的な設計が可能になります。

実用例：コンポーネント設計での利用

スコープは、デザインシステムやコンポーネントベースの設計にとても役立ちます。

<div class="card">
    <h2>カードの見出し</h2>
    <p>本文テキスト</p>
</div>

@scope (.card) {
    h2 {
        font-size: 20px;
        margin-bottom: 0.5em;
    }
    p {
        color: #333;
    }
}

.card コンポーネントだけに限定してスタイルが効くため、他の場所の h2 や p には影響を与えません。

現在の対応ブラウザと注意点

2025年現在、@scope は以下のようなブラウザで対応が進んでいます：

※ 最新のブラウザ対応状況は Can I use @scope をご確認ください。

• ✅ Chrome 117+
• ✅ Edge 117+
• ⚠ Firefox：開発中または behind a flag
• ❌ Safari：未対応（今後に期待）

注意点：

• まだ完全に普及していないため、プロダクション環境では @scope の利用にはフォールバックが必要です。
• @scope をPolyfillで補うのは現時点では難しいため、 progressive enhancement の考えで導入するのがベストです。

まとめ：CSSにもついにやってきた“スコープ”の時代

CSSの@scopeは、これまでJavaScriptやCSS-in-JSでしかできなかったスタイルの“局所化”をネイティブで実現できる革新的な機能です。特に、コンポーネントベースの設計や、スタイルの衝突を防ぎたい場面で大いに活躍します。対応ブラウザが増え次第、Web開発の標準になる可能性は非常に高いでしょう。