Lism CSS
Docs
検索

Trait Class( is--*, has--* )

Trait Class は、要素に「役割」を宣言したり、「機能」を付与するためのクラス群です。
@layer lism-trait に属します。

  • is--{name}: 要素に役割・存在（〜である）を宣言するクラス
  • has--{name}: 要素に機能（〜を持つ）を付与するクラス

is--*（役割宣言）

クラス 概要
is--container コンテナクエリの基準要素を定義する
is--wrapper コンテンツ幅を制御するラッパー要素
is--layer 親要素に重ねるオーバーレイレイヤー
is--boxLink ボックス全体をリンク化する
is--coverLink 親要素全体に広がるクリック領域を持つリンク（→ is--boxLink 参照）
is--side l--withSide の side 要素用（→ l--withSide 参照）
is--skipFlow l--flow 内で次の兄弟との余白を打ち消す（→ l--flow 参照）

has--*（機能付与）

has--transition

専用の変数を用いて、transitionプロパティをセットします。

.has--transition {
  --duration: var(--transition-duration, 0.25s);
  --ease: ease;
  --delay: 0s;
  // `all` は読み込み時やレイアウト変化時に意図しないアニメーションを起こすため、対象を見た目系プロパティに限定する。
  --transitionProps: color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter;
  transition: var(--duration) var(--ease) var(--delay);
  transition-property: var(--transitionProps);
}

トランジションの対象プロパティ（--transitionProps）の初期値は、色・影・透明度・transform系・filter系に限定しています。allにすると、ページ読み込み時やレイアウト変化時に意図しないアニメーション（表示のちらつき）が入りやすいためです。

実際に変化させるプロパティだけを--transitionPropsで明示指定することを推奨します。Lismコンポーネントでは、hasTransitionに文字列を渡すと--transitionPropsとして出力されます。

↓
使用例
Example
<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>

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

-hov

hover時の挙動をコントロールする -hov Property Class の使い方について解説します。

has--gutter

コンテンツの左右に定義済みの余白をつけることができるクラスです。
サイト全体で統一した余白量を左右に確保するためのものとして、padding系のユーティリティとは別のクラスとして用意しています。

クラス名 余白量 初期値
has--gutter --gutter（基準値: --gutter--base） var(--s30) 
.has--gutter {
  --gutter: var(--gutter--base);
  padding-inline: var(--gutter);
}
↓
例

Lorem ipsum content…

Lorem ipsum content…

Lorem ipsum content…

リサイズ 
<div class="has--gutter">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>

has--snap

scroll-snap-系のプロパティをCSS変数でセットできるようにします。

.has--snap {
  --snapType: both mandatory;
  --snapAlign: start;
  --snapStop: normal;
  scroll-snap-type: var(--snapType);

  & > * {
    scroll-snap-align: var(--snapAlign);
    scroll-snap-stop: var(--snapStop);
  }
}
変数 役割 初期値
--snapType scroll-snap-type の値 both mandatory
--snapAlign 子要素の scroll-snap-align の値 start
--snapStop 子要素の scroll-snap-stop の値 normal

has--mask

--maskImg 変数と組み合わせて、自身にマスクを適用するクラスです。

.has--mask {
  --maskPos: 50%;
  --maskSize: contain;
  --maskRepeat: no-repeat;
  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
}
変数 役割 初期値
--maskImg マスク画像（SVG等） —
--maskPos マスクの位置 50%
--maskSize マスクのサイズ contain
--maskRepeat マスクの繰り返し no-repeat
↓
例
<div class="l--frame has--mask -ar:og" style="--maskImg:url('data:image/svg+xml,<svg viewBox=&quot;0 0 200 200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path fill=&quot;%23000000&quot; d=&quot;M170.4,25.7c16.1,14.2,23.2,38.5,24.8,61.7c1.7,23.3-1.8,45.5-12.9,62.3c-11,16.9-29.3,28.6-48.8,34.5 c-19.4,5.9-40,6.1-59.5,0.4c-19.5-5.6-37.9-17.4-51.7-34.9c-14-17.5-23.2-40.8-18-60.2c5-19.4,24.5-34.7,43.5-48.4 s37.6-25.7,59.5-29.7C129.1,7.3,154.2,11.4,170.4,25.7z&quot; /></svg>')">
  <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=max&w=1920&q=80" width="960" height="640" alt="" loading="lazy" />
</div>

© 2026 Lism CSS.