チュートリアル⑤カウンタと柱のスタイル

このチュートリアルの目標

• カウンタの設定方法がわかる
• カウンタの参照方法がわかる
• ノンブルの設定方法がわかる
• 柱の設定方法がわかる

カウンタの設定

CSS カウンタとは、CSS 内で使えるカウンタ変数のことです。CSS カウンタを使うことで、見出し番号やページ番号を自動的に振ることができます。参照：CSS カウンターの使用（MDN Web Docs）

counter-reset プロパティでカウンタの値を初期化し、counter-increment プロパティでカウンタの値を増加させます。カウンタの値を参照するときは、content プロパティで counter() 関数や counters() 関数を使います。

見出し番号

h1 に対して章番号 (chapter) と節番号 (section) を振る場合は、以下のようにします。

@page :first { /* 全原稿ファイルの中で1枚目のページ */
  counter-reset: chapter;
}

@page :nth(1) { /* 各原稿ファイルの中で1枚目のページ */
  counter-increment: chapter;
}

body { /* 各原稿ファイル */
  counter-reset: section;
}

h1 {
  counter-increment: section;
}

h1::before {
  content: '§' counter(chapter) '.' counter(section) ' ';
}

ページ番号

Vivliostyle はページ番号を管理するカウンタを独自に持っているため、カウンタを新しく用意しなくてもページ番号を取得することができます。カウンタの名前は page です。

target-counter() 関数を使うと、リンク先のページ番号を自動的に取得できます。

a.page-ref::after {
  content: target-counter(attr(href), page) 'ページ';
}

Markdown 内では、次のように記述します。

詳細は<a href="#section-id" class="page-ref"></a>を参照してください。

カウンタの参照

target-counter() 関数を使うと、ページ内の別の場所にあるカウンタの値を参照できます。たとえば本文中に図への参照リンクを置き、そのリンク先の図番号を自動的に表示することができます。

a.fig-ref::after {
  content: '図' target-counter(attr(href), figure) '.';
}

Markdown 内では、次のように記述します。

詳細は<a href="#fig-caption" class="fig-ref"></a>を参照してください。

ページ番号の参照についても同様に target-counter() を使えます。チュートリアル⑦では、target-counter() を使って目次の各項目にリンク先のページ番号を自動挿入する方法を紹介しています。

ページマージンボックス

ページマージンボックスはページのヘッダーやフッターに使用できる領域で、CSS Paged Media で定義されています。ページマージンボックスは全部で16種類あります。@page ルールと合わせて使用します。

ノンブルのスタイル

ノンブルとは、ページの下部や端に配置されたページ番号のことです。

ノンブルはページマージンボックスを使って記述します。次のように記述すると、全ページの下中央にページ番号が表示されます。

@page {
  @bottom-center {
    content: counter(page);
  }
}

柱のスタイル

柱とは、ページの上部や側部に配置されたテキストのことです。一般に、本のタイトルや章の名前が書かれています。

柱もノンブルと同様に、ページマージンボックスを使って記述します。次のように記述すると、左ページの左上に章タイトルが表示されます。

@page :left {
  @top-left {
    content: env(doc-title);
  }
}

Vivliostyle は env(pub-title) と env(doc-title) という特別な変数を持っています。これらを使うことで、本のタイトルや章のタイトルを出力することができます。複数の原稿ファイルから PDF を作る場合、env(pub-title) は本のタイトル、env(doc-title) は各原稿ファイルのタイトルです。

このほかに、Named strings や Running elements を使って柱を設定する方法もあります。

Named strings は string-set プロパティで要素の内容を文字列として取り込み、string() 関数でページマージンボックスに表示します。

h1 {
  string-set: chapter-title content(text);
}

@page :left {
  @top-left {
    content: string(chapter-title);
  }
}

Running elements は position: running(name) で要素をページフローから外し、element(name) でページマージンボックスに表示します。HTML 要素のスタイルや構造をそのまま柱として使えます。

.running-title {
  position: running(chapter-header);
}

@page :right {
  @top-right {
    content: element(chapter-header);
  }
}

参照：CSS Generated Content for Paged Media（W3C）

まとめ

このチュートリアルでは、カウンタと柱の設定を行いました。以上のスタイルを記述した theme.css は以下のボタンからダウンロードできます。

1. theme.css

次のチュートリアルでは、CSS を編集して基本的な要素のスタイルを設定します。

• 前：チュートリアル④用紙と文字のスタイル
• 次：チュートリアル⑥基本的な要素のスタイル
• チュートリアル一覧