Lism Tips

l--frame（画像や動画の枠）

l--frame は、中の画像・動画・iframe を枠の大きさいっぱいに広げて表示するクラスです。縦横の比率は -ar で決めます。

l--frame は、中の画像・動画・iframe（ほかのページの埋め込み）を、枠の大きさいっぱいに広げるクラスです。枠からはみ出したところは切り取られます。縦横の比率を決めて、写真の大きさをそろえるときに使います。

どんなときに使う？#

  • 大きさのばらばらな写真を、同じ縦横の比率でそろえたいとき
  • YouTube などの埋め込みを、16:9 の枠に収めたいとき
  • 画像の上に文字や半透明の色を重ねたいとき

使い方#

img などを l--frame の箱で囲み、-ar:16/9 のように縦横の比率を決めます。-ar は aspect-ratio（縦横の比率）の略です。

表示例

html
<div class="l--frame -ar:16/9">
  <img src="/img/sample-portrait.svg" alt="">
</div>

縦長の画像でも、16:9 の枠いっぱいに広がり、はみ出した上下は切り取られます。

l--frame が広げるのは、すぐ下にある img・video・iframe だけです。

figure と figcaption を使う#

写真に説明文（キャプション）を付けるときは、figure に l--frame を付け、figcaption を下に重ねます。

表示例

説明文
html
<figure class="l--frame -ar:16/9 -pos:relative">
  <img src="/img/sample-landscape.svg" alt="">
  <figcaption class="l--flex -pos:absolute -z:1 -b:0 -w:100% -jc:center -p:10 -c -bgc" style="--c: var(--white); --bgc: rgb(0 0 0 / 40%)">説明文</figcaption>
</figure>

動画と埋め込みを入れる#

video や iframe も、同じように囲むだけです。

html
<div class="l--frame -ar:16/9">
  <video controls>
    <source src="/video/video-1.mp4" type="video/mp4" />
  </video>
</div>

<div class="l--frame -ar:16/9">
  <iframe src="https://www.youtube.com/embed/…" title="YouTube video player" allowfullscreen></iframe>
</div>

上に色や文字を重ねる#

is--layer（上に重ねる） を使うと、画像の上に半透明の色の層や、文字の層を重ねられます。

表示例

見出し

画像の上に重ねた文章です。

html
<div class="l--frame -ar:3/2 -pos:relative -c" style="--c: var(--white)">
  <img src="/img/sample-landscape.svg" alt="">
  <div class="is--layer -bgc" style="--bgc: rgb(0 0 0 / 60%)"></div>
  <div class="is--layer -p:20 -ov:auto">
    <div class="l--center -min-h:100% -g:10">
      <p class="-fz:xl">見出し</p>
      <p>画像の上に重ねた文章です。</p>
    </div>
  </div>
</div>

後ろの画像をぼかしたいときは、色の層に backdrop-filter: blur(4px) を足します。ぼかし（backdrop-filter）は Property Class に無いので、使うときは CSS を自分で足します。

l--frame のしくみ#

l--frame が付ける CSS は次のとおりです。中のメディアを幅・高さとも 100% にし、object-fit: cover（比率を保ったまま枠をうめ、余りを切る）で表示します。

scss
.l--frame {
  overflow: hidden;

  > :where(img, video, iframe) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

React・Astro で書く場合#

コンポーネントでは <Frame> を使います。as="figure" で、出すタグを変えられます。

jsx
import { Frame } from 'lism-css/react';

<Frame ar="16/9">
  <img src="..." alt="" width="960" height="640" />
</Frame>

Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

公式ドキュメント

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

ページの一覧