Lism Tips

文字の入った区切り線

a--divider と l--flex を組み合わせて、線のあいだに文字を入れた区切り線を作る例です。横向きと縦向きがあります。

「――― または ―――」のように、区切り線のあいだに文字を入れた飾りの作り方です。a--divider（区切り線）を2本と文字を、l--flex で横に並べるだけで作れます。

どんなときに使う？#

  • 内容のまとまりの切れ目に、短い見出しや「または」などの言葉を入れたいとき
  • 横に並んだ箱と箱のあいだに、縦向きの区切りを入れたいとき

使い方#

線・文字・線の順に並べ、線の両方に -fx:1 を付けます。-fx は flex の略で、-fx:1 を付けた線が残りの幅を分け合って伸びます。

表示例

中身
ラベル
中身
html
<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">中身</div>
<div class="l--flex -ai:center -g:20 -hl:s">
  <div class="a--divider -fx:1" aria-hidden="true"></div>
  <span class="-fz:s">ラベル</span>
  <div class="a--divider -fx:1" aria-hidden="true"></div>
</div>
<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">中身</div>
  • -ai:center で、線と文字の高さの真ん中をそろえます
  • 公式の例では、外の箱に -hl:s（ハーフレディングを小さめにする）も付けています
  • 線には aria-hidden="true" を付け、読み上げソフトが読まないようにします

文字を片側に寄せる・線の見た目を変える#

線を1本にすると、文字が左（または右）に寄ります。線の色・形・太さも変えられます。

表示例

ラベル
中身
ラベル
html
<div class="l--flex -ai:center -g:15 -hl:s">
  <span class="-fz:s -px:5">ラベル</span>
  <div class="a--divider -fx:1 -bdc:current -o:pp" aria-hidden="true"></div>
</div>
<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">中身</div>
<div class="l--flex -ai:center -g:15 -hl:s -c" style="--c: var(--blue)">
  <div class="a--divider -fx:1 -bdc:current -bds:dotted -o:ppp" style="--bdw: 4px" aria-hidden="true"></div>
  <span class="-fz:s -px:5">ラベル</span>
</div>
クラス・変数 線への効き目
-bdc:current 線の色を、文字の色と同じにする（-bdc は border-color の略）
-bds:dotted 線を点線にする（-bds は border-style の略）
--bdw 線の太さ（style="--bdw: 4px" のように渡す）
-o:pp・-o:ppp 線を薄くする（ppp のほうがより薄い）

外の箱に色（-c）を付けると、-bdc:current の線と文字がいっしょにその色になります。

縦向きの区切り線#

横に並んだ箱のあいだに入れる、縦の区切りです。線に -wm:vertical-rl（writing-mode を縦書きにする）を付けると、線が縦向きになります。線と文字は l--stack で縦に並べ、-aslf:stretch（align-self: stretch）で、まわりの箱と同じ高さまで伸ばします。

表示例

箱
または
箱
html
<div class="l--flex -ai:center -g:15">
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">箱</div>
  <div class="l--stack -ai:center -g:10 -hl:s -fz:s -aslf:stretch">
    <div class="a--divider -wm:vertical-rl -fx:1" aria-hidden="true"></div>
    <span>または</span>
    <div class="a--divider -wm:vertical-rl -fx:1" aria-hidden="true"></div>
  </div>
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">箱</div>
</div>

文字も縦書きにしたいときは、線と文字を包む l--flex のほうに -wm:vertical-rl を付けます。

表示例

箱
ラベル
箱
html
<div class="l--flex -ai:stretch -g:15">
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">箱</div>
  <div class="l--flex -wm:vertical-rl -ai:center -g:15 -hl:s -fz:xs -aslf:stretch">
    <span class="-px:5">ラベル</span>
    <div class="a--divider -fx:1" aria-hidden="true"></div>
  </div>
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">箱</div>
</div>

React・Astro で書く場合#

線は <Divider>、並べる箱は <Flex> です。

jsx
<Flex ai="center" g="20" hl="s">
  <Divider fx="1" />
  <Inline fz="s">ラベル</Inline>
  <Divider fx="1" />
</Flex>

線の見た目は <Divider fx="1" bdc="currentColor" bds="dotted" bdw="4px" o="ppp" /> のように、Props で渡します。縦向きは wm="vertical-rl" です。

関連するページ#

公式ドキュメント

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

ページの一覧