Lism Tips

Utility Class（u--*）

Utility Class（u--*）は、色づけ・余白の調整・見えない文字などの効果をまとめて付けるクラスです。5つのクラスと、自分で足すクラスの例を紹介します。

Utility Class（ユーティリティクラス）は、u-- で始まるクラスです。1つのクラスで、いくつかのスタイルや飾りをまとめて付けます。

一覧#

クラス 何をするか
u--cbox 1つの色（--keycolor）から、文字・背景・枠線の色をまとめて作る
u--trim 文字の上下にある余分なすきまを、その要素だけ削る
u--trimAll 子の要素の、文字の上下のすきまをまとめて削る
u--srOnly 画面には見せず、読み上げソフトにだけ伝える
u--clipText 背景を文字の形に切り抜く

このほかに、Lism の CSS には入っていない「自分で足す」クラスの例（u--inlineCenter・u--divide・u--enclose）があります。下の「自分で足すクラスの例」で紹介します。

u--cbox（1つの色から色の組を作る）#

u--cbox は、--keycolor 変数に入れた色をもとに、文字の色（--c）・背景の色（--bgc）・枠線の色（--bdc）を作ります。色は CSS の color-mix()（2つの色を決まった割合で混ぜる関数）で作ります。

表示例

赤をもとにした箱
紫をもとにした、枠線つきの箱
左に太い線のある箱
html
<div class="l--stack -g:10">
  <div class="u--cbox -p:20" style="--keycolor: var(--red)">赤をもとにした箱</div>
  <div class="u--cbox -bd -bdrs:20 -p:20" style="--keycolor: var(--purple)">紫をもとにした、枠線つきの箱</div>
  <div class="u--cbox -bdc:keycolor -bd-s -p:20" style="--keycolor: var(--brand); --bdw: 4px">左に太い線のある箱</div>
</div>
  • 文字の色と背景の色は、そのまま付きます
  • 枠線の色は変数（--bdc）を作るだけです。線を出すには -bd などを足します
  • 中のリンクの色（--link-c）も --keycolor になります

混ぜる割合は、次の変数で変えられます。

変数 決めるもの 最初の値
--cbox-cPct 文字の色に混ぜる --keycolor の割合 25%
--cbox-bgPct 背景の色に混ぜる --keycolor の割合 4%
--cbox-bdPct 枠線の色に混ぜる --keycolor の割合 50%

表示例

バッジ バッジ バッジ
バッジ バッジ バッジ
html
<div class="l--stack -g:10">
  <div class="l--cluster -g:10">
    <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--red)">バッジ</span>
    <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--purple)">バッジ</span>
    <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--blue)">バッジ</span>
  </div>
  <div class="l--cluster -g:10" style="--cbox-cPct: 76%; --cbox-bdPct: 20%">
    <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--red)">バッジ</span>
    <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--purple)">バッジ</span>
    <span class="u--cbox -bd -fz:s -hl:s -py:5 -px:10 -bdrs:99" style="--keycolor: var(--blue)">バッジ</span>
  </div>
</div>

下の段は、文字の色を濃く、枠線をうすくしています。

補足

背景の色は、透明ではなく --base（背景の基本の色）と混ぜて作ります。背景に画像があっても文字が読みにくくならないようにするためです。

u--trim（文字の上下のすきまを削る）#

文字の行には、上と下に少しずつすきま（ハーフレディング）があります。そのため、枠で囲むと、文字の上下だけ余白が広く見えます。u--trim は、その要素の上下の margin をマイナスにして、このすきまを打ち消します。

表示例

ふつうの文章。点線の枠と文字のあいだに、少しすきまがあります。

u--trim の文章。文字が枠のすぐ近くまで来ます。

html
<div class="l--stack -g:20">
  <div class="l--box -bd -bds:dashed">
    <p>ふつうの文章。点線の枠と文字のあいだに、少しすきまがあります。</p>
  </div>
  <div class="l--box -bd -bds:dashed">
    <p class="u--trim">u--trim の文章。文字が枠のすぐ近くまで来ます。</p>
  </div>
</div>
css
.u--trim {
  margin-block: calc((1em - 1lh) / 2);
}

1lh は行の高さ、1em は文字の大きさです。その差の半分が、上下それぞれのすきまです。

u--trimAll（子の要素をまとめて削る）#

u--trimAll は、すぐ下の子の要素すべてに、u--trim と同じ調整をします。

表示例

1つめの文章です。

2つめの文章です。画像は対象外なので、そのままの大きさです。

html
<div class="l--stack u--trimAll -bd -g:20 -p:20 -bdrs:10">
  <img src="/img/sample-landscape.svg" width="960" height="540" alt="">
  <p>1つめの文章です。</p>
  <p>2つめの文章です。画像は対象外なので、そのままの大きさです。</p>
</div>

次の子の要素は、調整しません。

  • 中身の無い要素（:empty）：img・hr・br や、飾りの a--divider・a--spacer など
  • figure・picture・video・button・textarea・table

ほかにも外したい要素があるときは、自分の CSS で .u--trimAll > xxx { margin-block: 0 } のように打ち消します。

u--srOnly（読み上げソフトにだけ伝える）#

u--srOnly を付けた要素は、画面からは見えなくなります。それでも、スクリーンリーダー（画面の文字を読み上げるソフト）には読まれます。アイコンだけのボタンに、読み上げ用の名前を付けるときなどに使います。

表示例

html
<button class="-p:10 -bd">
  ★
  <span class="u--srOnly">お気に入りに追加</span>
</button>

画面には「★」だけが見えますが、読み上げソフトは「お気に入りに追加」と読みます。

u--clipText（背景を文字の形に切り抜く）#

u--clipText は、背景を文字の形だけ残して切り抜き、文字そのものの色は透明にします。背景が文字の色のように見えます。

表示例

TEXT

html
<div class="l--center">
  <p class="u--clipText -bgc -fz:5xl -fw:bold -hl:0" style="--bgc: var(--pink)">TEXT</p>
</div>

背景をグラデーション（だんだん色が変わる模様）にすると、文字がグラデーションになります。

注意

下の例は main.css だけでは動きません。--bgi を読む -bgi のクラスが full.css にしか無いためです。full.css を使うか、background-image: var(--bgi) の CSS を自分で足します。

html
<div class="l--center">
  <div class="l--box u--clipText -bgr:no-repeat" style="--bgi: linear-gradient(45deg, var(--blue), var(--pink))">
    <p class="-fz:5xl -fw:bold -hl:0 -lts:l">TEXT</p>
  </div>
</div>
補足

u--clipText は、-c や -bg などの Property Class に負けないように、!important を付けて書かれています。

自分で足すクラスの例#

ここからのクラスは、Lism の CSS には入っていません。使うときは、下の CSS を自分で足します。そのため、このページでは表示例にせず、コードだけで見せます。

u--inlineCenter（絵文字やアイコンを文字の真ん中に合わせる）#

文の中の絵文字やアイコンを、まわりの文字の高さの真ん中にそろえます。vertical-align: middle だけでは少しずれるので、translate で位置を直します。

css
.u--inlineCenter {
  vertical-align: middle;
  translate: 0 calc(-1 * (0.35em - 0.5ex));
}
html
<p><span class="u--inlineCenter -fz:xl">🚀</span> Emoji.</p>

u--divide と u--enclose（並んだ要素に線を引く）#

u--divide は、Grid や Flexbox で並べた子の要素のあいだに区切り線を引きます。u--enclose は、子の要素を1つずつ線で囲み、表のマスのように見せます。

どちらも、すきま（gap）と子の要素の影（box-shadow）で線を描きます。

css
@layer lism-utility {
  .u--divide,
  .u--enclose {
    --bdw: 1px;
    --bdc: var(--divider);
    gap: var(--bdw); /* 線の太さだけすきまを空ける */
  }
  .u--divide > *,
  .u--enclose > * {
    box-shadow: 0 0 0 var(--bdw) var(--bdc); /* すきまを影でうめて線に見せる */
  }
  .u--divide {
    overflow: clip; /* いちばん外の線は切り落とす */
  }
  .u--enclose {
    padding: var(--bdw);
  }
}
html
<div class="l--autoColumns u--divide -bdrs:20" style="--cols:16rem">
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
  <div class="l--box -p:15">divide</div>
</div>

u--divide に -bd を足すと、カレンダーのように、中身の無いマスも線だけ残ります。

html
<div class="l--columns u--divide -cols_sm -bd -bdc:current -fz:s" style="--cols:4;--cols_sm:5">
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
  <div class="-p:10">Item</div>
</div>
注意
  • border より線の描き方が少し粗く、Flexbox で子が折り返すと線がくずれることがあります。並ぶ向きが幅で変わるレイアウトの区切り線は、-bdw を画面の幅で切り替える方法を先に考えます（枠線・角丸・影（-bd など））
  • 線は枠線ではないので、-bds などの枠線のクラスは効きません。線の太さは --bdw で決めます
  • u--divide は overflow: clip を使うので、外にはみ出すもの（ツールチップやドロップダウンなど）が切れて見えなくなります
補足

@layer を使わない CSS ファイル（main_no_layer.css・full_no_layer.css）を使っているときは、@layer lism-utility { … } の囲みを外し、.u--divide を .u--divide.u--divide、.u--enclose を .u--enclose.u--enclose に書きかえます（CSS ファイルの種類）。

React・Astro で書く場合#

コンポーネントでは util の Props に、u-- のあとの名前を渡します。

jsx
<Lism util="cbox" keycolor="red" p="20">赤をもとにした箱</Lism>
<Stack util="trimAll" bd g="30" p="30" bdrs="10">…</Stack>

関連するページ#

公式ドキュメント

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

ページの一覧