Lism Tips

is--layer（上に重ねる）

is--layer は、親の箱の上にぴったり重なる層を作るクラスです。背景の画像や、色を重ねる幕に使います。

is--layer は、親の箱の上にぴったり重なる層を作るクラスです。写真の上に色の幕をかける、文章の後ろに画像を敷く、といった重ね方ができます。

どんなときに使う？#

  • 文字の後ろに、背景の画像を敷きたいとき
  • 画像の上に、半透明の色をかけて文字を読みやすくしたいとき
  • 下にあるものをぼかすなど、重ねた層に効果をかけたいとき

使い方#

親の箱に -pos:relative を付け、重ねたい要素に is--layer を付けます。重ねた要素は、親の箱と同じ位置・同じ大きさになります。

表示例

BACKGROUND

重ねた層の中身

html
<div class="-pos:relative -py:40">
  <p class="-fz:2xl -fw:bold -ta:center -lts:l -o:ppp">BACKGROUND</p>
  <div class="is--layer -p:20 -bgc" style="--bgc: color-mix(in srgb, var(--purple) 10%, transparent)">
    <p>重ねた層の中身</p>
  </div>
</div>
補足

is--layer は position: absolute を使うので、位置の基準になる親が要ります。親に -pos:relative を付けるのを忘れないようにします。

しくみ#

css
.is--layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
  • position: absolute：まわりの並びから外れ、親（position を持ついちばん近い祖先）を基準に置かれます
  • inset: 0：上下左右の距離を 0 にして、親の箱にぴったり合わせます
  • overflow: hidden：層からはみ出した部分を隠します

背景に画像を敷く#

画像を入れた層を下に、色の幕を真ん中に、文章を上に重ねます。文章の箱にも -pos:relative を付けると、文章が層より手前に出ます。

表示例

画像の上に、暗い幕を重ねています。

幕のおかげで、白い文字が読みやすくなります。

html
<div class="-pos:relative -py:50 -px:30">
  <div class="l--frame is--layer">
    <img src="/img/sample-landscape.svg" alt="" width="960" height="540" />
  </div>
  <div class="is--layer -bgc" style="--bgc: color-mix(in srgb, var(--black) 50%, transparent)"></div>
  <div class="l--stack -pos:relative -g:20 -c" style="--c: var(--white)">
    <p>画像の上に、暗い幕を重ねています。</p>
    <p>幕のおかげで、白い文字が読みやすくなります。</p>
  </div>
</div>

l--frame（画像や動画の枠） を層にすると、中の画像が箱いっぱいに広がります。

重ねた層をぼかす#

重ねた層に CSS の backdrop-filter（後ろにあるものをぼかす・色を変える）をかけると、下にあるものをぼかせます。Lism にはこのためのクラスが無いので、style="backdrop-filter: blur(3px)" のように直接書きます。

html
<div class="l--box -pos:relative -p:40">
  <p class="-fz:2xl -fw:bold -ta:center">BACKGROUND</p>
  <div class="is--layer" style="backdrop-filter: blur(3px)"></div>
</div>

React・Astro で書く場合#

どのコンポーネントにも isLayer を付けられます。<Lism isLayer> と同じものとして、<Layer> もあります。

Props 出力されるクラス
isLayer is--layer
jsx
import { Box, Layer, Text } from 'lism-css/react';

<Box pos="relative" py="40">
  <Text fz="2xl" fw="bold" ta="center">BACKGROUND</Text>
  <Layer p="15" bgc="purple:10%">
    <p>重ねた層の中身</p>
  </Layer>
</Box>

backdrop-filter は style で渡します。

jsx
<Layer style={{ backdropFilter: 'blur(3px)' }} />

Astro では lism-css/astro から読み込みます。

関連するページ#

公式ドキュメント

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

ページの一覧