a--spacer（すきまを空ける）

a--spacer は、要素と要素のあいだに、すきまを空けるためのクラスです。何も入っていない div に付けて、高さや幅を決めると、そのぶんだけ空きができます。

どんなときに使う？#

• ある場所だけ、ほかより大きなすきまを空けたいとき
• 横に並べた箱のあいだに、1か所だけ広い空きを入れたいとき

すきまは見た目だけのものなので、aria-hidden="true"（読み上げソフトに読ませない印）を付けておきます。並んだ要素の間を全部そろえて空けたいなら、親に -g（gap）を付けるほうが手軽です。

使い方#

空けたい場所に a--spacer を付けた空の div を置き、高さを -h と --h で決めます。-h は height（高さ）の略です。

<p>上の文章</p>
<div class="a--spacer -h" style="--h: 60px" aria-hidden="true"></div>
<p>下の文章</p>

余白のトークンを使う#

--h には、決まった余白の値（余白のトークン）も入れられます。var(--s60) のように書きます。

<p>上の文章</p>
<div class="a--spacer -h" style="--h: var(--s60)" aria-hidden="true"></div>
<p>下の文章</p>

横にすきまを空ける#

横に並んだ中に置き、幅を -w（width）で決めると、横のすきまになります。

<div class="l--flex -g:10">
  <div class="l--box -p:20 -bd">A</div>
  <div class="a--spacer -w" style="--w: var(--s40)" aria-hidden="true"></div>
  <div class="l--box -p:20 -bd">B</div>
  <div class="l--box -p:20 -bd">C</div>
</div>

A と B のあいだだけ、ほかより広く空きます。

a--spacer のしくみ#

a--spacer が付ける CSS は次のとおりです。高さと幅に、最小で 1px を持たせているだけです。大きさは -h・-w で決めます。

.a--spacer {
  min-height: 1px;
  min-width: 1px;
}

React・Astro で書く場合#

コンポーネントでは <Spacer> を使います。<Lism atomic="spacer" aria-hidden="true" /> を短く書けるようにしたもので、出てくる HTML は div.a--spacer[aria-hidden="true"] です。

import { Spacer } from 'lism-css/react';

<Spacer h="100px" />
<Spacer h="60" />
<Spacer w="40" />

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

関連するページ#

• 余白（padding・margin・gap）：すきまの付け方の基本
• a--divider（区切り線）：線で区切る
• デザイントークン（余白・角丸・影など）：--s60 などの値