サイズに応じたスタイル設定

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

概要

サイズ対応のスタイル設定を使用すると、コンポーネントは画面全体のサイズではなく、使用可能なスペースに基づいてレイアウトや外観を変更できます。これは、レイアウトのさまざまな部分（狭いサイドバーや広いメインエリアなど）に配置される可能性のあるカードやナビゲーション バーなどのコンポーネントに役立ちます。

コンテナクエリを使用すると、コンポーネントを真にモジュール化できるため、コンテナクエリの使用をおすすめします。コンポーネントがどこに配置されるかを知る必要はなく、考えられるすべてのレイアウトを処理するために複雑なメディアクエリを記述する必要もありません。

実装

1. コンテナを定義する

必須: まず、測定対象のコンテナとなる要素をブラウザに伝える必要があります。

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. コンテナのサイズに基づいてスタイルを適用する

@container ルールを使用して、コンテナが特定のサイズに達したときにスタイルを適用します。

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. 条件付きでコンテンツを表示する

コンテナクエリを使用して、スペースに余裕があるときに追加の詳細情報を表示または非表示にすることもできます。

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

代替戦略

コンテナクエリをサポートしていないブラウザでは、安全なデフォルト レイアウト（縦に積み重ねるレイアウトなど）を使用し、一般的な画面サイズで対応できる場合はメディアクエリを使用してプログレッシブ エンハンスメントを行うことをおすすめします。

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

これにより、古いブラウザを使用しているユーザーでも、特定のコンテナ幅に完全に適応していなくても、使用可能なレイアウトを利用できます。