画面幅ではなく親の幅で切り替える

<article class="card">
  <div class="card-thumb"></div>
  <div>
    <span class="card-tag">CSS</span>
    <h3 class="card-title">置き場所の幅で形が決まる</h3>
    <p class="card-text">
      このカードは画面幅を見ていません。親要素の幅だけを見て、縦積みと横並びを切り替えています。
    </p>
  </div>
</article>

/* 置き場所をコンテナとして宣言する。inline-size は「横幅だけを
   問い合わせ対象にする」指定で、縦は今までどおり中身で決まる。 */
.card-slot {
  container-type: inline-size;
}

/* 既定は縦積み。狭いほうを既定にしておくと、
   対応していない環境でも壊れずに読める形が残る。 */
.card {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.card-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe 60%, #93c5fd);
}
.card-title { margin: 0; font-size: 1rem; line-height: 1.6; }
.card-text { margin: .35rem 0 0; font-size: .86rem; line-height: 1.85; color: var(--muted); }
.card-tag {
  display: inline-block; margin-bottom: .4rem;
  font-size: .72rem; line-height: 1.8; color: var(--accent);
}

/* ここが本題。見ているのは画面幅ではなく、直近の祖先コンテナの幅。
   同じカードでも、置かれた場所が 380px 以上なら横並びになる。 */
@container (min-width: 380px) {
  .card {
    grid-template-columns: 160px 1fr;
    align-items: center;
  }
  .card-title { font-size: 1.08rem; }
}

/* 段階を足すのもメディアクエリと同じ書き方でよい。 */
@container (min-width: 560px) {
  .card { grid-template-columns: 220px 1fr; padding: 1.2rem; }
  .card-text { font-size: .92rem; }
}

<section class="panel">
  <span class="panel-badge">CSS Container Query Units</span>
  <h2 class="panel-title">親の幅に、文字が追いつく</h2>
  <p class="panel-text">
    見出しも本文も余白も、画面幅ではなく親要素の幅を基準にしています。同じ部品を狭い欄に置いても、比率を保ったまま縮みます。
  </p>
</section>

.panel {
  /* container-type を付けた時点で、この要素は
     コンテナクエリ単位（cqw / cqi / cqh / cqb）の基準にもなる。 */
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: clamp(1rem, 4cqi, 2rem);
}

/* cqi は「コンテナの inline 方向のサイズの1%」。
   横書きの日本語では横幅の1%にあたる。
   vw と違って、画面ではなく親の幅に追随する。 */
.panel-title {
  margin: 0;
  /* 下限・上限を clamp で必ず挟む。cqi 単体だと、
     狭いときに読めない大きさまで縮み続ける。 */
  font-size: clamp(1.05rem, 5cqi, 2rem);
  line-height: 1.45;
}

.panel-text {
  margin: .6rem 0 0;
  font-size: clamp(.84rem, 2.1cqi, 1rem);
  line-height: 1.85;
  color: var(--muted);
  /* 1行の文字数も親幅に合わせる。読みやすさは
     フォントサイズだけでなく行の長さで決まる。 */
  max-width: 40em;
}

.panel-badge {
  display: inline-block;
  margin-bottom: .5rem;
  /* 余白も cqi にすると狭いときに消えてしまう。
     ここも clamp で下限を確保する。 */
  padding: clamp(.15rem, .6cqi, .3rem) clamp(.55rem, 2cqi, 1rem);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--accent);
  font-size: clamp(.68rem, 1.6cqi, .82rem);
  line-height: 1.8;
}

<div class="page">
  <div class="column">
    <article class="card">
      <div class="card-thumb"></div>
      <div>
        <h3 class="card-title">近い祖先と、遠い祖先</h3>
        <p class="card-text">
          段組みは内側のコンテナ、余白は名前で指定した外側のコンテナを見て決めています。
        </p>
      </div>
    </article>
  </div>
</div>

/* コンテナに名前を付ける。省略記法の container は
   `container: <name> / <type>` の順で書く。 */
.page {
  container: page / inline-size;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 1rem;
}

/* 内側にもう1つコンテナがある。名前を付けていない匿名コンテナでも、
   「最も近い祖先」として選ばれてしまう点に注意。 */
.column {
  container: column / inline-size;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: .8rem;
}

.card {
  display: grid;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}
.card-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(135deg, #dbeafe, #93c5fd);
}
.card-title { margin: 0; font-size: .98rem; line-height: 1.6; }
.card-text { margin: .3rem 0 0; font-size: .84rem; line-height: 1.85; color: var(--muted); }

/* 名前なしの @container は、最も近い祖先コンテナ（= .column）を見る。
   中身の詰まり具合を決めるのはこちらが自然。 */
@container (min-width: 320px) {
  .card { grid-template-columns: 120px 1fr; align-items: center; }
}

/* 名前を書くと、近い祖先を飛び越して指定した祖先を見にいく。
   「ページ全体が広いときだけ余白を増やす」のように、
   役割の違う判断を混ぜずに書ける。 */
@container page (min-width: 620px) {
  .card { padding: 1.2rem; gap: 1.1rem; }
  .card-title { font-size: 1.08rem; }
}

<div class="layout">
  <main class="region">
    <p class="region-label">本文欄</p>
    <article class="notice">
      <span class="notice-date">2026.09.01</span>
      <h3 class="notice-title">サーバー移設のお知らせ</h3>
      <p class="notice-text">
        9月14日の午前2時から4時にかけて、一時的にアクセスできない時間があります。
      </p>
      <a class="notice-action" href="#">詳細</a>
    </article>
  </main>

  <aside class="region">
    <p class="region-label">サイドバー</p>
    <article class="notice">
      <span class="notice-date">2026.09.01</span>
      <h3 class="notice-title">サーバー移設のお知らせ</h3>
      <p class="notice-text">
        9月14日の午前2時から4時にかけて、一時的にアクセスできない時間があります。
      </p>
      <a class="notice-action" href="#">詳細</a>
    </article>
  </aside>
</div>

/* ページ側のレイアウト。ここは画面幅の話なので
   メディアクエリのままでよい。役割が違う。 */
.layout {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .layout { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* 部品を受け取る場所は、どこもコンテナにしておく。
   こうしておけば、あとで置き場所を入れ替えても
   部品側のCSSを触らずに済む。 */
.region { container-type: inline-size; }

/* --- 以下は「お知らせ」部品。置き場所を一切知らない --- */
.notice {
  display: grid;
  gap: .7rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: #fff;
}
.notice-date {
  font-size: .74rem; line-height: 1.8; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.notice-title { margin: 0; font-size: .96rem; line-height: 1.6; }
.notice-text { margin: 0; font-size: .84rem; line-height: 1.85; color: var(--muted); }
.notice-action {
  justify-self: start;
  padding: .45rem .9rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: .82rem;
  line-height: 1.8;
  text-decoration: none;
}
/* 狭い場所では説明文を落として、日付と見出しだけにする。
   情報量を減らす判断も、部品の中に書ける。 */
.notice-text { display: none; }

@container (min-width: 300px) {
  .notice-text { display: block; }
}

@container (min-width: 460px) {
  .notice {
    grid-template-columns: 6rem 1fr auto;
    align-items: center;
    padding: 1.1rem;
  }
  .notice-title { grid-column: 2; }
  .notice-text { grid-column: 2; margin-top: -.4rem; }
  .notice-date { grid-row: 1 / span 2; }
  .notice-action { grid-column: 3; grid-row: 1 / span 2; }
}