実際のコードと表示例で理解する最新CSS機能
はじめに
Web開発の現場では、Cascading Style Sheets（CSS）は常に進化を続けており、ユーザー体験やレイアウトの柔軟性を向上させるための新しいプロパティが次々と登場しています。これまでJavaScriptで実装していたようなインタラクティブな表現も、CSSだけで実現できる場面が増えてきました。
本記事では、最近仕様に追加されたCSSの新機能やプロパティに焦点を当て、実際のコードとともにその効果を画像で紹介します。具体的には、:has() 擬似クラスやコンテナクエリ、スクロール連動アニメーション（scroll-timeline）といった、注目度の高い新機能を取り上げます。
これから紹介する内容は、最新ブラウザ環境に対応した表現を前提としているため、実務に取り入れる際の互換性チェックも必要ですが、これらの機能を知っておくことで、より表現力の高いデザインや効率的なレイアウト制御が可能になるかと思います。
新しいCSSプロパティの紹介
:has() 擬似クラス（親セレクター）
概要
:has() は、CSSセレクター内で「ある子要素を持っているかどうか」によって、親要素にスタイルを適用できる画期的な機能です。これにより、従来はJavaScriptで実装するしかなかったような親要素の状態に応じたスタイル変更が、CSSだけで実現可能になりました。
この機能はCSS4セレクター仕様の一部であり、主要なブラウザはすでに対応しています。
構文
:has(セレクターリスト) {
/* スタイルシート */
}
コーディング例
以下の例では、<article> 要素の中に <h2> 要素があるかどうかによって、<article> 要素の枠線の有無を切り替えます。
article:has(h2) {
border: 2px solid #2e8b57;
background-color: #f0fff0;
padding: 1em;
}
article {
margin-bottom: 1em;
}
<article>
<h2>見出しあり</h2>
<p>このセクションには見出しがあります。</p>
</article>
<article>
<p>このセクションには見出しがありません。</p>
</article>
表示例
以下は、上記コードの表示イメージです。
- 上段の
<article>は<h2>を含むため、緑色の枠と背景色が適用されています。 - 下段の
<article>は<h2>を含まないため、装飾はされていません。
対応ブラウザ（2025年5月現在）
container-type / @container （コンテナクエリ）
概要
コンテナクエリ（Container Queries）は、要素のスタイルを親コンテナのサイズに基づいて変更できる新しいCSSの仕組みです。これまでのメディアクエリ（@media）はビューポート全体のサイズにしか反応できませんでしたが、コンテナクエリは要素単位のレスポンシブデザインを可能にします。
これにより、モジュール単位での柔軟なレイアウト制御が可能になり、コンポーネントの再利用性が大幅に向上します。
構文
@container (コンテナーサイズクエリー) {
/* スタイルシート */
}
コーディング例
以下は、親コンテナの幅に応じて、.item の背景色が変化する例です。
body {
margin: 20px 200px 20px 20px;
}
.container {
container-type: inline-size;
box-sizing: border-box;
border: 1px solid #ccc;
padding: 20px;
width: 100%;
max-width: 600px;
}
.item {
padding: 20px;
background-color: #d3d3d3;
}
@container (min-width: 500px) {
.item {
background-color: #add8e6;
}
}
<div class="container">
<div class="item">これはアイテムです（幅により色が変わります）</div>
</div>
表示例
コンテナの幅が500px以上の場合 → .item の背景色は水色（#add8e6）になります。
コンテナの幅が500px未満の場合 → .item の背景色はグレー（#d3d3d3）になります。
実際の表示
対応ブラウザ（2025年5月現在）
scroll-timeline（スクロール連動アニメーション）
一部ブラウザのみ試験的に対応しているため利用には注意が必要です
概要
scroll-timeline は、スクロール位置に応じてCSSアニメーションを制御できる新機能です。これにより、従来はJavaScriptでしか実現できなかったスクロールに応じた要素の移動・フェード・拡大縮小などを、CSSのみで記述可能になります。
この機能は CSS Scroll-linked Animations 仕様に基づいており、scroll-timeline と animation-timeline プロパティを使って設定します。
構文
scroll-timeline: <scroll-timeline-name> <scroll-timeline-axis>;
animation-timeline: <dashed-ident>;
コーディング例
以下は、スクロール位置に応じて .box 要素が左から右に移動する例です。
body {
margin: 0;
}
.container {
position: relative;
height: 100vh;
overflow-y: scroll;
scroll-timeline: --boxTimeline y;
}
.box {
position: fixed;
top: 0;
background-color: #ff0000;
width: 100px;
height: 100px;
animation-name: slide-animation;
animation-timeline: --boxTimeline;
}
.stretcher {
height: 300vh;
}
@keyframes slide-animation {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw - 100px));
}
}
<div class="container">
<div class="box"></div>
<div class="stretcher"></div>
</div>
表示の仕組み
- ページをスクロールすると、
.box要素がスクロール位置に応じて横方向にアニメーションします。 - JavaScriptは一切使わず、CSSだけでスクロールアニメーションが実現されています。
表示例
スクロール前 → .box はページ上部に固定となります。
スクロール中 → .box が徐々に右へ移動します。
スクロール終了付近 → .box は 右端に移動した状態で静止します。
実際の表示
対応ブラウザ（2025年5月現在）
この機能はアニメーションとスクロールの高度な連携が求められるUIに非常に有効で、パララックス効果やヒーローセクションの装飾に活用できそうです。
まとめ
本記事では、CSSに近年追加された注目の3つの機能 :has() 擬似クラス、コンテナクエリ（@container）、そして スクロール連動アニメーション（scroll-timeline / animation-timeline） について、それぞれの基本的な使い方と動作例を紹介しました。
-
:has()は「親セレクター」のように振る舞い、これまで不可能だった親要素に子要素の状態を反映したスタイリングを可能にします。フォームUIやインタラクティブなレイアウトで特に有用です。 - コンテナクエリは、要素自身のサイズや状態に応じてスタイルを変えるという新しい発想で、再利用性が高く柔軟なコンポーネント設計を可能にします。従来のメディアクエリが画面サイズ依存だったのに対し、コンテナクエリは「親要素の大きさ」によってレスポンシブ対応できるため、レイアウトのモジュール化に非常に適しています。
-
scroll-timeline/animation-timelineは、スクロールに応じたアニメーションを JavaScriptを使わずに 実装できる革新的な仕組みです。ビジュアル演出の幅が広がる一方、現状では 一部ブラウザのみが試験的に対応しており、利用にはブラウザの設定変更が必要な場合もあります。
いずれの機能も、CSSの表現力や柔軟性を飛躍的に高めるものですが、対応ブラウザや安定性に注意が必要です。特に scroll-timeline は現時点で一部環境に限定されているため、本格的な導入には注意が必要です。
これらの機能をうまく活用することで、CSSだけで実現できるUIの幅が大きく広がります。将来的により多くのブラウザが標準対応することで、よりモダンでアクセシブルなWeb開発が進むことできるでしょうか。今後のブラウザ対応状況にも注目しつつ、よりモダンなスタイリングに挑戦してみたいですね。