Lism Tips

はじめに・ステップ 6 / 7

チートシート（よく使うクラス）

よく使う Lism のクラスを、並べ方・役割・余白・文字・色・枠線・配置・レスポンシブに分けて1ページで引ける早見表です。

よく使う Lism のクラスを、1ページにまとめた早見表です。全部ではなく、使う回数の多いものを選んでいます。すべての値は、各行のリンク先のページにあります。

並べ方（Primitive）#

クラス すること くわしく
l--box 中身をまとめる箱 l--box
l--flow 文章を読みやすい間隔で並べる l--flow
l--stack 縦に並べる l--stack
l--cluster 横に並べて、入りきらなければ折り返す l--cluster
l--flex Flexbox で並べる l--flex
l--grid Grid で並べる l--grid
l--columns 同じ幅の列に分ける（列の数は --cols） l--columns
l--autoColumns 列の数を幅に合わせて自動で決める l--autoColumns
l--switchColumns 横並びと縦1列を自動で切り替える l--switchColumns
l--withSide メインと横の2列 l--withSide
l--center 真ん中に置く l--center
l--frame 画像や動画の枠 l--frame
a--divider 区切り線 a--divider
a--spacer すきまを空ける a--spacer

表示例

l--cluster
横に
並びます
html
<div class="l--cluster -g:10">
  <div class="-p:10 -bgc:base-2">l--cluster</div>
  <div class="-p:10 -bgc:base-2">横に</div>
  <div class="-p:10 -bgc:base-2">並びます</div>
</div>

役割と機能（Trait Class）#

クラス すること くわしく
is--container 幅で切り替えるときの基準の箱にする is--container
is--wrapper 直下の中身の最大の幅をそろえ、真ん中に置く is--wrapper
is--layer 親の上に重ねる is--layer
is--boxLink 箱ごとリンクにする is--boxLink
has--gutter 左右に決まった余白を付ける has--gutter
has--transition 変化をなめらかにする has--transition

余白#

数字は 余白のトークン の段階です。

値 大きさ（目安）
5 4px
10 8px
15 12px
20 16px
25 20px
30 24px
35 32px
40 40px
45 52px
50 64px
60 104px
70 168px
クラス すること
-p:20 内側の余白（padding）
-px:20・-py:20 左右だけ・上下だけの内側の余白
-m:20 外側の余白（margin）
-mx:auto 左右の外側を自動にして、真ん中に寄せる
-mbs:20 上の外側の余白（margin-block-start）
-g:20 並べた子要素どうしのすきま（gap）

くわしくは 余白（padding・margin・gap） を見てください。

補足

上下左右を t・b・l・r で書くもの（-pt・-ml など）より、文字の流れる向きに合わせて変わる s・e・bs・be で書くもの（-ps・-mbs など）が公式にすすめられています。

文字#

クラス すること
-fz:2xs〜-fz:5xl 文字の大きさ（m がふつう。l・xl と大きく、s・xs と小さく）
-fw:bold 太字（ほかに light・normal）
-ff:mono 等幅の書体（ほかに base・accent）
-ta:center 文字を真ん中にそろえる（ほかに left・right）
-fz:base 文字の大きさをページの基本の大きさにする
-hl:s 行の上下のすきま（ハーフレディング）を変える（ほかに 0・xs・base・l・xl）
-lh:1 行の高さを文字の高さと同じにする
-td:none 下線などを消す

表示例

-fz:xl -fw:bold

-fz:s -ff:mono

html
<div class="l--stack -g:10">
  <p class="-fz:xl -fw:bold">-fz:xl -fw:bold</p>
  <p class="-fz:s -ff:mono">-fz:s -ff:mono</p>
</div>

くわしくは 文字（大きさ・太さ・行間） を見てください。

色#

クラス すること
-c:text-2 文字の色（ほかに brand・accent・text・base・keycolor・inherit）
-bgc:base-2 背景の色（ほかに brand・accent・base・text・keycolor・inherit・transparent・current）
-bdc:brand 枠線の色（ほかに accent・divider・keycolor・inherit・transparent・current）

表示例

-bgc:base-2

-bgc:brand -c:base

html
<div class="l--stack -g:10">
  <p class="-p:10 -bgc:base-2">-bgc:base-2</p>
  <p class="-p:10 -bgc:brand -c:base -fz:l -fw:700">-bgc:brand -c:base</p>
</div>

くわしくは 文字の色と背景 と 色のトークン を見てください。

枠線・角丸・影#

クラス すること
-bd 枠線を付ける
-bd-b などの方向 1辺だけ枠線を付ける
-bds:dashed 点線にする（ほかに dotted・double）
-bdrs:10〜-bdrs:50・-bdrs:99 角を丸める（99 がいちばん丸い）
-bxsh:10〜-bxsh:50 影を付ける

表示例

-bd -bdrs:20
-bxsh:20
html
<div class="l--cluster -g:20">
  <div class="-p:20 -bd -bdrs:20">-bd -bdrs:20</div>
  <div class="-p:20 -bxsh:20 -bdrs:20">-bxsh:20</div>
</div>

くわしくは 枠線・角丸・影（-bd など） を見てください。

表示と配置#

クラス すること
-d:none 見えなくする
-d:flex・-d:grid 並べ方を Flexbox・Grid にする
-ai:center 交差する向き（ふつうは縦）の真ん中にそろえる
-jc:center・-jc:between 並ぶ向きの真ん中・両はしにそろえる
-fxw:wrap 入りきらなければ折り返す
-pos:relative・-pos:absolute 位置の決め方
-ar:16/9 縦横の比率（ほかに 21/9・3/2・1/1・og）
-w:100%・-w:fit 幅を親いっぱい・中身ぴったりにする
-max-sz:s 最大の幅を決める（xs・s・m・l・xl・bleed・full）
-ov:hidden はみ出した分を隠す

表示例

左 右
html
<div class="l--flex -jc:between -ai:center -p:10 -bd">
  <span>左</span>
  <span>右</span>
</div>

くわしくは 表示・はみ出し・位置・並べ方（Flex・Grid・配置）・幅と高さ を見てください。

決まった値にない値を入れる#

:値 を付けずにクラスを書き、CSS 変数で値を入れます。

表示例

-p と --p: 2em

html
<p class="-p -bd" style="--p: 2em">-p と --p: 2em</p>

画面の幅で切り替える（レスポンシブ）#

-{prop}_{bp} のクラスと、--{prop}_{bp} の CSS 変数を一緒に書きます。

表示例

せまいと約 16px、480px 以上で約 40px の余白
html
<div class="-p:20 -p_sm -bd" style="--p_sm: var(--s40)">せまいと約 16px、480px 以上で約 40px の余白</div>
記号 効く幅
_sm 480px 以上
_md 800px 以上
_lg 1120px 以上
注意

切り替えの基準は画面ではなく、先祖の is--container の箱の幅です（コンテナクエリ）。先祖に is--container が無いと切り替わりません。また、すべてのプロパティが切り替えに対応しているわけではありません。

くわしくは 画面の幅で切り替える（レスポンシブ） を見てください。

マウスを乗せたとき#

マウスを乗せたときの見た目は -hov: で始まるクラスで決めます。少し特別なしくみなので、マウスを乗せたとき（-hov） を見てください。

次に読むページ#

  • 用語集：このサイトに出てくる言葉の意味

公式ドキュメント

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

ページの一覧