text-boxとsibling-count()がBaselineに──見出し揃えとスタッガーをCSSだけで解決

2026年8月、Firefox 154の対応によって、`text-box`と`sibling-count()` / `sibling-index()`がBaseline Newly availableになりました。地味な機能に見えますが、見出しの垂直揃え、アイコンとテキストのベースライン、カードのスタッガーアニメーション、要素数に応じたレイアウトなど、毎日触る部分のハックを減らせます。

この記事では、2つの機能を「明日から使えるCSSの道具」として整理します。どちらもChrome・Firefox・Safariの最新版で使えるため、`@supports`なしで導入できる場面が多いのも特徴です。

30秒でわかる結論

`text-box`は、フォントの上下の余白（リーディング）をトリムし、見出しやアイコンの垂直位置を揃える。
`sibling-count()`は兄弟要素の総数、`sibling-index()`は1始まりの位置を返す。
2026年8月にBaseline Newly available。Chrome・Firefox・Safariの最新版で利用可能。
見出しのネガティブマージン、アイコンの`vertical-align`調整、JS製のスタッガー遅延を減らせる。
今すぐ使う。特にデザインシステムのタイポグラフィとカードアニメーションに向く。

何が起きたのか：Baseline入り

Firefox 154が`text-box-trim`、`text-box-edge`、`text-box`の各プロパティと、`sibling-count()` / `sibling-index()`を実装しました。これにより、Chrome 133 / Firefox 154 / Safari 18.2の`text-box`、Chrome 138 / Firefox 154 / Safari 26.2のsibling関数が、Baseline Newly availableになりました。

Baseline Newly availableは「主要ブラウザの最新版で揃った」状態です。古いバージョンを含む全環境で使えるわけではありませんが、新規プロジェクトやモダンブラウザ対象のサイトでは、積極的に採用できる目安になります。

`text-box`：フォントの余白をトリムする

フォントには、グリフの上下に余白（リーディング、ハーフリーディング）が含まれます。この余白のせいで、見出しの上に不自然な空間ができたり、アイコンとテキストのベースラインが合わなかったりします。これまでは`line-height`を小さくしたり、ネガティブマージンを入れたりして調整していました。

`text-box`は、テキストのブロック方向の端をフォントメトリクスに合わせてトリムします。`text-box-trim`で上端・下端のどちらをトリムするか、`text-box-edge`でどのメトリクスに合わせるかを指定します。

CSS

h2 {
  text-box: trim-both cap alphabetic;
}

.icon-label {
  text-box: trim-both ex alphabetic;
}

`cap alphabetic`は、大文字の高さとアルファベットのベースラインに合わせる指定です。見出しのように大文字が中心のテキストに向きます。アイコン付きテキストなら`ex alphabetic`で、小文字のxハイトに合わせると揃えやすいです。

`text-box`はフォント依存です。Noto Sans JPとJetBrains Monoではメトリクスが違うため、フォントを変えたら見た目を再確認してください。`trim-both`は上下両方、`trim-start`/`trim-end`は片側だけをトリムします。

`sibling-count()` / `sibling-index()`：要素数と位置をCSSで取る

`sibling-count()`は、同じ親を持つ兄弟要素の総数を返します。`sibling-index()`は、その要素が何番目かを1始まりで返します。どちらも整数を返すため、`calc()`の中で幅・遅延・色の計算に使えます。

CSS

.card {
  /* 1枚目は0ms、2枚目は80ms、3枚目は160ms… */
  animation-delay: calc((sibling-index() - 1) * 80ms);
}

.card {
  /* 兄弟の数で幅を分割する（gapなしの単純な例） */
  width: calc(100% / sibling-count());
}

これまでスタッガーアニメーションは、JSで`index`を渡すか、`nth-child(1)`〜`nth-child(n)`を大量に書くか、CSS変数をインラインで設定するのが定番でした。sibling関数なら、要素を追加・削除しても自動で番号が振り直されます。

`sibling-index()`は0始まり？→ 1始まりです。最初の要素は1、2番目は2になります。遅延計算で0msから始めたい場合は、`calc((sibling-index() - 1) * 80ms)`のように1を引きます。

組み合わせ例：カードグリッドのスタッガー

カードの枚数に応じた幅と、順番に応じた遅延を、CSSだけで表現できます。

CSS

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  opacity: 0;
  transform: translateY(8px);
  animation: card-in 400ms ease-out forwards;
  animation-delay: calc((sibling-index() - 1) * 60ms);
}

@keyframes card-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}