最大幅（-max-sz）

-max-sz は、要素の横幅の上限を決めるクラスです。sz は size（大きさ）の略で、CSS の max-inline-size（横書きでは max-width と同じ）を指定します。文章の幅を読みやすく抑えたり、一部だけを画面いっぱいに広げたりするときに使います。

どんなときに使う？#

• 本文が横に長くなりすぎないよう、幅に上限を付けたいとき（-max-sz:m など）
• 本文の幅の中にある画像や背景を、左右の余白まで広げたいとき（-max-sz:full）
• 本文の幅を飛び出して、画面の端から端まで広げたいとき（-max-sz:bleed）

決まった数の幅（100% など）にしたいときは、幅と高さ の -max-w も使えます。

使い方#

上限を付けたい要素に -max-sz:s のように付けます。幅が上限より広い場所では、上限で止まります。真ん中に置くなら -mx:auto を足します。

<div class="l--stack -g:10">
  <div class="-max-sz:xs -mx:auto -p:20 -bgc:base-2">-max-sz:xs（最大 400px）</div>
  <div class="-max-sz:s -mx:auto -p:20 -bgc:base-2">-max-sz:s（最大 640px）</div>
</div>

指定できる値#

xs〜xl は、Lism の大きさのトークン（あらかじめ決めてある値）--sz--{名前} を使います。

親いっぱいに広げる（full）#

-max-sz:full は、ふつうは幅の上限を 100% にするだけです。

has--gutter（左右に余白を付ける） のすぐ下の子に付けたときは、動きが変わります。親の左右の余白（--gutter）の分まで外へはみ出し、親の箱の端から端まで広がります。

<div class="has--gutter l--stack -g:10 -py:20 -bd">
  <p>has--gutter の中の文章です。</p>
  <div class="-max-sz:full -p:20 -bgc:base-2">-max-sz:full</div>
  <p>左右に余白があります。</p>
</div>

画面いっぱいに広げる（bleed）#

-max-sz:bleed は、本文の幅や、入れ子になった is--container を突き抜けて、いちばん外側の is--container の幅まで広がります。ページ全体に is--container（幅の基準になる箱） を付けておけば、画面の端から端まで届く帯が作れます。

祖先に is--container が1つも無いときは、画面の幅（100svi）まで広がります。

<div class="is--container has--gutter -py:20 -bd">
  <div class="l--stack -g:10 -max-sz:xs -mx:auto">
    <p>本文の幅の中です。</p>
    <div class="-max-sz:bleed -p:20 -bgc:base-2">-max-sz:bleed</div>
  </div>
</div>

bleed が広がる幅は、is--container が --sz--bleed 変数で子に伝えています。

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

画面の幅で切り替える#

-max-sz はブレイクポイント（レイアウトを切り替える画面の幅）に対応しています。HTML では、-max-sz_sm などのクラスと --max-sz_sm などの変数をセットで書きます（画面の幅で切り替える（レスポンシブ））。

<div class="-max-sz:s -max-sz_sm -max-sz_md" style="--max-sz_sm: var(--sz--m); --max-sz_md: var(--sz--l)"></div>

切り替えに使えるのは、xs〜xl のトークンと、720px のような長さの値です。

React・Astro で書く場合#

コンポーネントでは max-sz に値を渡します。画面の幅で切り替えるときは、配列かオブジェクトで書きます。

<Box max-sz="m" />
<Box max-sz={['s', 'm', 'l']} />
<Box max-sz={{ base: 's', md: '720px' }} />

関連するページ#

• 幅と高さ：-w・-max-w など
• is--wrapper（中身の幅をそろえる）：子の幅をまとめてそろえる
• is--container（幅の基準になる箱）
• has--gutter（左右に余白を付ける）