Lism Tips

a--decorator（飾りの要素）

a--decorator は、飾りのためだけに置く空の要素に付けるクラスです。位置や形はほかのクラスで決めます。

a--decorator は、飾りのためだけに置く空の要素に付けるクラスです。このクラス自体は見た目を持たない、名前だけのクラスです。位置・大きさ・線などは、ほかのクラスで決めます。

どんなときに使う？#

  • 箱の角にカギかっこのような線を付けるなど、中身と関係のない飾りを足したいとき
  • 「ここは飾りの要素だ」と、HTML を読んだときに分かるようにしたいとき

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

使い方#

飾りたい箱に -pos:relative（位置の基準にする）を付け、その中に a--decorator の空の div を置きます。飾りには -pos:absolute（基準の箱の中で位置を決める）と、-t:0（top）・-l:0（left）などで置き場所を決めます。

下の例は、箱の左上と右下に、カギの形の線を付けています。

表示例

角に飾りの線が付いた箱です。

html
<div class="l--box -p:30 -pos:relative">
  <p>角に飾りの線が付いた箱です。</p>
  <div class="a--decorator -pos:absolute -t:0 -l:0 -bd-s -bd-bs -bdc:current -ar:1/1 -w" style="--w: 1.25em" aria-hidden="true"></div>
  <div class="a--decorator -pos:absolute -r:0 -b:0 -bd-e -bd-be -bdc:current -ar:1/1 -w" style="--w: 1.25em" aria-hidden="true"></div>
</div>

-bd-s と -bd-bs は、始まり側の縦の辺（左）と横の辺（上）の線です。-bd-e と -bd-be は、終わり側（右と下）の線です。-bdc:current で、線の色を文字の色にそろえています。

React・Astro で書く場合#

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

Props 決めること
size 幅と高さをまとめて決める。値は w（width）に入り、ar='1/1'（縦横の比率 1:1）も自動で付く
jsx
import { Box, Decorator } from 'lism-css/react';

<Box p="30" pos="relative">
  <p>...</p>
  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-s bd-bs bdc="current" />
  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-e bd-be bdc="current" />
</Box>

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

関連するページ#

公式ドキュメント

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

ページの一覧