Lism Tips

カード

l--withSide や l--frame、is--boxLink などを組み合わせて、画像と文章をまとめたカードを作る例を、形ごとに紹介します。

カードは、画像・見出し・短い文章・「続きを読む」をひとまとめにした箱です。記事の一覧などでよく使います。Lism では、新しい CSS を書かずに、クラスの組み合わせだけでいろいろな形のカードが作れます。

どんなときに使う？#

  • 記事や商品の一覧を、画像付きで並べたいとき
  • 広い場所では横並び、せまい場所では縦並びにしたいとき
  • カードのどこを押しても、同じページへ飛ばしたいとき

幅に合わせて縦・横が切り替わるカード#

l--withSide で、画像（横の部分）と文章（メインの部分）を並べます。置き場所がせまくなると、自動で縦並びになります。<a> に is--boxLink を付けて、カード全体をリンクにしています。

表示例

カードの見出し

ここにカードの説明の文が入ります。2〜3行くらいの短い文にします。

続きを読む →
html
<a class="l--withSide is--boxLink has--transition -hov:-bxsh -bgc:base -bdrs:20 -bxsh:10 -ov:hidden" style="--sideW: 50%" href="#">
  <div class="l--frame is--side -ar:16/9">
    <img src="/img/sample-landscape.svg" alt="" width="960" height="540" />
  </div>
  <div class="l--stack -g:30 -p:30">
    <h3 class="u--trim -fz:l">カードの見出し</h3>
    <p class="u--trim -fz:s -hl:s -o:p">ここにカードの説明の文が入ります。2〜3行くらいの短い文にします。</p>
    <span class="-d:inline-flex -ms:auto -mbs:auto -c:inherit -bd-b -hl:s -p:10">続きを読む →</span>
  </div>
</a>
  • 画像の幅は、l--withSide の変数 --sideW に 50% を入れて決めています
  • -hov:-bxsh で、マウスを乗せると影が濃くなります（-bxsh は box-shadow の略）
  • -ov:hidden（overflow: hidden）で、角の丸みからはみ出た画像を切り取ります
  • 「続きを読む」は -ms:auto -mbs:auto で、右下へ寄せています

カードの中に別のリンクを入れる#

<a> の中に <a> は入れられません。カード全体をリンクにしながら、中に別のリンク（たとえば分類のラベル）も置きたいときは、is--boxLink を外の <div> に付け、見出しのリンクに is--coverLink を付けます。見出しのリンクが、カード全体を覆うように広がります。

表示例

分類

カードの見出し

見出しを押しても、カードの空いたところを押しても、同じページへ飛びます。

html
<div class="l--withSide is--boxLink has--transition -hov:-bxsh -bgc:base -bdrs:20 -bxsh:10 -ov:hidden" style="--sideW: 50%">
  <div class="l--frame is--side -ar:16/9 -pos:relative">
    <img src="/img/sample-landscape.svg" alt="" width="960" height="540" />
    <a class="-pos:absolute -t:0 -r:0 -fz:s -bgc -c -m:20 -px:15 -bdrs:99 -td:none -hov:-bgc" style="--bgc: var(--black); --c: var(--white)" href="#">分類</a>
  </div>
  <div class="l--stack -g:30 -p:30">
    <h3 class="u--trim -fz:l"><a class="is--coverLink" href="#">カードの見出し</a></h3>
    <p class="u--trim -fz:s -hl:s -o:p">見出しを押しても、カードの空いたところを押しても、同じページへ飛びます。</p>
  </div>
</div>

画像の上に文字をのせるカード#

l--frame に縦長の比率（3/4）を付け、画像の上に is--layer の箱を2枚重ねます。1枚めは画像を少し暗くする黒い膜、2枚めは文字を入れる箱です。

表示例

カードの見出し

短い説明の文です。

リンク
html
<div class="l--frame -pos:relative -ar -bdrs:30 -bxsh:30 -max-w" style="--ar: 3/4; --max-w: 16em">
  <img src="/img/sample-portrait.svg" alt="" width="600" height="800" />
  <div class="is--layer -bgc" style="--bgc: rgb(0 0 0 / 60%)"></div>
  <div class="l--stack is--layer -c -p:30 -g:30" style="--c: var(--white)">
    <h3 class="u--trim -fz:l -mbs:auto">カードの見出し</h3>
    <p class="u--trim -fz:s -hl:s -o:mp">短い説明の文です。</p>
    <a class="l--center -c -bgc -td:none -hl:s -p:15 -bdrs:99 -hov:-bgc" style="--c: var(--black); --bgc: var(--white)" href="#">リンク</a>
  </div>
</div>

見出しの -mbs:auto（上の外側の余白を自動にする）で、文字のかたまりを下へ押し下げています。

内側の角丸をそろえる（set--bdrsInner）#

カードの内側に、さらに角の丸い画像やボタンを置くと、外と内の丸みがずれて見えることがあります。外の箱に set--bdrsInner を付け、内側の要素に -bdrs:inner を付けると、外の丸みと余白から内側の丸みが計算され、きれいにそろいます。

内側の丸みは「外の丸み − 外の余白 + 1px」で計算されます。外の丸みが余白より小さいと計算がマイナスになり、丸みが付きません（たとえば -bdrs:30（約 10px）と -p:15（約 12px）の組み合わせ）。この表示例では、公式の例と同じ -bdrs:40（約 16px）と -p:15 にしています。

表示例

カードの見出し

画像とボタンの角の丸みが、外の箱とそろいます。

続きを読む →
html
<div class="l--stack set--bdrsInner -p:15 -g:20 -c:text -bgc:base -bdrs:40 -bxsh:30 -mx:auto -max-w" style="--max-w: var(--sz--xs)">
  <div class="l--frame is--side -ar:16/9">
    <img class="-bdrs:inner" src="/img/sample-landscape.svg" alt="" width="960" height="540" />
  </div>
  <div class="l--stack -g:30 -p:15">
    <h3 class="u--trim -fz:l">カードの見出し</h3>
    <p class="u--trim -fz:s -hl:s -o:p">画像とボタンの角の丸みが、外の箱とそろいます。</p>
    <a class="-bdrs:inner -d:inline-flex -ms:auto -c:base -bgc:text -td:none -hl:s -py:15 -px:20 -jc:center -hov:-bgc" href="#">続きを読む →</a>
  </div>
</div>

画像の比率を決めて、文章の高さに合わせる#

l--flex で、正方形の画像と文章を横に並べます。画像の幅は、スマートフォンでは 25%、広い画面では 30% に切り替えています（-w と -w_sm）。-fxsh:0（flex-shrink: 0）で、画像が押しつぶされないようにします。-aslf:start（align-self: start）は、文章が長くて行が高くなったときに、画像の枠が縦に引き伸ばされない（正方形のまま）ようにする指定です。

表示例

カードの見出し

文章が長くなっても、画像は正方形のままです。
html
<a class="l--flex is--boxLink set--hov has--transition -p:15 -c:text -bgc:base -bd -bdrs:20 -hov:-bxsh" style="--bdw: 2px; --bdc: var(--base-2)" href="#">
  <div class="l--frame -w -w_sm -ar:1/1 -fxsh:0 -aslf:start -bdrs:10" style="--w: 25%; --w_sm: 30%">
    <img src="/img/sample-square.svg" alt="" width="600" height="600" />
  </div>
  <div class="l--stack -fxg:1 -g:30 -p:30">
    <h3 class="u--trim -fz:l">カードの見出し</h3>
    <p class="u--trim -fz:s -hl:s -o:p">文章が長くなっても、画像は正方形のままです。</p>
  </div>
</a>

set--hov を付けた箱の中では、CSS 変数 --_isHov・--_notHov を使って、「マウスが乗っているときだけの値」を書けます。たとえば「続きを読む」の文字色を、マウスを乗せたときだけリンクの色にするなら、React では次のように書きます。

jsx
<Inline c="var(--_isHov, var(--link)) var(--_notHov, inherit)">続きを読む →</Inline>

横並びと縦並びを、画面の幅で切り替える#

l--grid の grid-template（-gt）を幅ごとに変えると、スマートフォンでは画像が上、広い画面では画像が左になります。React・Astro では次のように書きます。

jsx
<BoxLink
  href="#_"
  layout="grid"
  gt={[`'img' '.'`, `'img .' / 200px 1fr`]}
  ai="center" g="15" p="15" bgc="base" bdrs="20" bxsh="10"
  hov="-bxsh" set="hov" hasTransition
>
  <Frame ga="img" aslf="stretch" ar={['og', '1/1']} max-w="100%" pos="relative" bdrs="20">
    <Media css={{ scale: 'var(--_isHov, 1.25)' }} hasTransition src="/img/sample-landscape.svg" alt="" />
  </Frame>
  <Stack g="20" p="15">
    <h3 className="-fz:l">カードの見出し</h3>
  </Stack>
</BoxLink>

画像の比率も ar={['og', '1/1']} で切り替えています。og は 1.91/1 の横長の比率です（Lism の変数 --ar--og）。画像の scale に var(--_isHov, 1.25) を入れているので、マウスを乗せると画像が拡大します。

マウスを乗せると文章が出てくるカード#

マウスを乗せたときに、隠れていた文章が下からすっと出てくるカードも作れます。ただし、この動きの -hov:in:slide は Lism に入っていないクラスです。次の CSS を自分で足します。

css
.-hov\:in\:slide {
  opacity: var(--_notHov, 0);
  grid-template-rows: var(--_isHov, 1fr) var(--_notHov, 0fr);
  transition-property: margin-block, padding-block, opacity, grid-template-rows;
}

グリッドの行の高さを 0fr（高さ0）から 1fr（中身の高さ）へ変え、同時に透明から見える状態へ変えることで、文章が出てくるように見せています。

jsx
<BoxLink href="#card-a" pos="relative" bdrs="20" bxsh="20" ov="hidden" set="hov" max-w="xs" mx="auto">
  <Frame ar="1/1"><img src="/img/sample-square.svg" alt="" /></Frame>
  <Stack pos="absolute" b="0" w="100%" p="30" bgc="rgb(255 255 255 / 20%)">
    <h3 className="u--trim -fz:l">カードの見出し</h3>
    <Grid hasTransition hov="in:slide" my="15">
      <Box ov="hidden"><p class="-py:5 -fz:s -hl:xs">出てくる文章</p></Box>
    </Grid>
  </Stack>
</BoxLink>

React・Astro で書く場合#

いちばん上のカードは、コンポーネントでは次のように書きます。as="a" で <a> として出し、isBoxLink でカード全体をリンクにします。

jsx
<WithSide as="a" isBoxLink href="###" hov="-bxsh" hasTransition sideW="50%" bgc="base" bdrs="20" bxsh="10" ov="hidden">
  <Frame isSide ar="16/9">
    <Media src="/img/sample-landscape.svg" alt="" width="960" height="540" />
  </Frame>
  <Stack g="30" p="30">
    <h3 className="u--trim -fz:l">カードの見出し</h3>
    <Text util="trim" fz="s" hl="s" o="p">説明の文</Text>
  </Stack>
</WithSide>

カードの中に別のリンクを置く形では、見出しのリンクを <Link isCoverLink href="…"> にします。

関連するページ#

公式ドキュメント

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

ページの一覧