CSSがここ数年で大きく進歩していることをご存知でしょうか。2026年現在、コンテナクエリが業界標準となり、:has()セレクタやCascade Layersといった待望の機能が全主要ブラウザで利用可能になっています。これらの新しいCSS機能は、従来のメディアクエリやJavaScriptに依存したスタイリングの常識を変えつつあります。

中小企業のウェブサイトや地方の制作現場でも活用できる実用的な技術として、今回は特に注目すべき4つのCSS機能を整理して紹介します。どの機能も実装難易度が低く、既存のプロジェクトに段階的に導入できるものばかりです。

コンテナクエリ：コンポーネント単位のレスポンシブデザイン

コンテナクエリは2023年から全主要ブラウザでベースライン対応となり、現在93%以上のグローバルサポートを達成しています。従来のメディアクエリがブラウザのビューポート幅を基準としていたのに対し、コンテナクエリは親要素のサイズを基準にスタイルを適用できます。

カードコンポーネントが全幅のヒーローレイアウトでも、サイドバーの小さなサムネイルでも、同じCSSクラスのまま適切に表示されるようになります。メディアクエリで作られたカードは、狭いサイドバーに配置しても広いメインエリアの表示のままでしたが、コンテナクエリなら自動的に最適化されます。

実装には、親要素にcontainer-type: inline-sizeまたはsizeを指定し、@containerルールでサイズに応じたスタイルを定義します。既存のメディアクエリから段階的に移行する場合、各コンポーネントの親ラッパーにcontainer-typeを追加し、@mediaルールを@containerルールに変換していくことで、安全にアップデートできます。

:has()セレクタ：「親セレクタ」の実現

20年以上CSS開発者が求めていた機能で、2026年現在は全主要ブラウザで95%以上のサポートを達成しています。子要素や兄弟要素の状態に基づいて、親要素や前の要素をスタイリングできる画期的な機能です。

見出しの直後に別の見出しが続く場合の余白調整や、フォームにエラーが含まれる場合の親要素のスタイル変更など、従来はJavaScriptを使っていた処理を純粋なCSSで実現できます。画像を含むカードの特別レイアウトや、チェック済みチェックボックスを含むリストアイテムの取り消し線表示も簡単に実装可能です。

:has()の最も興味深い使用例は、グローバルイベントリスナーとしての活用です。モーダルの表示状態やフォームの入力状態に応じて、ページ全体のスタイルを動的に変更できます。古いブラウザでは@supportsを使ったフォールバックが推奨されており、JavaScriptベースのクラス切り替えと組み合わせることで安全に導入できます。

Cascade Layers：詳細度戦争の終結

Cascade Layersは2022年からChromium 99、Firefox 97、Safari 15.4でサポートが始まり、現在は96%以上のブラウザ対応を達成しています。セレクタの詳細度に関係なく、明示的にレイヤーの優先順位を制御できるため、!importantを多用する必要がなくなります。

CSSファイルの読み込み順序に関わらず、ベースレイヤーよりテーマレイヤーが、テーマよりユーティリティレイヤーが常に優先される構造を作れます。より詳細度の低いセレクタでも、上位レイヤーにあれば下位レイヤーの高詳細度セレクタを上書きできます。

複数チームが関わるプロジェクトでの詳細度競合を避け、第三者ライブラリのスタイルとの衝突を構造的に解決する仕組みとして重要です。段階的な導入が推奨されており、まず第三者CSSから始めて、徐々に自社スタイルをレイヤー化していくことで、既存プロジェクトへの影響を最小限に抑えられます。

@scope：BEMやCSS Modulesの代替案

Firefox 146がChromeとSafariに続いて@scopeをサポートし、2026年現在「Baseline Newly Available」ステータスを獲得しています。上下境界を持つ近接ベースのスタイリングにより、BEMやCSS Modulesの実用的な代替案となっています。

開発者はクラス名による境界作成が不要になり、ネイティブHTML要素ベースのセレクタを記述でき、規定的なCSS命名パターンを排除できます。「ドーナツスコープ」と呼ばれる仕組みで、.article-body内のimg要素を対象にしながら、figure内のimg要素は除外するといった精密な制御が可能です。

DOM構造に過度に依存しない、書き換えが困難な高詳細度セレクタを避けながら、要素を正確にターゲットできます。BEMは命名規則によるゼロツールアプローチ、CSS Modulesはビルド時の完全分離、@scopeはモダンブラウザ向けのネイティブ機能として、プロジェクトの制約に応じて選択できます。

これら4つの機能は、いずれも従来のCSS開発で頭を悩ませてきた問題を根本から解決するものです。段階的導入が可能で、既存サイトへの影響も最小限に抑えながら、より保守性の高いスタイルシートを構築できます。まずは小規模なコンポーネントから試してみることをお勧めします。