CSSコンテナクエリ@container

CSS コンテナクエリ
まとめ

CSS コンテナクエリ

コンテナクエリとは従来のメディアクエリーとは異なり、ビューポートではなく、特定のコンテナ要素のサイズに基づいてスタイルを変更できます。

以下はコンテナクエリの具体例です。


  <div class="card-container">
    <div class="card">
      <img class="card-image" src="画像ファイル" />
      <div class="card-content">
        <h2 class="card-title">タイトル</h2>
        <p class="card-text">説明文</p>
      </div>
    </div>
  </div>

.card-container {
  container-type: inline-size;
  container-name: card-container;
}


.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}


@container card-container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    margin-right: 16px;
  }
}

@container card-container (min-width: 500px) {
  .card {
    padding: 24px;
  }
  
  .card-title {
    font-size: 1.5em;
  }
}

この例では300px以上でカードが横並びになります。

500px以上でパディングとフォントサイズが大きくなります。