CSS @scopeルールビルダーとは
CSS @scope at-rule（Baseline 2025、Chrome 118+）を使用すると、開発者はスタイルルールの境界を定義し、その効果を特定のDOMサブツリーに制限できます。これにより、BEM、CSS Modules、Shadow DOMを使用せずに、古典的なCSSスコーピング問題を解決します。@scopeルールは、上限セレクタ（スコープルート、必須）とオプションの下限セレクタ（スコープリミット、オプション）を受け取ります。@scope内のスタイルはサブツリーの外に漏れず、@scope外のスタイルは意図的なセレクタマッチングなしではスコープルールをオーバーライドしません。スコープルールはスコープ外のグローバルルールよりも特異度が低く、オーバーライドが予測可能で意図的になります。
クイックアンサー
CSS @scopeはスタイルルールをDOMサブツリーに制限し、BEMやShadow DOMなしでスタイルの漏れを防ぎます。上限（スコープルート）とオプションの下限（スコープリミット）を設定します。スコープルールは予測可能なオーバーライドのために、スコープ外のルールよりも特異度が低くなります。Chrome 118+、Safari 17.4+、Firefox 128+（Baseline 2025）。
Last updated: 2026-06-02
制限事項
- @scopeは新しいスタッキングコンテキスト、z-index分離、または包含を作成しません。セレクタマッチングのみを制限します。z-index、CSSカウンター、カスタムプロパティなどのプロパティはスコープ境界を越えて相互作用します。
- 広すぎるスコープルートセレクタ（多くの場所で使用される一般的なクラスなど）は、予期しないスタイル適用を引き起こす可能性があります。各@scopeルールはスコープルートに一致するすべての要素に対して評価されるため、複雑なスコープツリーはDOM要素が多いページのパフォーマンスに影響する可能性があります。
- @scopeをサポートしていないブラウザでは、at-rule内のルールはスコープ解除されずに完全に無視されます。広いブラウザサポートが必要な場合は、フォールバックとして@scopeブロックの外側にスコープルールをスコープ解除されたルールとして複製してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- スコープルートセレクタを入力します。上限を定義する要素です。@scopeブロック内のすべてのスタイルルールは、この要素のサブツリー内にのみ適用されます。
- オプションでスコープリミットセレクタを追加します。スコープスタイルが適用される深さを制限する下限です。スタイルルールはスコープリミット内またはそれより深い要素には適用されません。
- @scopeブロック内に標準のCSS構文を使用してCSSスタイルルールを記述します。これらのルールは、同じ要素をターゲットとするスコープ外のグローバルルールよりも特異度が低くなります。
- 生成された@scope CSSをコピーしてスタイルシートに追加します。最も予測可能なカスケードのために、グローバルデフォルトの後、コンポーネント固有のオーバーライドの前に@scopeルールを配置します。
主な用途
- ウィジェットスタイルをそのコンテナ要素にスコープしてページの残りの部分に漏れないようにし、すべての要素にBEMクラス命名を不要にします。
- より高い特異度のセレクタや!importantを使用せずに、メインコンテンツエリアとサイドバーで異なるリンクスタイルを適用します。
- サードパーティの埋め込みスタイルをそのラッパーdivに制限し、埋め込みの内部CSSが周囲のページレイアウトに影響しないようにします。