is--container（幅の基準になる箱）

is--container は、幅の基準になる箱を作るクラスです。Lism の -p_sm のような「画面の幅で切り替えるクラス」は、この箱の幅を見て切り替わります。

コンテナクエリってなに？#

ふつうの CSS で「幅が 480px 以上のときだけ、このスタイルにする」と書く方法は2つあります。

• メディアクエリ（@media）：ブラウザの画面（ウィンドウ）の幅を見ます
• コンテナクエリ（@container）：親や祖先の「コンテナ」と呼ぶ箱の幅を見ます

コンテナクエリなら、同じ部品を広い本文に置いても、せまい横の列に置いても、置かれた場所の幅に合わせて見た目が変わります。ただし、どの箱を基準にするかを CSS で決めておく（container-type を書く）必要があります。

どんなときに使う？#

• -p_sm・-d_sm などのブレイクポイント（レイアウトを切り替える幅）のクラスを効かせたいとき
• ページ全体や本文の外側の箱に付けて、幅の基準にしたいとき
• -max-sz:bleed で、画面の端まで広げる基準を決めたいとき（最大幅（-max-sz））

ブレイクポイントの幅（sm は 480px 以上、md は 800px 以上、lg は 1120px 以上）と、メディアクエリに切り替える方法は、画面の幅で切り替える（レスポンシブ） で説明しています。

使い方#

基準にしたい箱に is--container を付けます。中の要素の _sm などのクラスは、その箱の幅で切り替わります。

<div class="is--container -p:20 -bd">
  <div class="-bd -p:10 -p_sm" style="--p_sm: var(--s30)">この箱の内側の余白は、枠の幅が 480px 以上になると広がります。</div>
</div>

この表示例は、スマートフォンでは内側の余白が小さく、広い画面では大きくなります。

しくみ#

is--container が付ける CSS は次のとおりです。

.is--container {
  container-type: inline-size;
}
.is--container > * {
  --sz--bleed: 100cqi;
}
.is--container.has--gutter > * {
  --sz--bleed: calc(100cqi + var(--gutter) * 2);
}
.is--container .is--container > * {
  --sz--bleed: inherit;
}

• container-type: inline-size で、この箱の横幅をコンテナクエリの基準にします
• 残りの3つは、-max-sz:bleed が広がる幅（--sz--bleed）を決めています。いちばん外側の is--container で値が決まり、内側の is--container はその値をそのまま受け継ぎます。has--gutter もあるときは、左右の余白の分も足します

cqi は、いちばん近いコンテナの横幅を 100 等分した単位です。

よく一緒に使うクラス#

is--wrapper と中身の幅の指定（-contentSize:s など）を一緒に付けると、「幅の基準」と「中身の幅をそろえる」を1つの箱で済ませられます。

<div class="is--container is--wrapper -p:20 -bd" style="--contentSize: 20rem">
  <div class="-bd -p:10 -p_sm" style="--p_sm: var(--s30)">中身の幅がそろい、余白も切り替わります。</div>
</div>

表示例の枠は -contentSize:s（640px）より狭いので、ここでは中身の幅を --contentSize: 20rem にして、中身が真ん中に寄るのが見えるようにしています。中の -p_sm は、この箱（is--container）の幅で切り替わります。

React・Astro で書く場合#

どのコンポーネントにも isContainer を付けられます。<Lism isContainer> と同じものとして、<Container> もあります。

import { Container, Box } from 'lism-css/react';

<Container isWrapper="s" p="20">
  <Box bd p={['10', '30']}>
    この箱は、余白が切り替わります。
  </Box>
</Container>

Astro では lism-css/astro から読み込みます。

関連するページ#

• 画面の幅で切り替える（レスポンシブ）
• is--wrapper（中身の幅をそろえる）
• 最大幅（-max-sz）：bleed の広がる幅
• has--gutter（左右に余白を付ける）