2025年最新！Container Queriesで柔軟なレスポンシブデザインを作る手順

/* コンテナを定義 */
.container {
container-type: inline-size;
container-name: card; /* オプション */
}

/* コンテナクエリを適用 */
@container (min-width: 480px) {
  .item {
  font-size: 1.5em;
  }
}

<!-- 機能検出の例 -->

<script>
if (CSS.supports('container-type', 'inline-size')) {
  console.log('Container Queries is supported!');
}
</script>

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="カード画像">
    <div class="card-content">
      <h3>カードタイトル</h3>
      <p>カードの説明文がここに入ります。</p>
    </div>
  </div>
</div>

.card-container {
container-type: inline-size;
container-name: card;
padding: 20px;
border: 1px solid \#ccc;
}

.card {
display: flex;
flex-direction: column;
gap: 1rem;
}

/* 480px以上でレイアウト変更 */
@container card (min-width: 480px) {
  .card {
  flex-direction: row;
  align-items: center;
  }

  .card img {
  width: 150px;
  margin-right: 20px;
  }
}

/* 600px以上でさらに最適化 */
@container card (min-width: 600px) {
  .card {
  font-size: 1.1em;
  }
}

.sidebar {
container-type: inline-size;
width: 300px; /* 狭いサイドバー */
}

.navigation-menu {
display: grid;
grid-template-columns: 1fr;
}

@container (min-width: 250px) {
  .navigation-menu {
  grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 400px) {
  .navigation-menu {
  grid-template-columns: repeat(3, 1fr);
  }
}

const cardContainer = document.querySelector('.card-container');
const cards = cardContainer.children;

function adjustLayout() {
if (cardContainer.offsetWidth > 900) {
cards.forEach(card => card.style.width = '33.33%');
} else if (cardContainer.offsetWidth > 600) {
cards.forEach(card => card.style.width = '50%');
} else {
cards.forEach(card => card.style.width = '100%');
}
}

window.addEventListener('resize', adjustLayout);

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

.card {
width: 100%;
}

@container (min-width: 600px) {
.card { width: 50%; }
}

@container (min-width: 900px) {
.card { width: 33.33%; }
}

/* メディアクエリ: 全体レイアウト制御 */
@media (min-width: 768px) {
  .content-area {
  display: flex;
  }

  .main-content {
  flex: 2;
  }

  .sidebar {
  flex: 1;
  }
}

/* Container Queries: 記事コンテンツの制御 */
.article-container {
container-type: inline-size;
}

@container (min-width: 400px) {
  .article-card {
  display: flex;
  align-items: center;
  }
}

@container (min-width: 600px) {
  .article-card {
  font-size: 1.1em;
  }
}

.post {
container-type: inline-size;
}

/* ❌ これは動作しません */
@container (min-width: 480px) {
  .post {
  border: 4px solid \#000;
  }
}

/* ✅ これは動作します */
@container (min-width: 480px) {
  .post h2 {
  font-size: 3em;
  }
}

/* ❌ 動作しない例 */
.button {
color: \#000;
background: \#fff;
}

.theme-primary {
--button-theme: primary;
}

@container style(--button-theme: primary) {
  .button {
  color: \#fff;
  background: \#f66;
  }
}

/* ✅ 正しい例 */
/* HTMLを <div class="theme-primary"><button class="button">Button</button></div> に変更 */

/* 横幅のみ監視する場合 */
.container {
container-type: inline-size; /* sizeより軽量 */
}

/* 論理演算子の効率的な使用 */
@container (min-width: 400px) and (max-width: 800px) {
/* スタイル */
}

/* 深いネストは避ける */
@container card (min-width: 480px) {
@container (min-height: 300px) { /* 避けるべき */
/* スタイル */
}
}