同じ部品を置き場所によって組み替えたいときは、画面幅ではなく親の幅を基準にする CSS の @container を使う

どんな問題を解決するか / いつ使うか

カードなどの部品を、広いメイン領域と狭いサイドバーの両方で使うとき。画面幅で分岐すると、同じ画面幅でも置き場所によって崩れる。

やり方

/* 1. 基準にしたい親をコンテナにする */
.card-wrap {
  container-type: inline-size;
  container-name: card;          /* 名前は省略可 */
}

/* 2. 既定は縦並び */
.card { display: grid; gap: 12px; }

/* 3. 親が 480px 以上なら横並び */
@container card (min-width: 480px) {
  .card { grid-template-columns: 160px 1fr; }
}

• 親の幅に応じた単位 cqi（コンテナ幅の1%）も使える。例：font-size: clamp(1rem, 4cqi, 1.5rem);

注意点

• container-type を付けた要素は、中身から幅が決まらなくなる（幅を外から与える必要がある）。
• 主要ブラウザで使える。
• 余白トークンでの使い分けは 余白のトークンはremかpxの二択にしない。%・cqi・コンテナクエリも使い分ける。
• コード例は一般的な書き方で補ったもの（元の投稿はテキストのみ）。

出典

• 投稿者: @wokobo_net
• 投稿: @wokobo_net · 2026-10-15
• 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）