並び・配置

`container-type` 親の幅を基準に子の大きさを変える

重要度4 / 5

意味

画面全体ではなく、親の幅に合わせて子の大きさを変えたいときに使います。container-type: inline-size を親へ付けると、子から cqi という親の幅の単位が使えます。カードがサイドバーでも本文欄でも、そのカードの幅で文字サイズを変えられます。

clamp() と一緒に書くと、小さくなりすぎず、大きくなりすぎない範囲を決められます。親にこの指定が無いと、cqi は画面幅ではなく、期待した基準になりません。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="card">
  <h2>親の幅に合わせて大きくなります。</h2>
</div>

CSS

.card {
  container-type: inline-size;
  width: min(100%, 28rem);
  background: #efeef8;
  padding: 0.75rem 1rem;
}
.card h2 {
  font-size: clamp(1rem, 6cqi, 1.6rem);
}

プレビュー

この指定で使える関数

長さを計算して入れる書き方です。関数の一覧から詳細を開けます。

clamp()最小と最大のあいだで大きさを変える

ブラウザ対応

主要ブラウザの対応状況
ブラウザ	対応
Chrome	105〜
Firefox	110〜
Safari	16〜
Edge	105〜
Chrome Android	105〜
Safari iOS	16〜

出典: MDN Web Docs（`@mdn/browser-compat-data`）