Lism Tips

is--boxLink（箱ごとリンクにする）

is--boxLink は、カードのような箱全体をクリックできるリンクにするクラスです。中に別のリンクを置くときは is--coverLink を使います。

is--boxLink は、箱全体をクリックできるリンクにするクラスです。カードのどこを押しても記事へ移れる、といった作りに使います。中に別のリンクも置きたいときは、is--coverLink と組み合わせます。

どんなときに使う？#

  • 記事の一覧のカードを、文字だけでなく箱ごと押せるようにしたいとき
  • 箱ごと押せるうえに、中に別のリンク（タグやカテゴリーなど）も置きたいとき（is--coverLink を使う）

使いかたは2通り#

作り方 向いているとき
1. is--boxLink を <a> に付ける 箱の中にリンクが1つだけのとき
2. is--boxLink を <div> に付け、中のリンクに is--coverLink を付ける 箱の中に別のリンクも置きたいとき
補足

HTML では、<a> の中に別の <a> を入れられません。箱の中に別のリンクを置くなら、2の作り方にします。

1. a タグを箱にする#

<a> に is--boxLink を付けると、その <a> が箱になり、中身全体がリンクになります。文字の色はまわりと同じになり、下線も消えます。

表示例

見出し

箱のどこを押しても、同じリンク先へ移ります。

MORE →
html
<a class="is--boxLink -hov:-o -p:30 -bgc:base -bd -bdrs:30" href="#">
  <div class="-fz:xl -fw:bold">見出し</div>
  <p class="-hl:s -mbs:15">箱のどこを押しても、同じリンク先へ移ります。</p>
  <div class="-fz:s -c:text-2 -ta:right -hl:0 -mbs:10">MORE →</div>
</a>

2. 中のリンクを箱いっぱいに広げる（is--coverLink）#

箱を <div> にして is--boxLink を付け、中心になるリンクに is--coverLink を付けます。is--coverLink の押せる範囲が、箱全体に広がります。箱の中のほかのリンクは、その上に出るので、別々に押せます。

表示例

見出しのリンク

文章のところを押しても、見出しのリンク先へ移ります。

別のリンク
html
<div class="is--boxLink has--transition -p:30 -bgc:base -bd -bdrs:30 -hov:-bxsh">
  <div class="-fz:xl -fw:bold">
    <a class="is--coverLink" href="#">見出しのリンク</a>
  </div>
  <p class="-c:text-2 -hl:s -mbs:15">文章のところを押しても、見出しのリンク先へ移ります。</p>
  <div class="-mbs:10">
    <a href="#" class="-hov:-o">別のリンク</a>
  </div>
</div>

しくみ#

is--boxLink が付ける CSS です。

css
.is--boxLink {
  position: relative;
  display: block;
  color: inherit;
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
}
.is--boxLink :where(a:not(.is--coverLink)) {
  position: relative;
  z-index: 2;
}
  • position: relative：中の is--coverLink が広がるときの基準になります
  • isolation: isolate：箱の中の重なりの順番（z-index）を、箱の外と混ぜないようにします
  • is--coverLink 以外の中のリンクは z-index: 2 になり、広がった is--coverLink より手前に出ます

is--coverLink が付ける CSS です。

css
.is--coverLink {
  color: inherit;
  position: static;
  text-decoration: none;
}
.is--coverLink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

リンクの前に見えない箱（::before）を作り、それを is--boxLink の箱いっぱいに広げています。押せる範囲が広がるのは、この見えない箱のおかげです。

Tab キーで選んだときの枠を箱全体に出す#

is--coverLink を使うと、Tab キーでリンクを選んだときの枠（アウトライン）は、リンクの文字のまわりにだけ出ます。箱全体に枠を出したいときは、次の CSS を自分で足します（Lism には入っていません）。

css
@supports selector(:has(*)) {
  .is--boxLink:has(.is--coverLink:focus-visible) {
    outline: auto 1px;
    outline: auto 1px -webkit-focus-ring-color;
  }
  .is--coverLink:focus {
    outline: 0;
  }
}

React・Astro で書く場合#

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

Props すること
isBoxLink is--boxLink を付ける
href <BoxLink> 専用。付けると <a> で、付けないと <div> で出力される
jsx
import { BoxLink, Link, Text } from 'lism-css/react';

// 1. BoxLink 自体をリンクにする
<BoxLink href="#" p="30" bd bdrs="30" hov="-o">
  <Text>箱全体がリンクです。</Text>
</BoxLink>

// 2. 中のリンクに isCoverLink を付ける
<BoxLink p="30" bd bdrs="30" hasTransition hov="-bxsh">
  <Link isCoverLink href="#">見出しのリンク</Link>
  <a href="#">別のリンク</a>
</BoxLink>

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

関連するページ#

公式ドキュメント

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

ページの一覧