Lism Tips

is--wrapper（中身の幅をそろえる）

is--wrapper は、すぐ下の子の幅の上限をそろえて真ん中に置くクラスです。上限は -contentSize（s・m・l・xl）で決めます。

is--wrapper は、すぐ下の子どもたちの幅をまとめてそろえるクラスです。子の幅の上限を決め、真ん中に置きます。ブログの本文のように、文章を読みやすい幅に収めたいときに使います。

どんなときに使う？#

  • 本文の段落・見出し・画像を、同じ幅でまっすぐそろえたいとき
  • 子の1つ1つに -max-sz を付ける代わりに、親でまとめて幅を決めたいとき

1つの要素だけの上限を決めたいなら、最大幅（-max-sz） を使います。

使い方#

子をまとめる箱に is--wrapper を付けます。何も足さないと、子の幅の上限は --sz--m（880px）です。上限を変えるには -contentSize:s のようなクラスを足します。

html
<div class="l--flow is--wrapper -contentSize:s -p:20 -bd">
  <p>1つめの段落です。</p>
  <p>2つめの段落です。</p>
</div>

-contentSize:s の上限は 640px なので、広い画面で使うと、子は 640px で止まって真ん中に並びます。この上限は表示例の枠の幅とほぼ同じなので、下の表示例では小さい幅（--contentSize: 15rem）にして、子が真ん中に寄る様子を見せています。

表示例

1つめの段落です。

2つめの段落です。

箱も同じ幅で、真ん中に並びます。
html
<div class="l--flow is--wrapper -p:20 -bd" style="--contentSize: 15rem">
  <p>1つめの段落です。</p>
  <p>2つめの段落です。</p>
  <div class="-p:20 -bgc:base-2">箱も同じ幅で、真ん中に並びます。</div>
</div>

指定できる値#

-contentSize は --contentSize 変数だけを決めるクラスです。

クラス 子の幅の上限
（付けない） var(--sz--m)（880px）
-contentSize:s var(--sz--s)（640px）
-contentSize:m var(--sz--m)（880px）
-contentSize:l var(--sz--l)（1200px）
-contentSize:xl var(--sz--xl)（1600px）

s・m・l・xl 以外の幅にしたいときは、上の表示例のように style 属性で --contentSize に値を入れます。

しくみ#

scss
.is--wrapper {
  --contentSize: var(--sz--m, 100%);
  > * {
    inline-size: 100%;
    max-inline-size: min(100%, var(--contentSize));
    margin-inline: auto;
  }
}

すぐ下の子には、次の3つがかかります。

  • inline-size: 100%：子の幅をいったん親いっぱいにします
  • max-inline-size: min(100%, var(--contentSize))：その幅に上限を付けます。親のほうがせまければ、親の幅になります
  • margin-inline: auto：左右の外側の余白を自動にして、真ん中に置きます

1つめのおかげで、短い段落のように、もともとの幅が上限より小さい子も上限の幅まで広がります。l--stack のような縦に並べる箱の中でも、子の横幅がそろいます。

注意

<table>（表）を is--wrapper のすぐ下に置くと、表は中身に合わせた幅にならず、いつも上限の幅（親のほうがせまければ親の幅）まで広がります。表を中身に合わせた幅のままにしたいときは、is--wrapper と表のあいだに、別の要素を1つはさみます。

React・Astro で書く場合#

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

Props 出力されるもの
isWrapper is--wrapper
isWrapper='s' is--wrapper・-contentSize:s
isWrapper='m' is--wrapper・-contentSize:m
isWrapper='l' is--wrapper・-contentSize:l
isWrapper='xl' is--wrapper・-contentSize:xl
isWrapper={value} is--wrapper と、--contentSize に value

よく一緒に使う Props は次の3つです。

Props すること
contentSize 子の幅の上限を決める
layout flow などのレイアウト（Primitive）を一緒に使う
isContainer コンテナクエリの基準にする（is--container）
jsx
import { Lism, Wrapper, Flow } from 'lism-css/react';

<Flow isWrapper="s" isContainer>...</Flow>

<Wrapper contentSize="s" layout="flow" isContainer>...</Wrapper>

<Lism isWrapper="20rem" p="20">...</Lism>

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

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧