流動的なスケーリング

ウェブ機能: コンテナクエリ（サイズ）

概要

流動的なスケーリングにより、コンポーネントは現在のサイズに基づいて内部の比率（フォントサイズや間隔など）を調整できます。これにより、固定のブレークポイント間をジャンプするよりも、まとまりのあるデザインを作成できます。

これまで、流動的なスケーリングはビューポート単位（画面サイズに基づくスケーリング）を使用して実現されていましたが、最新のコンテナクエリ単位では、コンポーネントを親コンテナを基準にスケーリングできます。これにより、レイアウト内のどこに配置されてもコンポーネントが適切に表示されるようになり、コンポーネントの分離性と再利用性が向上します。

実装

1. コンテナを定義する

コンテナクエリ単位を使用するには、まず親要素にコンテインメント コンテキストを定義する必要があります。

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. コンテナ クエリ単位を使用する

コンテナ クエリ単位（cqi、cqb など）を使用して、コンテナのサイズを基準にサイズを設定します。

  • cqi: コンテナのインライン サイズ（横書きモードの幅）の 1%。
  • cqb: コンテナのブロックサイズ（横書きモードの高さ）の 1%。

注: コンテナ単位は、@container クエリールールを必要とせずに、任意のプロパティで直接使用できます。container-type が定義されている最も近い祖先に基づいて自動的に解決されます。

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. clamp() で値を制約する

サイズが小さすぎたり大きすぎたりしないようにするには、CSS の clamp() 関数を使用します。これは、ユーザーがズームしたり、基本フォントサイズを調整したりする機能に影響します。テキストがユーザー補助のガイドラインを満たすようにするには、最大サイズを最小サイズの 2.5 倍以下にする必要があります。

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

代替戦略

ブラウザがコンテナクエリをサポートしていない場合は、ビューポート単位または標準のメディアクエリを使用してフォールバックを提供する必要があります。

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

このフォールバックにより、テキストは引き続きスケーリングされますが、コンポーネントの幅ではなく画面の幅に基づいてスケーリングされます。この方法は、ユースケースで機能することを確認するためにテストする必要があります。