CSS開発者は今どこへ向かっているのか
2026年版State of CSSの結果が公開されました。毎年Sacha Greif氏が主催しているこの調査は、CSSエコシステムの現在地を最も正確に映し出す指標の一つです。今年も興味深いデータが並んでいます。
特に注目したいのは、CSS-TricksがWebプラットフォームリソース部門で3位に入ったことです。MDN、Can I Useのすぐ後ろ、つまり私たちが日々使っているツールの隣にブログが肩を並べたわけですね。
本記事では、単なる結果の要約ではなく、日本の開発者が実務でどう活かすかという観点で整理します。一次情報はState of CSS 2026 公式結果で確認できます。
数字で見る2026年CSSトレンド
1. AI活用率：まだ「補助ツール」の段階
最も目を引くデータはAI生成コードの利用率です。
- 0〜50%の層：3,031人
- 50%超の層：721人
半数以上の開発者がAIを「部分的にしか」使っていないという回答です。もちろん、この調査に参加する層はAI依存度が低い可能性もあります。しかし少なくともCSS領域では、人が手書きするコードの価値が依然として高いというシグナルとして読めます。
2. 満足度：5点満点中4点、3年連続で安定
| 年 | 平均満足度 |
|---|---|
| 2020 | 3.8 |
| 2024 | 4.1 |
| 2025 | 4.0 |
| 2026 | 4.0 |
数字だけ見ると横ばいですが、これはむしろCSSルネサンスが「過負荷」ではなく「安定」として定着したことを意味します。新機能が次々登場しても開発者が疲弊していないのはポジティブな兆候です。
3. お気に入り新機能：anchor positioning vs :has()
今年のトップ争いはanchor positioningと**:has()**がほぼ互角でした。興味深いのは、:has()はもはや「新機能」と呼ぶには無理があるのに、最も使われた機能の1位に輝いた点です。
/* anchor positioning：JSなしでツールチップを実装する例 */
.tooltip-trigger {
anchor-name: --my-tooltip;
}
.tooltip {
position: absolute;
position-anchor: --my-tooltip;
top: anchor(bottom);
left: anchor(center);
/* 以前はJSで座標計算していた部分がCSSのみで解決 */
}
/* :has() — 親セレクタの革命 */
.card:has(.badge-new) {
border-color: #ff5c5c;
/* 子に'new'バッジがあればカード自体を強調 */
}
特にanchor positioningはツールチップ、ドロップダウン、ポップオーバーといったUIでJavaScript依存を大幅に減らせます。実務での効果は絶大です。
なお、CSS Color Level 4の機能群（oklch、color-mixなど）をまとめて集計していれば、おそらく圧倒的1位だったはずです。個別機能に分割されているため順位が分散した感があります。
日本の開発現場での適用文脈
受託開発・SI案件での注意点
日本のSI案件ではブラウザサポートマトリクスが依然として足枷になります。anchor positioningはChrome 125+で安定化しましたが、官公庁・金融系プロジェクトでは未だにIEモードや旧Safariを考慮する必要があるケースも多いです。実務では以下の戦略が有効です：
- プログレッシブエンハンスメントでアプローチ：anchor positioning非対応ブラウザでは既存のJSライブラリ（Popper.js等）にフォールバック
@supports (anchor-name: --x)で分岐処理
@supports (anchor-name: --tooltip) {
/* モダンブラウザ：CSSのみでツールチップ */
.tooltip { position-anchor: --tooltip; }
}
@supports not (anchor-name: --tooltip) {
/* レガシーブラウザ：JSフォールバックが必要 */
.tooltip { /* Popper.js等で位置計算 */ }
}
この技術の限界と注意事項
- anchor positioningのアクセシビリティ落とし穴：CSSだけでツールチップを作ると、
aria-describedbyやフォーカストラップといったアクセシビリティ対応を忘れがちです。見た目が完成したからといって終わりではありません。 - :has()のパフォーマンス問題：複雑なDOMツリーで
:has()を乱用すると、スタイル再計算コストが増大します。特に数百個のリストアイテムに:has()を適用すると体感できるほど遅くなる可能性があります。 - AI活用率データの罠：回答者バイアスが存在するため、「CSS開発者はAIをあまり使わない」と断定するのは困難です。ただしCSSは依然として人の手がかかる領域という方向性は有効です。
次のステップ学習方向
- Anchor Positioning：MDNのanchor positioningガイド＋Chrome DevToolsのanchorデバッグ機能
- :has()：CSS-Tricksの:has()アルマナックページが実例豊富でおすすめです
- CSS Color Level 4：
oklch()、color-mix()はデザインシステム構築時に特に有用です
より深いアーキテクチャ観点の記事をお求めなら、イベント駆動アーキテクチャの実践ノウハウも合わせてどうぞ。
まとめ：CSSは今「静かな全盛期」にある
2026年版State of CSSが投げかけるメッセージは明確です。
- 満足度は4点で安定。新機能が溢れても開発者は疲弊していません。
- **anchor positioningと:has()**が実務の景色を変えつつあります。特にJS依存を減らす方向で。
- AIはまだ補助ツール。少なくともCSS領域では人の判断が依然として重要です。
- 多様性の問題は依然として深刻です。ジェンダー・人種のバランスは調査一つで解決できる問題ではありません。カンファレンス、企業、メディアが協力すべき領域です。
日本の開発者にとって最も実用的なアクションはこれです：次のプロジェクトでツールチップを一つだけでもanchor positioningで作ってみる。 Popper.jsを外した瞬間の快感を味わえば、なぜ人気1位なのかすぐに理解できるはずです。
大規模メディア処理パイプラインのような事例に興味があれば、Netflix MPS & FLAPI 事例分析も合わせてご覧ください。