【CSS 2026】モダンCSS 完全ガイド｜Container Queries・@scope・View Transitions が Baseline に到達、制作会社が今すぐ使うべき機能

公開日
2026.08.31

2026年は「モダンCSS」の Baseline が大きく広がった転換点。Container Queries（コンテナクエリ）・@scope・View Transitions・Anchor Positioning・Scroll-Driven Animations・Popover APIなど、これまで「実験的」扱いだった CSS 機能が全主要ブラウザで安定利用可能になった。JavaScript に頼らずCSSだけで実現できることが激増し、制作会社の実装コストが根本的に変わる時代。実務者が今すぐ使うべき主要機能を整理する。

2026年 モダンCSS の全体像

Container Queries・@scope・View Transitions・Anchor Positioning・Scroll-Driven Animations・Popover API 等が2026年時点で主要ブラウザ Baseline 対応。JavaScript ライブラリで実装していた多くの機能を CSS だけで実現でき、パフォーマンス・保守性・実装工数の3つが同時に改善する。

主要新機能早見表

Container Queries の実務インパクト

従来のメディアクエリは「ビューポート幅」ベースだったが、Container Queries は「親要素の幅」ベース。同じコンポーネントが配置場所によってスタイル変化できる。

/* 親要素をコンテナとして宣言 */
.card-list { container-type: inline-size; }

/* 親コンテナ幅に応じたスタイル */
@container (min-width: 400px) {
    .card { display: grid; grid-template-columns: 1fr 2fr; }
}

実務上のメリット: サイドバー内のカードとメイン領域のカードで同じHTMLで別レイアウトできる。デザインシステムのコンポーネント再利用性が桁違いに上がる。

@scope の実務インパクト

従来 CSS の名前衝突は BEM や CSS Modules で回避していたが、@scope でスタイルが影響する範囲を宣言的に指定できる。

@scope (.card) to (.card-content) {
    h2 { font-size: 1.25rem; }
    /* .card 内で適用、.card-content より下には適用されない */
}

これによりCSS の詳細度地獄・グローバル汚染問題が根本解決する。

View Transitions の実務インパクト

ページ遷移・DOM 変化時のアニメーションを CSS だけで実現。SPA だけでなくMPA（マルチページアプリ）でも「アプリ的な遷移」が可能に。

/* JavaScript */
document.startViewTransition(() => updateDOM());

/* CSS */
::view-transition-old(root) { animation: fade-out 0.3s; }
::view-transition-new(root) { animation: fade-in 0.3s; }

Next.js 16.3 の Instant Navigations とも組み合わせて、WordPress サイトすらアプリ級の体験が可能に。

制作会社レンズ｜クライアント案件で使うべき3つの領域

領域1: WordPress テーマ制作の高度化

WP テーマに Container Queries + @scope を組み込むことで、クライアントがカスタマイズしても崩れないコンポーネントを提供できる。cielo の付加価値サービスとして差別化。

領域2: LP のアニメーション実装コスト削減

従来 GSAP / anime.js で数日かけて実装していたスクロールアニメーションを、Scroll-Driven Animations + View Transitions で数時間で実装。制作工数を大幅圧縮。

領域3: モーダル・ツールチップの標準化

Popover API + Anchor Positioning で、アクセシビリティ準拠のモーダル・ツールチップを追加ライブラリなしで実装。パフォーマンス・保守性が上がる。

制作現場での活用パターン

パターン1: 新規サイトはモダンCSS前提

2026年後半以降の新規制作は Container Queries / @scope / View Transitions 前提で設計。JS ライブラリを減らして表示速度改善。

パターン2: 既存サイトのリファクタリング

クライアントの既存サイトを段階的にモダンCSSへリファクタ。「Core Web Vitals 改善プロジェクト」として月額運用契約化。

パターン3: デザインシステム構築

クライアントの複数サイト共通デザインシステムを Container Queries ベースで構築。1コンポーネント × N配置で再利用性最大化。

主要ブラウザ対応状況

大半の機能が Baseline。Firefox の一部機能のみ Flag 有効化必要。

FAQ

Q. Sass / PostCSS は不要になる？

Sass の主要機能（ネスト・変数）はCSSネイティブに来た。大規模プロジェクトの mixin・関数系はまだ Sass の価値ありだが、小-中規模ならピュアCSSで足りる時代。

Q. Container Queries のパフォーマンスは？

ネイティブ実装なので JS ベースより高速。再計算コストは無視できるレベル。

Q. 既存の BEM 命名は捨てるべき？

@scope への移行が理想だが、既存プロジェクトはBEM 継続でOK。新規プロジェクトは @scope 前提で始める。

Q. IE11 対応が必要な案件は？

2026年時点で IE11 対応要件はほぼゼロ。「IE11 対応不要」を仕様書に明記してモダンCSSを堂々と使う。

参考メディア・出典一覧

• nerdy.dev｜CSS Recently In All Browsers · April 26, 2026
• nerdy.dev｜4 CSS Features Every Front-End Developer Should Know In 2026
• Chrome for Developers｜What’s new in web UI
• CSSAWWWARDS｜Complete Guide to Modern CSS in 2026
• Riad Kilani｜2026 CSS Features You Must Know (Shipped Late 2025–Now)

まとめ

2026年はモダンCSSが実務標準になった転換点。Container Queries・@scope・View Transitions・Scroll-Driven Animationsを使いこなす制作会社と使えない制作会社で、実装工数・表示速度・保守性に大きな差が出る時代へ。cielo としては、①新規案件はモダンCSS前提 ②既存案件のリファクタ提案 ③デザインシステム構築の3方向で、モダンCSS世代の Web 制作を先取りしたい。

この記事を書いた人

WEBディレクター

佐藤 広樹 Sato

仕事を通じて出会った方から「人から学ぶ」ことを大切に、AIやWEBから得られない知見を吸収するよう意識しています。

スタッフ紹介はこちら →