幅と高さ

要素の幅と高さを決めるクラスの一覧です。-w:100% や -max-sz:s のように、よく使う値はクラスになっています。それ以外の値は、変数で渡します。

どんなときに使う？#

• 箱を親の幅いっぱいにしたいとき（-w:100%）
• 箱を中身の大きさにぴったり合わせたいとき（-w:fit）
• 文章の幅が広がりすぎないように、上限を決めたいとき（-max-sz:s など）

幅と高さの2つの言い方#

CSS には、幅と高さの言い方が2通りあります。

横書きのページでは、inline-size は width と同じ向きです。縦書きにすると、inline-size は縦の長さになります。Lism では、前者を w・h、後者を sz・bsz（size・block-size の略）と書きます。

一覧#

• fit は fit-content（中身に合わせた大きさ）の略です
• 用意された値が - のもののうち、sz・min-sz は値の無いクラスと変数（-sz と --sz など）で使います
• bsz・max-bsz・min-bsz は、main.css に値の無いクラスがありません（full.css にはあります）。main.css では React・Astro の Props で渡します

幅を決める#

-w:fit は中身の幅に、-w:100% は親の幅いっぱいになります。

<div class="l--stack -g:10">
  <div class="-w:fit -p:10 -bgc:base-2">-w:fit</div>
  <div class="-w:100% -p:10 -bgc:base-2">-w:100%</div>
</div>

表に無い値は、値の無いクラスに変数で渡します。

<div class="-w:fit -h -p:10 -bgc:base-2 -bd" style="--h: 5em">高さ 5em</div>

最大幅を決める（-max-sz）#

-max-sz は、幅の上限をサイズのトークン（前もって決めた幅の段階）から選ぶクラスです。

<div class="-max-sz -p:10 -bd" style="--max-sz: 12em">幅は 12em まで。これより長い文章は折り返します。</div>

-max-sz:full と -max-sz:bleed は、親や外側の箱の幅まで広げる特別な値です。くわしくは 最大幅（-max-sz） で説明しています。

中身の幅を決める（-contentSize）#

-contentSize は、CSS のプロパティではなく --contentSize 変数だけをセットするクラスです。-contentSize:s なら --contentSize: var(--sz--s) になります。

この変数は、is--wrapper（中身の幅をそろえる） などが「中身をどの幅にそろえるか」を決めるときに使います。

<div class="is--container is--wrapper -contentSize:s -p:20">
  <p>中身の幅が --sz--s にそろいます。</p>
</div>

画面の幅で切り替える#

w・h・max-w・max-h・min-w・min-h・sz・max-sz・min-sz は、_sm・_md・_lg で切り替えられます。

<div class="-w:100% -w_sm -p:10 -bgc:base-2" style="--w_sm: 50%">
  スマートフォンでは幅いっぱい、広い画面では半分
</div>

React・Astro で書く場合#

<Lism w="fit" h="5em" bgc="base-2" p="10" bd>
  Example text
</Lism>

h="5em" のように、用意された値に無いものも、そのまま Props に書けます。

関連するページ#

• 最大幅（-max-sz）
• is--wrapper（中身の幅をそろえる）
• デザイントークン（余白・角丸・影など）
• 表示・はみ出し・位置