CSS Nestingガイド

対象バージョン: Vivliostyle.js v2.42（2026-04-25） Vivliostyle CLI v10.6はViewer 2.42を同梱しているため、追加設定なしに利用できます。

公開日: 2026-05-14 最終更新日: 2026-05-14

CSS Nesting Moduleは、CSSのルールを入れ子にして記述するしくみです。従来のCSSでは .chapter { ... } .chapter h2 { ... } のように親セレクタを繰り返し書く必要がありましたが、ネスト記法では .chapter { } の中に子ルールをまとめて書けます。

.chapter {
  font-family: 'Source Serif Pro', serif;

  & h2 {
    font-size: 1.4em;
    border-bottom: 1px solid currentColor;
  }

  & p:first-of-type::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 0.1em;
  }
}

これは展開すると以下と等価です。

.chapter { font-family: 'Source Serif Pro', serif; }
.chapter h2 { font-size: 1.4em; border-bottom: 1px solid currentColor; }
.chapter p:first-of-type::first-letter { font-size: 3em; float: left; margin-right: 0.1em; }

子ルール先頭の & は省略できます（h2 { ... } と書いても同じ意味です）。本ガイドでは、ネストであることを明示するため & を付けています。

組版での使いどころ

1.疑似要素のネスト（Vivliostyle固有の組版疑似要素にも対応）

Vivliostyle.js v2.42のCSS Nestingは、Vivliostyleが組版時に処理するCSS GCPMの疑似要素 ::footnote-call / ::footnote-marker などに対しても動作します。これにより、脚注スタイルを1ブロックにまとめて記述できます。

.footnote {
  float: footnote;

  &::footnote-call {
    content: "注" counter(footnote);
  }

  &::footnote-marker {
    content: "注" counter(footnote) " ";
  }
}

.footnote クラスを脚注として使用しつつ、本文中の呼び出し記号と脚注領域のマーカーを同じスコープで定義できます。

HTMLソース

<p>Vivliostyle.js v2.42 の CSS Nesting は、組版用の疑似要素にも対応しています<span class="footnote">脚注の本体テキストです。</span>。たとえば <code>::footnote-call</code> と <code>::footnote-marker</code> を <code>.footnote</code> のネストとして一緒に書けます<span class="footnote">2 つめの脚注です。</span>。</p>
<p>このページ下部の脚注領域に「注1 ...」「注2 ...」が表示されているはずです。</p>

参考: メイユール（@u1f992）氏の投稿

2.メディアクエリのインライン化

@media print を必要なルールの内側に書けます。プレビュー時にだけ強調する装飾を切り分けやすくなります。

.cover {
  background: var(--cover-bg);

  @media screen {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }

  @media print {
    box-shadow: none;
    break-after: page;
  }
}