最近追加されたCSSプロパティの解説と使用例

実際のコードと表示例で理解する最新CSS機能

## はじめに
Web開発の現場では、Cascading Style Sheets（CSS）は常に進化を続けており、ユーザー体験やレイアウトの柔軟性を向上させるための新しいプロパティが次々と登場しています。これまでJavaScriptで実装していたようなインタラクティブな表現も、CSSだけで実現できる場面が増えてきました。

本記事では、最近仕様に追加されたCSSの新機能やプロパティに焦点を当て、実際のコードとともにその効果を画像で紹介します。具体的には、`:has()` 擬似クラスやコンテナクエリ、スクロール連動アニメーション（`scroll-timeline`）といった、注目度の高い新機能を取り上げます。

これから紹介する内容は、最新ブラウザ環境に対応した表現を前提としているため、実務に取り入れる際の互換性チェックも必要ですが、これらの機能を知っておくことで、より表現力の高いデザインや効率的なレイアウト制御が可能になるかと思います。

## 新しいCSSプロパティの紹介
### `:has()` 擬似クラス（親セレクター）
#### 概要
`:has()` は、CSSセレクター内で「ある子要素を持っているかどうか」によって、**親要素にスタイルを適用**できる画期的な機能です。これにより、従来はJavaScriptで実装するしかなかったような**親要素の状態に応じたスタイル変更**が、CSSだけで実現可能になりました。

この機能はCSS4セレクター仕様の一部であり、主要なブラウザはすでに対応しています。

#### 構文
```css:css
:has(セレクターリスト) {
  /* スタイルシート */
}
```

#### コーディング例
以下の例では、`<article>` 要素の中に `<h2>` 要素があるかどうかによって、`<article>` 要素の枠線の有無を切り替えます。
```css:css
article:has(h2) {
    border: 2px solid #2e8b57;
    background-color: #f0fff0;
    padding: 1em;
}

article {
    margin-bottom: 1em;
}
```

```html:html
<article>
    <h2>見出しあり</h2>
    <p>このセクションには見出しがあります。</p>
</article>
  
<article>
    <p>このセクションには見出しがありません。</p>
</article>
```

### 表示例
以下は、上記コードの表示イメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/43b5339b-ac7c-4e03-b18b-53787886cdf5.png)


- 上段の `<article>` は `<h2>` を含むため、緑色の枠と背景色が適用されています。
- 下段の `<article>` は `<h2>` を含まないため、装飾はされていません。

### 対応ブラウザ（2025年5月現在）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/b12c5dbf-efd8-4fd8-96d4-413b9940bb7b.png)
[:has() 擬似クラスのサポート状況](https://caniuse.com/css-has)


## `container-type` / `@container` （コンテナクエリ）
### 概要
コンテナクエリ（Container Queries）は、要素のスタイルを**親コンテナのサイズ**に基づいて変更できる新しいCSSの仕組みです。これまでのメディアクエリ（`@media`）は**ビューポート全体のサイズ**にしか反応できませんでしたが、コンテナクエリは**要素単位のレスポンシブデザイン**を可能にします。

これにより、モジュール単位での柔軟なレイアウト制御が可能になり、コンポーネントの再利用性が大幅に向上します。

### 構文
```css:css
@container (コンテナーサイズクエリー) {
    /* スタイルシート */
}
```

### コーディング例
以下は、親コンテナの幅に応じて、`.item` の背景色が変化する例です。
```css:css
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;
    }
}
```

```html:html
<div class="container">
    <div class="item">これはアイテムです（幅により色が変わります）</div>
</div>
```

### 表示例
コンテナの幅が500px以上の場合 → `.item` の背景色は水色（`#add8e6`）になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/ec0b8fc0-c65b-49c0-aba1-3c462e4113f7.png)

コンテナの幅が500px未満の場合 → `.item` の背景色はグレー（`#d3d3d3`）になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/191b6fff-fdc8-4da6-8932-88de417ef59a.png)

### 実際の表示
![case02_zip.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/b70f8113-3d34-4678-917b-e86479b6b9ee.gif)


### 対応ブラウザ（2025年5月現在）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/cc86fe6a-e2e0-494b-af2b-00c651cfe266.png)
[コンテナクエリのサポート状況](https://caniuse.com/css-container-queries)

## `scroll-timeline`（スクロール連動アニメーション）
:::note alert
一部ブラウザのみ試験的に対応しているため利用には注意が必要です
:::

### 概要
`scroll-timeline` は、**スクロール位置に応じてCSSアニメーションを制御できる**新機能です。これにより、従来はJavaScriptでしか実現できなかった**スクロールに応じた要素の移動・フェード・拡大縮小**などを、CSSのみで記述可能になります。

この機能は [CSS Scroll-linked Animations](https://drafts.csswg.org/scroll-animations-1/) 仕様に基づいており、`scroll-timeline` と `animation-timeline` プロパティを使って設定します。

### 構文
```css:css
scroll-timeline: <scroll-timeline-name> <scroll-timeline-axis>;

animation-timeline: <dashed-ident>;
```

### コーディング例
以下は、スクロール位置に応じて `.box` 要素が左から右に移動する例です。
```css:css
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));
    }
}
```

```html:html
<div class="container">
    <div class="box"></div>
    <div class="stretcher"></div>
</div>
```

### 表示の仕組み
- ページをスクロールすると、`.box` 要素がスクロール位置に応じて**横方向にアニメーション**します。
- JavaScriptは一切使わず、CSSだけでスクロールアニメーションが実現されています。

### 表示例
スクロール前 → `.box` はページ上部に固定となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/29eebfc4-f45e-445e-89fa-d78e1fdffc10.png)

スクロール中 → `.box` が徐々に右へ移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/f3d6785e-f26d-488b-989a-9d689e37182a.png)

スクロール終了付近 → `.box` は 右端に移動した状態で静止します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/e3a90a8f-5b6e-4807-97e8-e61146a553e6.png)

### 実際の表示
![case03_zip.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/ef10dc91-84f5-4db2-ab6a-cc2970d165b7.gif)

### 対応ブラウザ（2025年5月現在）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73748/90b84144-e3ac-4ec8-85fc-8039cb2ca6f1.png)
[scroll-timelineプロパティのサポート状況](https://caniuse.com/?search=css-scroll-timeline)

この機能はアニメーションとスクロールの高度な連携が求められるUIに非常に有効で、パララックス効果やヒーローセクションの装飾に活用できそうです。

## まとめ
本記事では、CSSに近年追加された注目の3つの機能 `:has()` 擬似クラス、コンテナクエリ（`@container`）、そして スクロール連動アニメーション（`scroll-timeline` / `animation-timeline`） について、それぞれの基本的な使い方と動作例を紹介しました。

- `:has()` は「親セレクター」のように振る舞い、これまで不可能だった**親要素に子要素の状態を反映したスタイリング**を可能にします。フォームUIやインタラクティブなレイアウトで特に有用です。
- コンテナクエリは、要素自身のサイズや状態に応じてスタイルを変えるという新しい発想で、再利用性が高く柔軟なコンポーネント設計を可能にします。従来のメディアクエリが画面サイズ依存だったのに対し、コンテナクエリは「親要素の大きさ」によってレスポンシブ対応できるため、レイアウトのモジュール化に非常に適しています。
- `scroll-timeline` / `animation-timeline` は、スクロールに応じたアニメーションを JavaScriptを使わずに 実装できる革新的な仕組みです。ビジュアル演出の幅が広がる一方、現状では **一部ブラウザのみが試験的に対応**しており、利用にはブラウザの設定変更が必要な場合もあります。

いずれの機能も、CSSの表現力や柔軟性を飛躍的に高めるものですが、**対応ブラウザや安定性に注意が必要**です。特に `scroll-timeline` は現時点で一部環境に限定されているため、本格的な導入には注意が必要です。

これらの機能をうまく活用することで、CSSだけで実現できるUIの幅が大きく広がります。将来的により多くのブラウザが標準対応することで、よりモダンでアクセシブルなWeb開発が進むことできるでしょうか。今後のブラウザ対応状況にも注目しつつ、よりモダンなスタイリングに挑戦してみたいですね。