Lism Tips

a--divider（区切り線）

a--divider は、内容と内容のあいだに区切り線を引くクラスです。線の色・太さ・種類は変数とクラスで変えられます。

a--divider は、内容と内容のあいだに区切り線を引くためのクラスです。空の div に付けると、その上の辺に1本の線が出ます。

どんなときに使う？#

  • 話題の変わり目を、線で見た目に区切りたいとき
  • 横に並んだ2つの箱のあいだに、縦の線を引きたいとき

線は見た目だけの飾りなので、aria-hidden="true"（読み上げソフトに読ませない印）を付けておきます。

使い方#

区切りたい場所に、a--divider を付けた空の div を置きます。

表示例

上の内容
下の内容
html
<div class="l--box -bgc:base-2 -py:30 -ta:center">上の内容</div>
<div class="a--divider" aria-hidden="true"></div>
<div class="l--box -bgc:base-2 -py:30 -ta:center">下の内容</div>

専用の変数#

変数 決めること 初期値
--bdc 線の色 var(--divider)
--bds 線の種類 solid（実線）
--bdw 線の太さ 1px

--bdc は border-color、--bds は border-style、--bdw は border-width の略です。

線の見た目を変える#

種類は -bds:dotted（点線）・-bds:dashed（破線）のようなクラスで、太さと色は style で変数に入れて変えます。

表示例

上の内容
下の内容
html
<div class="l--box -bgc:base-2 -py:30 -ta:center">上の内容</div>
<div class="a--divider -bds:dotted" aria-hidden="true" style="--bdw: 4px; --bdc: var(--blue)"></div>
<div class="l--box -bgc:base-2 -py:30 -ta:center">下の内容</div>

縦の線にする#

-wm:vertical-rl（writing-mode。文字を縦書きの向きにする）を付けると、線が縦向きになります。横に並べた箱のあいだに置き、-aslf:stretch（align-self。高さいっぱいに伸ばす）で上下に伸ばします。

表示例

左
右
html
<div class="l--flex -g:15 -ai:center">
  <div class="l--box -fx:1 -bgc:base-2 -py:30 -ta:center">左</div>
  <div class="a--divider -wm:vertical-rl -bds:dashed -aslf:stretch" style="--bdw: 2px" aria-hidden="true"></div>
  <div class="l--box -fx:1 -bgc:base-2 -py:30 -ta:center">右</div>
</div>

a--divider のしくみ#

a--divider が付ける CSS は次のとおりです。border-block-start は「文字の流れの始まり側の辺」の線です。横書きでは上の辺、縦書きの向きでは右の辺になるので、-wm:vertical-rl で縦の線になります。

scss
.a--divider {
  --bdc: var(--divider);
  --bds: solid;
  --bdw: 1px;
  border-block-start: var(--bdw) var(--bds) var(--bdc);
}

React・Astro で書く場合#

コンポーネントでは <Divider> を使います。<Lism atomic="divider" aria-hidden="true" /> を短く書けるようにしたもので、出てくる HTML は div.a--divider[aria-hidden="true"] です。

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

<Divider />
<Divider bds="dotted" bdw="4px" bdc="blue" />

Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

公式ドキュメント

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

ページの一覧