Lism CSS
検索

Set Class

@lism-base 層の中で定義される、HTML 要素の基礎スタイリングや変数セットを行うためのユーティリティクラスを set--{className} の形式で定義しています。

set— クラスは目的別に 2 カテゴリに分かれます。

カテゴリ用途クラス
基礎スタイリングHTML 要素のリセット／リバートset--plain / set--revert
変数のセットCSS 変数のセットアップのみを行うset--var:bxsh / set--var:hov / set--var:bdrsInner

set--var:{name} の {name} は、そのクラスがセットアップする CSS 変数の名称に対応します（例: --bxsh--* → var:bxsh、--_isHov / --_notHov → var:hov、--bdrs--inner → var:bdrsInner）。

set--plain

主要スタイルをリセットするためのクラスです。

// ボタンやリンク、モーダルスタイルをリセットするためのユーティリティクラス
// Memo: font:inherit は書いていない。→  .-font:inherit がある + フォーム系には reset.css で記述済み + line-height に影響が出るため。

.set--plain {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  color: inherit;
  font: inherit;
  line-height: calc(1em + var(--hl) * 2); /* 全称セレクタ と同じ値 */
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  text-decoration: none;
  border-radius: 0;
}
↓
set--plainをbuttonに適用する例
<div class="l--flex -g:20 -ff:mono">
  <button class="set--plain">button</button>
</div>

set--revert

ブラウザデフォルトの見た目を明示的に復活させるためのクラスです。 これ単体ではスタイルは持ちません（全プロパティを revert するというようなものではない）。

特定の HTML 要素と組み合わせてスタイルを定義して使うものであり、現状は ul / ol のみ対象です。

Lism CSS では、クラスを持つリスト（ul / ol）ではスタイルがリセットされます。 クラスを持ちつつ、箇条書き表示を維持したい場合（Property Class しか持たないリストなど）に set--revert を付与します。

// HTML 要素の基礎スタイリング ― ブラウザ標準の見た目を復活させる汎用クラス
// set--revert 単体では何も適用されず、HTML要素と組み合わせて使う想定。現状は ul / ol のみ対象だが、ユーザーが a / button など他要素に対しても自由に使える。
:is(ul, ol).set--revert {
  list-style: revert;
  padding-inline-start: var(--list-px-s, var(--s30));
}
↓
Property Class 付き ul に set--revert を適用する例
  • item 1
  • item 2
  • item 3
<ul class="-fz:l set--revert">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

classless な ul / ol（class 属性を一切持たないリスト）はブラウザ標準スタイルが自動復活するため、set--revert は不要です。

set--var:bxsh

.set--var:bxsh クラスを指定した要素では、シャドウを構成する --bxsh-- 変数が再定義されます。

/* --------------------------------------------------
  shadow
    Memo: :root だけで --bxsh-- をセットしてしまうと --shc がその時点で固定されるので、
    要素ごとに --shc を上書きできるよう、再セット用の set--var:bxsh クラスを併用する。
-------------------------------------------------- */
:root {
  --shc: hsl(220 4% 8% / 15%);

  --shsz--10: 0px 1px 3px;
  --shsz--20: 0px 2px 6px;
  --shsz--30: 0px 4px 12px;
  --shsz--40: 0px 8px 24px;
  --shsz--50: 0px 16px 48px;
}

:root,
.set--var\:bxsh {
  --bxsh--10: var(--shsz--10) var(--shc);
  --bxsh--20: var(--shsz--20) var(--shc);
  --bxsh--30: var(--shsz--30) var(--shc);
  --bxsh--40: var(--shsz--40) var(--shc);
  --bxsh--50: var(--shsz--50) var(--shc);
}

ここで--shc変数を上書きすることで、シャドウの色味を調整したりすることが可能です。

↓
シャドウの上書き例

Default:

Box
Box

set—var:bxsh で 変数を上書きした例:

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

set--var:hov

ホバー状態の判定変数（--_notHov, --_isHov）を次のようにセットします。主に子要素のホバースタイルを制御する時に活用します。

  • --_isHovは非hover時（かつ非focus-within時）にのみ空白定義されます。
  • --_notHovは逆に、hover時またはfocus-within時に空白定義されます。
@media (any-hover: hover) {
  .set--var\:hov:hover {
    --_notHov: ;
  }
  .set--var\:hov:not(:is(:hover, :focus-within)) {
    --_isHov: ;
  }
}
@media (any-hover: none) {
  .set--var\:hov {
    --_isHov: ;
  }
}
.set--var\:hov:is(:focus-visible, :focus-within) {
  --_notHov: ;
}

この空変数トリックにより、次のような書き方ができます。

  • var(--_isHov, {ホバー時に適用させたい値})
  • var(--_notHov, {非ホバー時に適用させたい値})

例えば color: var(--_isHov, red) とした要素の場合、hover時に--_isHovが未定義となるため、color:redが適用されるようになります。

var(--_isHov, ...) var(--_notHov, ...)とするとホバー前後のスタイルを1行で書くこともできますが、box-shadowなどの半角スペースで区切って値を調整するプロパティではこの書き方無効となります。

↓
例: -hov:test
.-hov\:test {
  color: var(--_isHov, green) var(--_notHov, red); /* hover時はgreen, 非hover時はred*/
  box-shadow: var(--_isHov, var(--bxsh--30)); /* hover時はshadowをつける（非hover時は無効な値） */
  opacity: var(--_notHov, var(--o--pp)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
}
↓
-hov:testのプレビュー
BOX
<div className="set--var:hov -hov:test -p:30 -bd -bdc:current ">BOX</div>

さらに、親要素にset--var:hovを付与してその子要素で--_isHov変数と--_notHov変数を使うことで、親要素のhoverをトリガーとして子要素のスタイルを変化させることも可能になります。

例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、-hov:in:zoomクラスが標準で用意されています。

.-hov\:in\:zoom {
  --transitionProps: scale;
  scale: var(--_isHov, 1.1);
}
↓
-hov:in:zoomの使用例
バナーリンク
 
<a href="###" class="l--frame set--var:hov is--boxLink -ar:21/9 -ov:hidden">
  <img class="has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" loading="lazy" />
  <div class="is--layer -bgc" style="--c: #fff; --bgc: rgb(0 0 0 / 50%)"></div>
  <div class="l--center is--layer -c" style="--c: #fff;">
    <span class="-fz:xl">バナーリンク</span>
  </div>
</a>

活用例は hoverの解説ページ を参照してください。

-hov

hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。

set--var:bdrsInner

親要素の角丸(--bdrs)とPadding(--p)の値から、その内側の角丸（--bdrs--inner）を自動計算するためのクラスです。 親要素にset--var:bdrsInnerをクラスをセットし、子要素では-bdrs:innerをセットすることで、計算された--bdrs--innerをセットすることができます。

（親要素ではbdrsとpの指定が必須となります。）

.set--var\:bdrsInner {
  --bdrs--inner: calc(var(--bdrs, 0px) - var(--p, 0px));
}
↓
使用例
<div class="set--var:bdrsInner -p:15 -bdrs:40 -bd -bxsh:20">
  <div class="l--frame -bdrs:inner -ar:og">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" width="1920" height="1280" alt="" />
  </div>
</div>

p, bdrsはブレイクポイントで値を変えても変数管理されているため、set--var:bdrsInnerの角丸もレスポンシブ対応できます。

↓
使用例
Example
リサイズ 
<Lism p={[10, 15]} bd bdrs={['30', '40']} class="set--var:bdrsInner">
  <Lism bd p="20" bdrs="inner" bgc="base-2">
    Example
  </Lism>
</Lism>

© Lism CSS. All rights reserved.

目次