Lism Tips

表示・はみ出し・位置

表示のしかた（-d）、見えなくする（-v・-o）、はみ出し（-ov）、縦横の比（-ar）、位置（-pos・-t・-z など）、そのほか（-whs・-wm など）のクラスの一覧です。

要素をどう表示するか、はみ出した部分をどうするか、どこに置くか、を決める Property Class（- で始まる、CSS の1つの性質を決めるクラス）をまとめたページです。表の「ブレイクポイント」の列に「対応」とあるものは、画面の幅で値を切り替えられます（画面の幅で切り替える（レスポンシブ））。

どんなときに使う？#

  • 要素を隠したい、広い画面でだけ見せたいとき（-d）
  • 少し薄く見せたいとき（-o）
  • 中身が箱からはみ出すのを切りたい、スクロールさせたいとき（-ov）
  • 画像や箱の縦と横の比をそろえたいとき（-ar）
  • 要素を重ねたり、すみに置いたりしたいとき（-pos・-t・-l など）

表示のしかた（-d）#

-d は display（表示のしかた）の略です。

クラス 意味
-d:none 表示しない（場所も空けない）
-d:block 1行を占める箱にする
-d:flex Flexbox で中身を並べる
-d:inline-flex 文の中に入る大きさの Flexbox にする
-d:grid Grid で中身を並べる
-d:inline-grid 文の中に入る大きさの Grid にする
-d:inline 文の中の文字と同じように並ぶ
-d:inline-block 文の中に並びつつ、幅や余白を持てる箱にする

-d はブレイクポイントに対応しています。次の例は、せまい枠では隠れていて、480px 以上の枠で表示されます。

表示例

いつも見える
広い画面でだけ見える
html
<div class="l--stack -g:10">
  <div class="-p:20 -bgc:base-2">いつも見える</div>
  <div class="-d:none -d_sm -p:20 -bd" style="--d_sm: block">広い画面でだけ見える</div>
</div>

見えなくする・薄くする（-v・-o）#

クラス 意味
-v:hidden 見えなくする（visibility。場所は空けたまま）
-o:0 完全に透明にする
-o:mp 不透明度 0.9
-o:p 不透明度 0.8
-o:pp 不透明度 0.6
-o:ppp 不透明度 0.4

-o は opacity（不透明度。1 が「まったく透けない」）の略です。-d:none と -v:hidden の違いは、場所を空けるかどうかです。

表示例

そのまま
-o:p
-o:pp
-o:ppp
html
<div class="l--cluster -g:20">
  <div class="l--stack -g:5"><div class="-bgc:brand -p:30 -bdrs:10"></div><span class="-fz:s">そのまま</span></div>
  <div class="l--stack -g:5"><div class="-bgc:brand -o:p -p:30 -bdrs:10"></div><span class="-fz:s">-o:p</span></div>
  <div class="l--stack -g:5"><div class="-bgc:brand -o:pp -p:30 -bdrs:10"></div><span class="-fz:s">-o:pp</span></div>
  <div class="l--stack -g:5"><div class="-bgc:brand -o:ppp -p:30 -bdrs:10"></div><span class="-fz:s">-o:ppp</span></div>
</div>

色の箱ほど薄く見えます。文字を薄くすると読みにくくなるので、ここでは箱で見せています。

はみ出しを決める（-ov・-ovw）#

-ov は overflow（はみ出し）の略です。中身が箱より大きいとき、どうするかを決めます。

クラス 意味
-ov:hidden はみ出した部分を隠す
-ov:clip はみ出した部分を切り取る
-ov:auto はみ出したときだけスクロールできるようにする
-ov-x:auto・-ov-x:clip・-ov-x:scroll 横方向（overflow-x）だけを決める
-ov-y:auto・-ov-y:clip・-ov-y:scroll 縦方向（overflow-y）だけを決める
-ovw:anywhere 長い英単語や URL を、どこでも折り返す（overflow-wrap）

表示例

この行はとても長いので、枠に入りきらずに横へスクロールできるようになります。
html
<div class="-ov-x:auto -bd -p:10">
  <div class="-whs:nowrap">この行はとても長いので、枠に入りきらずに横へスクロールできるようになります。</div>
</div>

縦と横の比（-ar）#

-ar は aspect-ratio（縦と横の比）の略です。ブレイクポイントに対応しています。

クラス 比（横 / 縦）
-ar:21/9 21:9
-ar:16/9 16:9
-ar:3/2 3:2
-ar:1/1 1:1（正方形）
-ar:og 1.91:1（SNS で共有されるときの画像の比）

表示例

1/1
16/9
html
<div class="l--columns -g:10 -ai:start" style="--cols: 2">
  <div class="-ar:1/1 -bgc:base-2 -bd -p:10">1/1</div>
  <div class="-ar:16/9 -bgc:base-2 -bd -p:10">16/9</div>
</div>

2つの箱は同じ幅です。-ar:1/1 は正方形に、-ar:16/9 は横長になります（-ai:start は、箱の高さを隣にそろえて伸ばさないための指定です）。

位置を決める（-pos・-t・-l・-r・-b・-i・-z）#

-pos は position（位置の決め方）の略です。-pos:relative の箱の中で、子に -pos:absolute を付けると、子を箱の中の好きな位置に置けます。

Shorthand 対応する CSS 用意されているクラスの値 ブレイクポイント
pos position relative・absolute・static・fixed・sticky 対応
t top（上からの距離） 0・50%・100% なし
l left（左からの距離） 0・50%・100% なし
r right（右からの距離） 0・50%・100% なし
b bottom（下からの距離） 0・50%・100% なし
z z-index（重なる順番） -1・0・1・99 なし
i inset（上下左右をまとめて） 0 なし
i-x inset-inline なし なし
i-y inset-block なし なし
i-s inset-inline-start なし なし
i-e inset-inline-end なし なし
i-bs inset-block-start なし なし
i-be inset-block-end なし なし

「なし」の Shorthand は、HTML で書くときに使える決まった値のクラスがありません。React・Astro のコンポーネントで、ブレイクポイントに対応していない Prop にクラスの無い値を渡すと、style 属性にそのまま書き出されます（例：i-x="0" → inset-inline:0。公式の例では o='0.7' → opacity:0.7）。-z は数字が大きいほど手前に重なります。

表示例

左上
右上
真ん中
左下
右下
html
<div class="-pos:relative -ar:16/9 -bd">
  <div class="-pos:absolute -l:0 -t:0 -bgc:base-2 -bd -p:10">左上</div>
  <div class="-pos:absolute -r:0 -t:0 -bgc:base-2 -bd -p:10">右上</div>
  <div class="-pos:absolute -i:0 -m:auto -w:fit -h:fit -bgc:base-2 -bd -p:10">真ん中</div>
  <div class="-pos:absolute -l:0 -b:0 -bgc:base-2 -bd -p:10">左下</div>
  <div class="-pos:absolute -r:0 -b:0 -bgc:base-2 -bd -p:10">右下</div>
</div>

真ん中に置くときは、-i:0（上下左右を 0 に）と -m:auto（余白を自動に）と -w:fit -h:fit（中身の大きさにする）を組み合わせます。

ヒント

親の上にぴったり重ねるだけなら、is--layer（上に重ねる） が使えます。

そのほか（-float・-clear・-iso・-wm・-whs）#

Shorthand 対応する CSS 用意されているクラスの値 ブレイクポイント
float float（左右に寄せて、文字を回り込ませる） left・right なし
clear clear（回り込みを止める） both なし
iso isolation（重なりの順番を箱の中で閉じる） isolate なし
wm writing-mode（文字の向き） vertical-rl 対応
whs white-space（折り返し） nowrap なし

-wm:vertical-rl を付けると、縦書き（右から左へ行が進む）になります。-whs:nowrap は、文を折り返さずに1行にします。

表示例

縦書きの文です。

行は右から左へ進みます。

html
<div class="-wm:vertical-rl -h -bd -p:20" style="--h: 10em">
  <p>縦書きの文です。</p>
  <p>行は右から左へ進みます。</p>
</div>

-wm はブレイクポイントに対応しているので、-wm_sm と --wm_sm を使えば、広い画面でだけ縦書きにできます。

React・Astro で書く場合#

コンポーネントでは、クラスの - を取った名前を Props として渡します。

jsx
<Text d="inline-flex" ar="1/1" p="20" bgc="base-2" bd>Box</Text>
<Group pos="absolute" l="0" t="0">A</Group>
<Flow wm={[null, 'vertical-rl']}>...</Flow>

関連するページ#

公式ドキュメント

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

ページの一覧