Lism Tips

l--box（まとめる箱）

l--box は、中身をひとまとめにするだけの、いちばんシンプルな箱のクラスです。余白や背景色のクラスと組み合わせて使います。

l--box は、中の要素をひとまとめにするだけの箱のクラスです。並べ方は変えません。

どんなときに使う？#

  • 余白・背景色・影・角丸を付けた「囲み」を作りたいとき
  • 並べ方は変えず、「ここからここまでがひとかたまり」と分かるようにしたいとき

縦や横に並べたいときは、l--stack や l--cluster を使います。

使い方#

l--box に、見た目を決める Property Class（-p:30 などの1つの見た目を変えるクラス）を足して使います。

表示例

余白・背景色・影・角丸を付けた箱です。

html
<div class="l--box -p:30 -bgc:base-2 -bxsh:10 -bdrs:10">
  <p>余白・背景色・影・角丸を付けた箱です。</p>
</div>
クラス 意味
-p:30 内側の余白（padding）
-bgc:base-2 背景色（background-color）
-bxsh:10 影（box-shadow）
-bdrs:10 角丸（border-radius）

しくみ#

l--box そのものには、CSS の指定がありません。「これはまとまりの箱です」という目印の名前です。見た目は、いっしょに付けたクラスで決まります。

React・Astro で書く場合#

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

<Box p="30" bgc="base-2" bxsh="10" bdrs="10">
  <p>コンテンツ</p>
</Box>

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

関連するページ#

公式ドキュメント

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

ページの一覧