Lism Tips

has--mask（形で切り抜く）

has--mask は、SVG などの形を使って要素を切り抜くクラスです。--maskImg に形を渡し、位置や大きさを変数で調整します。

has--mask は、要素を好きな形で切り抜くクラスです。切り抜く形は --maskImg という変数で渡します。

マスクとは#

マスク（mask）は、CSS の機能です。形の画像を要素に重ねて、形のある部分だけを見せ、ない部分を透明にします。型紙を当てて、その形に切り取るようなものです。CSS では mask というプロパティで指定します。

どんなときに使う？#

  • 写真を丸や、ぐにゃっとした形で切り抜いて見せたいとき
  • 色の付いた箱を、アイコンの形に切り抜きたいとき

使い方#

has--mask を付け、--maskImg に形の画像を url(...) で渡します。下の例は、丸い形の SVG（図形を文字で書いた画像）で、写真を丸く切り抜いています。

表示例

html
<div class="l--frame has--mask -ar:og" style="--maskImg: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10 10%22%3E%3Ccircle cx=%225%22 cy=%225%22 r=%225%22/%3E%3C/svg%3E')">
  <img src="/img/sample-landscape.svg" alt="" />
</div>

画像でなく、背景色の箱を切り抜くこともできます。

表示例

html
<div class="has--mask -bgc:brand -h -w" style="--w: 120px; --h: 120px; --maskImg: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10 10%22%3E%3Ccircle cx=%225%22 cy=%225%22 r=%225%22/%3E%3C/svg%3E')"></div>

専用の変数#

変数 役割 初期値
--maskImg 切り抜く形の画像（SVG など） なし
--maskPos 形を置く位置 50%
--maskSize 形の大きさ contain
--maskRepeat 形をくり返して並べるか no-repeat

初期値のままだと、形は真ん中（50%）に、はみ出さない大きさ（contain）で、1つだけ置かれます。

補足

--maskImg には初期値がありません。かならず自分で指定します。

しくみ#

css
.has--mask {
  --maskPos: 50%;
  --maskSize: contain;
  --maskRepeat: no-repeat;
  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
}

React・Astro で書く場合#

hasMask を付け、--maskImg は style で渡します。

jsx
<Frame hasMask ar="og" style={{ '--maskImg': `url('data:image/svg+xml,...')` }}>
  <img src="..." alt="" />
</Frame>

関連するページ#

公式ドキュメント

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

ページの一覧