Lism Tips

Set Class（set--*）

Set Class（set--*）は、要素の見た目をリセットしたり、CSS 変数をまとめてセットしたりするクラスです。7つのクラスを表示例つきで紹介します。

Set Class（セットクラス）は、set-- で始まるクラスです。HTML の要素の見た目を整えるものと、ほかのクラスが使う CSS 変数を用意するものがあります。

一覧#

クラス 分類 何をするか
set--plain 見た目を整える ボタンなどの見た目を消して、まっさらにする
set--revert 見た目を整える リストの「・」や番号を、ブラウザの標準に戻す
set--bxsh 変数をセットする 影の変数を作り直し、影の色を変えられるようにする
set--s 変数をセットする 余白のトークンを、文字の大きさに合わせて計算し直す
set--hov 変数をセットする マウスが乗っているかを、子の要素に伝える
set--bleed 変数をセットする 片側だけ画面の端まで広げるための --bleed 変数を作る
set--bdrsInner 変数をセットする 内側の箱にちょうど合う角丸の大きさを計算する

set-- のあとの名前は、そのクラスが用意する変数の名前から付いています（--bxsh--* なら bxsh、--s* なら s）。

Set Class は、CSS のレイヤー（強さの順番）のうち lism-base に入っています（CSS のレイヤーと強さの順番）。

set--plain（見た目をまっさらにする）#

ボタン（button）には、ブラウザが付ける灰色の背景や枠線があります。set--plain は、そうした見た目（幅・高さ・色・文字・背景・余白・枠線・下線・角丸など）をまとめて消します。

表示例

html
<div class="l--cluster -g:20">
  <button>ふつうのボタン</button>
  <button class="set--plain">set--plain のボタン</button>
</div>

自分で作ったボタンやリンクの形を、まっさらな状態から組み立てたいときに使います。

set--revert（リストの印を戻す）#

Lism では、class 属性を持つ ul・ol は、「・」や番号の印が消えます。Property Class だけを付けたリストで印を残したいときに、set--revert を付けます。

表示例

  • 1つめ
  • 2つめ
  • 3つめ
html
<ul class="-fz:l set--revert">
  <li>1つめ</li>
  <li>2つめ</li>
  <li>3つめ</li>
</ul>
  • set--revert だけでは何もしません。いまは ul と ol に付けたときだけ働きます
  • 左の余白は --list-ps 変数で変えられます（最初は 1.75em）
補足

class 属性をまったく持たない ul・ol は、最初から印が付いています。set--revert は要りません。

set--bxsh（影の色を変える）#

影のトークン（--bxsh--10〜--bxsh--50）は、影の色 --shc を使って作られています。set--bxsh を付けた要素では、この影の変数が作り直されます。そのため、同じ要素で --shc を変えると、中の影の色が変わります。

表示例

影 20
影 40
html
<div class="l--cluster set--bxsh -g:30" style="--shc: hsl(200 50% 50% / 20%)">
  <div class="l--box -bxsh:20 -p:30 -bdrs:20">影 20</div>
  <div class="l--box -bxsh:40 -p:30 -bdrs:20">影 40</div>
</div>

影は、要素に近いうすい影と、本体の影の2枚でできています。近い影の色（--shc--near）も --shc から計算し直されるので、2枚の色がそろって変わります。

set--s（余白を文字の大きさに合わせる）#

余白のトークン（--s5〜--s70）は、ふつうは --s-unit: 0.5rem（約 8px）をもとに計算します。set--s を付けると、もとの単位が 0.5em になり、その要素の文字の大きさに合わせて余白が伸び縮みします。

表示例

html
<div class="l--cluster -g:10 -ai:center">
  <button class="set--s -fz:s -py:10 -px:20 -bd">小さいボタン</button>
  <button class="set--s -fz:xl -py:10 -px:20 -bd">大きいボタン</button>
</div>

どちらも -py:10 -px:20 ですが、文字が大きいボタンほど余白も大きくなります。ボタンやバッジのように、文字の大きさと余白をいっしょに変えたい部品で使います。

--s-unit を自分で決めることもできます。

html
<button class="set--s -p:10" style="--s-unit: .4375em">…</button>

set--hov（マウスが乗ったことを子に伝える）#

set--hov は、マウスが乗っているか（hover）を表す2つの変数をセットします。

変数 空の値になるとき
--_isHov マウスが乗っていないとき（中にフォーカスも無いとき）
--_notHov マウスが乗っているとき、またはフォーカスがあるとき

CSS の var(--変数, 代わりの値) は、変数が無いときだけ「代わりの値」を使います。このしくみを使うと、次のように書けます。

  • var(--_isHov, 乗ったときの値)：マウスが乗ったときだけ効く
  • var(--_notHov, 乗っていないときの値)：マウスが乗っていないときだけ効く

マウスを使わない端末（タッチ画面など。any-hover: none）では、いつも「乗っていない」扱いになります。

親に set--hov を付けると、親にマウスが乗ったときに、子の見た目を変えられます。たとえば、Lism に用意されている -hov:in:zoom を子の画像に付けると、カードにマウスを乗せたときに画像が少し大きくなります。

表示例

マウスを乗せる
html
<a href="#" class="l--frame set--hov is--boxLink -ar:16/9 -ov:hidden">
  <img class="has--transition -hov:in:zoom" src="/img/sample-landscape.svg" width="960" height="540" alt="">
  <div class="l--center is--layer -c:base">
    <span class="-fz:xl -bgc:text -p:10">マウスを乗せる</span>
  </div>
</a>

自分で -hov:test のようなクラスを作るときは、CSS を自分で足します。

css
.-hov\:test {
  color: var(--_isHov, green) var(--_notHov, red); /* 乗ると緑、ふだんは赤 */
  box-shadow: var(--_isHov, var(--bxsh--30)); /* 乗ったときだけ影 */
  opacity: var(--_notHov, var(--o--pp)); /* 乗っていないときだけうすく */
}
補足

var(--_isHov, …) var(--_notHov, …) と並べて1行で書く方法は、box-shadow のように空白で区切って値を書くプロパティでは使えません。

マウスを乗せたときのクラスの全体は マウスを乗せたとき（-hov） にあります。

set--bleed（片側だけ端まで広げる）#

set--bleed は、中身の幅（--contentSize）の外にある余白の量を --bleed 変数にセットします。この値を片側の padding に使うと、「文章は中身の幅にそろえたまま、画像だけ画面の端まで広げる」レイアウトが作れます。

表示例

上の文章は、中身の幅にそろっています。

文章の左は、上の文章とそろいます。

html
<div class="is--container">
  <div class="is--wrapper has--gutter -py:20 -bgc:base-2" style="--contentSize: var(--sz--xs)">
    <p>上の文章は、中身の幅にそろっています。</p>
  </div>
  <div class="l--columns set--bleed -cols_sm -g:0 -ai:center" style="--contentSize: var(--sz--xs); --cols: 1; --cols_sm: 2">
    <div class="l--box has--gutter -ps -py:20" style="--ps: var(--bleed)">
      <p>文章の左は、上の文章とそろいます。</p>
    </div>
    <div class="l--frame -ar:3/2">
      <img src="/img/sample-landscape.svg" width="960" height="540" alt="">
    </div>
  </div>
</div>

広い表示例では、右の画像が枠の右端まで広がります。

  • --bleed が、ガター（左右の余白。--gutter）より小さくなることはありません。せまい画面ではガターの幅になります
  • --contentSize が無いときは、--sz--m を中身の幅とみなします
css
.set--bleed {
  --bleed: max(var(--gutter, var(--gutter--base)), calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2));
}

set--bdrsInner（内側の角丸を合わせる）#

角の丸い箱の中に、余白をはさんで角の丸い箱を入れると、同じ丸さでは外側とずれて見えます。set--bdrsInner は、外側の角丸（--bdrs）から余白（--p）を引いて、内側にちょうど合う角丸（--bdrs--inner）を計算します。

表示例

html
<div class="set--bdrsInner -p:15 -bdrs:40 -bd -bxsh:20">
  <div class="l--frame -bdrs:inner -ar:16/9">
    <img src="/img/sample-landscape.svg" width="960" height="540" alt="">
  </div>
</div>
  • 親に set--bdrsInner と -bdrs・-p を付け、子に -bdrs:inner を付けます
  • 親の bdrs と p は必ず指定します
  • p と bdrs は値がいつも変数で読める作りなので、画面の幅で親の値を変えても、内側の角丸が自動で合います
css
.set--bdrsInner {
  --bdrs--inner: calc(var(--bdrs, 0px) - var(--p, 0px) + 1px);
}

React・Astro で書く場合#

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

jsx
<Lism set="bdrsInner" p="15" bdrs="40" bd bxsh="20">
  <Frame bdrs="inner" ar="16/9">…</Frame>
</Lism>

関連するページ#

公式ドキュメント

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

ページの一覧