gihyo.jpサイトのロゴ

Vivliostyleが拓くCSS組版の可能性

VFMで学会論文を書いてVivliostyleで組んで投稿する［前編］

2025-01-28

CSS（Cascading Style Sheets）で論文を組んで投稿したいと、ずっと以前から思ってきた方はいるでしょう、筆者もその一人です。また、Markdownで論文を書きたいという声もよく耳にします。

Vivliostyle（ビブリオスタイル）はCSS組版を実現するオープンソースのライブラリ／アプリケーション群です。VivliostyleはMarkdownで書いた原稿を入力にできます。MarkdownをVivliostyle用に拡張したものをVFM（Vivliostyle Flavored Markdown）といいます。

では、論文をVFMで書いてCSSで組んで出力したPDFを学会に投稿…できるでしょうか？「あんなレイアウトは、こんな配置はできるのか？⁠」⁠、「⁠CSSでどこまでできるの？」気になりますよね。

この記事では、論文でよく見られるレイアウトをCSSで実現する方法を、2回に分けて解説します。

では、論文全体のサンプルと、個別のレイアウトのサンプルを見てみましょう。サンプルは実際に動かして確かめられます。例えば論文全体のサンプルsample.mdというMarkdownの文章は、Vivliostyle CLIを使って次のようにしてプレビューできます：

$ vivliostyle preview sample.md

また、次のようにしてPDFファイルに出力できます：

$ vivliostyle build sample.md -o sample.pdf

Vivliostyle CLIのインストールの仕方は、このシリーズの前の記事Vivliostyleでなにができるの？に説明があります。

サンプルの設計

サンプルのCSSや文章の構造は、VFMで書きやすいことを優先して設計しました。まず、<p>などのタグは、なるべく書かなくてすむようにしました。次に、文章を構成する要素が、なるべくMarkdownエディターのアウトラインに表示されるようにしました。

また、ほとんどのサンプルでは、プレビューのウィンドウのサイズを広げたり縮めたりすると、それに応じて図表や本文の配置が変わるようになってます。これは、ページのサイズを設定していないからです。ページのサイズの設定とは次のようなものです：

@page {
  size: A4 portrait;
}

各サンプルをプレビューしてみたら、ぜひ、ウィンドウを広げたり縮めたりしてみてください。

では、以下に見ていきましょう。

全体のサンプル

まず論文全体のサンプルを見てみましょう。

  • ある研究会用のCSSファイル: ipsj-tech.css
  • この論文の原稿ファイル（VFM形式）: sample.md
  • この論文の表のための罫線と揃えのCSSファイル: sample-table.css
  • ビルド結果のPDFファイル: sample.pdf

この例では、表table要素のセルの揃えを設定するCSSを別ファイルとしてみました。これについては、後の「表の列の揃え」で説明します。

図1 sampleのビルド結果のPDFの1部

続いて、ポイントを抜粋して見ていきましょう。なお、サイズや向きの異なるページを挿入する例は、全体のサンプルに含めていません。

文章の言語⁠、lang属性

HTMLでは、ある要素の文章の言語（日本語、英語といった自然言語のことで、HTMLやTypeScriptといった言語のことではありません）を、その要素のlang属性で設定します。設定した言語はフォントの選択やハイフネーションを行うかどうかの判断などに使われます。日本語の文章で漢字に日本語のフォントが使われるようにするにはlang='ja'と設定します。英文でハイフネーションが行われるようにするにはlang='en'と設定します。この記事のサンプルは、どれも全体としては日本語なのでhtml要素にlang='ja'と設定しています。前に示した論文全体のサンプルの「Abstract」は英文なのでlang='en'と設定しています。それによって、「⁠internationalization」という単語の途中にハイフンが挿入・改行されて「interna-改行tionalization」となっています。html要素にlang属性を設定するには、VFMのフロントマターでlang: 'ja'と記述します。具体的には、以下に続く例を見てください。

見出し

見出しの組み方に、いくつか工夫が必要になります。

見出しとセクション分け

VFMで論文を書くことを想定してCSSを設計するにあたって把握しておきたいのは、VFMはMarkdownの見出しのレベル（見出し行の先頭の#の数）に応じてsection要素を生成して階層化するということです（セクション分け - Sectionization⁠）⁠。これを上手く使うと、後の「表示しない見出し」で説明するような工夫ができます。

その一方で注意も必要です。# タイトルといった見出しを何かのHTML要素（タグ）で明示的に囲んで—⁠—例えば<header>〜</header>としましょう—⁠—、次のようなMarkdownです：

<header>

# タイトル

</header>

これをVFMは次のようなHTMLに変換します。

<body>
  <header>
    <section class="level1" aria-labelledby="タイトル">
      <h1 id="タイトル">タイトル</h1>
    </section>
  </header>
</body>

「タイトル」は、header要素の中にあるsectionの見出しということになります。# タイトルはh1要素に変換されますが、h1は本来body全体の見出しであるべきで、これは不適切です。

セクション分けを止めるには、見出しの行を最初の#と同数の#で終わらせます。そうするとVFMはsectionを生成しません。

<header>

# タイトル #

</header>

というMarkdownは次のHTMLに変換されます。

<body>
  <header>
    <h1 id="タイトル">タイトル</h1>
    <p>概要 概要 概要 概要 概要 概要 概要 概要 概要 概要</p>
  </header>
</body>

番号を付けない見出し

概要、謝辞、参考文献、付録などの見出しには番号を付けないことがあります。これらは、h2要素といった見出し要素に対するcounterの設定から除外するなどして実現します。次のVFMサンプルでは、counter-incrementの対象を選ぶセレクターをh2:not(.abstract, .acknowledgement)と、not()擬似クラスでabstractクラスとacknowledgementクラスを除外しています。

sample11-1.css
:root {
  counter-reset: section 0;
}
h2:not(.abstract, .acknowledgement) {
  counter-increment: section;
}
h2:not(.abstract, .acknowledgement)::before {
  content: counter(section) "章 ";
}
sample11-1.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample11-1.css'
---

## 概要:{.abstract}

概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要。

## 見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

## 謝辞{.acknowledgement}

ありがとうございました。感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝。
図2 sample11-1のプレビュー

番号は付きませんが、Markdownのエディターは見出しとして扱うので、エディターのアウトラインに表示されます。次の図で、サンプルのVFMをVisual Studio Codeで表示したときのアウトラインを見てください。「⁠概要:」という見出しのテキストだけでなく、{.abstract}といったクラス設定も表示されて文章中での役割も分かります。

図3 sample11-1をVisual Studio Codeで表示したときのアウトライン

「概要:」などは各論文のスタイルに固定なので著者には入力させないという判断もありえます。その場合、概要や謝辞が1つの段落ならば、「⁠概要:」を見出し（h2要素など）とはせずに、概要の段落や謝辞の段落の先頭に「概要:」や「謝辞」を自動生成するという方法もあります。以下の VFM サンプルで <p class="abstract"> などとしている箇所がその例です。

sample11-2.css
:root {
  counter-reset: section 0;
}
h2 {
  counter-increment: section;
}
h2::before {
  content: counter(section) "章 ";
}
p.abstract::before {
  content: "概要: ";
  font-weight: bold;
  font-family: sans-serif;
}
p.acknowledgement::before {
  content: "謝辞 ";
  font-weight: bold;
  font-family: sans-serif;
}
sample11-2.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample11-2.css'
---

<p class="abstract">概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要。</p>

## 見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

<p class="acknowledgement">ありがとうございました。感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝。</p>
図4 sample11-2のプレビュー

ただし、こうすると概要や謝辞がMarkdownエディターのアウトライン・ビューに表示されません。また、タグを付けない段落にクラスを設定できないので、全体はMarkdownではありますが、この部分はタグp付きの段落となります。

見出しをrun-inにする

深いレベルの見出しや謝辞の見出しでは、続く段落の冒頭に入れ込むrun-inのレイアウトを求められることがあります。これは、見出しに続く段落のdisplayプロパティにinlineを設定することで実現できます。見出しに続く段落はh4 + pというセレクターで選べます。

sample10.css
h4 {
  display: inline;
  margin-inline-end: 1rem;
}
h4::before {
  /* h4の前にインライン要素がある場合に問題が起きないように */
  content: "";
  display: block;
  margin-block-start: 1em;
}
h4 + p {
  display: inline;
}
h4 + p::after {
  content: "";
  display: block;
  margin-block-end: 1em;
}
sample10.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample10.css'
---
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

<span>（不具合を確認するためのinline要素。通常は不要。）</span>

#### Run-inの見出し ####

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

#### Run-inの見出し ####

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
図5 sample10のプレビュー

h4要素はinlineに表示されますが、構造上はあくまで見出しです。Markdownエディターのアウトラインや目次に表示されます。文章のツリー構造とレイアウトとを分離する典型例の1つです。

「付　　　録」⁠、letter-spacingプロパティ

「付　　　録」のように、一部の見出しを他の部分よりも大きく文字間隔を空けて表示することがあります。これを、「⁠付」と「録」の間に空白文字を入れて実現してしまうと、Markdownエディターのアウトラインにも「付　　　録」と表示されておかしいですし、ビルドして作ったPDFを「付録」で検索したときにヒットしません。

これはCSSのletter-spacingプロパティを設定することで実現するとよいです。

sample19.css
h2.appendix {
  letter-spacing: 4rem;
}
sample19.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample19.css'
---
## 付録{.appendix}

付録 付録 付録 付録 付録 付録 付録 付録
図6 sample19のプレビュー

Vivliostyleのプレビュー画面（ブラウザ）やビルドで出力したPDFを「付録」で検索してみてください。

付録の章や図表の番号

本文の章番号が「1.、1.1、2.、…」なのに対して、付録は「A.1、A.1.1、A.2、…」などと、異なる体系とする場合があります。その一方で、執筆の途中では、ある見出しやテキストや図表を、本文に置いたり付録に置いたりと変えることがあります。そこで、章番号などの体系は変わっても、テキストそのものは何も変えずに本文と付録の間を移動させられると便利です。つまり、それができるように付録の番号を生成したいところです。

VFMでは## 付録という形式で見出しを書くとセクション（section要素）が生成されます。そこで、「⁠appendixクラスの見出しh2要素を直下に含むsection要素の内側は『付録⁠』⁠」というルールでCSSを作ると、他の見出しや図表には何も設定しなくても「付録」の部分として処理できます。次のVFMのサンプルではsection:has(> h2.appendix)というセレクターが、このルールに該当します。

ただし、付録の中に##レベルの見出しを書くと、「⁠付録」セクションが終わって次のセクションが始まってしまいます。つまり、「⁠付録」セクションの中には##レベルよりも深い見出ししか置けません。それら見出しを1レベル上の見出しに見せるために、CSSでフォント・サイズや番号体系を調整します。

sample21.css
:root {
  counter-reset: section 0 subsection 0 subsubsection 0;
  --section-heading-font-size: 1.4rem;
  --subsection-heading-font-size: 1rem;
}

h2 {
  counter-increment: section;
  counter-reset: subsection 0;
  font-size: var(--section-heading-font-size);
}
h2:not(.appendix)::before {
  content: counter(section) ".";
  margin-inline-end: 1rem;
}
h3, h4 {
  font-size: var(--subsection-heading-font-size);
}
h3 {
  counter-increment: subsection;
  counter-reset: subsubsection 0;
}
h3::before {
  content: counter(section) "." counter(subsection);
  margin-inline-end: 1rem;
}

section:has(> h2.appendix) {
  counter-reset: subsection 0;
}
h2.appendix {
  letter-spacing: 4rem;
}
section:has(> h2.appendix) h3 {
  font-size: var(--section-heading-font-size);
}
section:has(> h2.appendix) h3::before {
  content: "A." counter(subsection);
  margin-inline-end: 1rem;
}
section:has(> h2.appendix) h4 {
  counter-increment: subsubsection;
}
section:has(> h2.appendix) h4::before {
  content: "A." counter(subsection) "." counter(subsubsection);
  margin-inline-end: 1rem;
}
sample21.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample21.css'
---
## 見出し（h2）

本文 本文 本文 本文 本文 本文

### 見出し（h3）

本文 本文 本文 本文 本文 本文

## 付録{.appendix}

付録 付録 付録 付録 付録 付録

### 見出し（実はh3）

付録 付録 付録 付録 付録 付録

#### 見出し（実はh4）

付録 付録 付録 付録 付録 付録
図7 sample21のプレビュー

section要素と表示しない見出し

著者（author）や所属（affiliation）にも見出しがあると、Markdownのアウトラインに表示されて編集しやすいですね。次を考慮して実現してみます。

次のVFMサンプルでは、section:has(> .author)という記述で、「⁠authorクラスの見出しを直下に持つsectionクラス」で囲むという方法を取っています。

sample24.css
h2.author {
  display: none;
}
section:has(> .author) {
  text-align: center;
}
section:has(> .author) > p {
  display: inline;
}
section:has(> .author) > p:not(:first-of-type) {
  margin-inline-start: 1rem;
}

h2:not(.author) {
  counter-increment: section;
}
h2:not(.author)::before {
  content: counter(section) ".";
  margin-inline-end: 1rem;
}
sample24.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample24.css'
---
## 著者{.author}

著者1

著者2

著者3

## はじめに

こんにちは！
図8 sample24のスクリーンショット
図9 sample24のアウトライン

「著者」という見出しはPDFに表示されませんが、Markdownのアウトラインには表示されます。

段組み

もちろん2段組にできます。

1段のタイトルなどと2段組の本文

論文の本文は2段組だけど、先頭のタイトルや著者は1段というフォーマットは多いです。これは、論文全体を2段組にして、タイトルなどを含むブロックにfloatプロパティを設定して実現できます。

sample01.css
:root {
  column-count: 2;
  column-fill: balance;
}
header {
  float: block-start;
  float-reference: page;
}
p {
  margin-break: discard;
}
sample01.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample01.css'
---
<header>

# タイトル タイトル タイトル タイトル #

概要 概要 概要 概要 概要 概要 概要 概要 概要 概要

</header>

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
図10 sample01のプレビュー

CSSの段組仕様ではタイトルを段抜きにするのにcolumn-spanプロパティを使うのが標準的ですが、Vivliostyleではこれが使えない制限があり、ページフロートの機能を使って段抜きにします。上のCSSサンプルでfloat: block-start;とfloat-reference: page;とがその例で、ページpageの上block-startにfloatさせてます。

なお、「⁠見出しとセクション分け」述べたように、# タイトル タイトル タイトル タイトル #行を#で終わらせています。

最初のページの左段の先頭のマージン

前の例では、p要素にmargin-break: discard;を設定して、最初のページの左段の先頭に空白ができるのを防いでいます。

段組みで本文を順に埋める

前の例では本文が2つの段に均等に分割されていました。これを、順に埋めるようにできます。column-fillプロパティにautoを設定します。

sample02.css
:root {
  column-count: 2;
  column-fill: auto;
}
header {
  float: block-start;
  float-reference: page;
  text-align: center;
}
p {
  margin-break: discard;
}
sample02.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample02.css'
---
<header>

# タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル #

概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要

</header>

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
図11 sample02のプレビュー

英文タイトルや所属住所などを左段の下に詰める

英文タイトルや所属や住所などを、2段組の左段の下に詰めて配置し、上に境界線を引くレイアウトをよく見かけます。所属などのブロックのfloatプロパティにblock-endを設定し、float-referenceプロパティにcolumnを設定して実現できます。

sample09.css
:root {
  column-count: 2;
  column-fill: auto;
}
.affiliation {
  float: block-end;
  float-reference: column;
  border-block-start: thin solid currentcolor;
}
sample09.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample09.css'
---
<div class="affiliation">所属 所属 所属</div>

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
図12 sample09のプレビュー

図表

図表の配置やキャプションには様々な要件があります。

図表を上詰め/下詰めにする

CSSページフロート仕様では、図表をページの上端や下端に詰めて表示できます。学会などで投稿用のLaTeXのスタイルでは、図表はページ上端また下端に詰めて出力する設定になっている場合があります。

まずは上詰めから

sample07-1.css
figure {
  float: block-start;
  float-reference: page;
  margin-block-start: 0;
}
.dummy-figure {
  block-size: 25vh;
  inline-size: 95%;
  border: thin solid blue;
  display: grid;
  place-items: center;
}
.dummy-figure::before {
  content: "図の中身";
}
sample07-1.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample07-1.css'
---
図の前の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

<figure id="fig01">
  <div class="dummy-figure"></div>
  <figcaption>キャプション</figcaption>
</figure>

図の後の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
図13 sample07-1のプレビュー

上のCSSサンプルでfigure要素に設定したfloat: block-start;とfloat-reference: page;とで上詰めにしています。上に詰めるので上マージンは不要ですからfigure要素にmargin-block-start: 0;と設定します。

続いて下詰めです。float: block-end;で下詰めになります。

sample07-2.css
figure {
  float: block-end;
  float-reference: page;
  margin-block-end: 0;
}
.dummy-figure {
  block-size: 25vh;
  inline-size: 95%;
  border: thin solid blue;
  display: grid;
  place-items: center;
}
.dummy-figure::before {
  content: "図の中身";
}
sample07-2.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample07-2.css'
---
図の前の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

<figure id="fig01">
  <div class="dummy-figure"></div>
  <figcaption>キャプション</figcaption>
</figure>

図の後の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
図14 sample07-2のプレビュー

ダミーの図

.dummy-figureは、画像などを用意せずに、サイズを変えるなどして図の組まれ方を試すための工夫です。vivliostyle.jsのIssuesで見かけます。高さ（block方向のサイズ）にvhという単位を、幅（inline方向のサイズ）に%を使って、プレビューのウィンドウに対して一定の割合のサイズを保つようにしてます。実際のページ組版では使わない設定です。プレビューのウィンドウを広げたり縮めたりして、図と前後の本文との関係がどのように変わるか試してみてください。

図表を段抜きにする

図表を段抜きで（2段の幅にまたがって）表示するには次のようにします。figure要素にfloat-reference: page;と設定することで、本文が2段組みの段に収まっていても、図はページの上詰めになります、段内の上ではなく。

sample08.md
:root {
  column-count: 2;
  column-fill: auto;
}
figure,
p {
  margin-break: discard;
}
figure {
  float: block-start;
  float-reference: page;
}
.dummy-figure {
  block-size: 25vh;
  inline-size: 95%;
  border: thin solid blue;
  display: grid;
  place-items: center;
}
.dummy-figure::before {
  content: "図の中身";
}
sample08.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample08.css'
---
図の前の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

<figure id="fig01">
  <div class="dummy-figure"></div>
  <figcaption>キャプション</figcaption>
</figure>

図の後の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
図15 sample08のプレビュー

図と本文の順序に注意してください。従来からのfloatプロパティ同様に表示される順番が変わることがあります。

表の列の揃え

表では、列ごとに左右中央の揃えが異なることが多いです。

このとき、LaTeXだと、次の{rlr}のように、個々の表に列の揃えを指定します。

\begin{tabular}{rlr}
  % …
\end{tabular}

HTMLではth要素やtd要素やcol要素などのalign属性は廃止されました（deprecated⁠）⁠。セルの中身の揃えはCSSで実現します。ここではLaTeXチックな書き方をする例をあげます。

sample14.css
table {
  border-collapse: collapse;
}
table thead th,
table thead td {
  border-top: 1px solid;
  border-bottom: 2px double;
}
table tbody tr:last-child th,
table tbody tr:last-child td {
  border-bottom: 1px solid;
}

.lr td:nth-of-type(1) {
  text-align: left;
}
.lr td:nth-of-type(2) {
  text-align: right;
}
sample14.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample14.css'
---

Markdownの表、左揃え、右揃え。

| 品目 | 数量 |
| :--- | ---: |
| パイナップル | 300 |
| ぶどう | 4 |

HTMLの表、左揃え、右揃え。

<table class="lr">
<thead>
  <tr><th>品目</th><th>数量</th></tr>
</thead>
<tbody>
  <tr><td>パイナップル</td><td>300</td></tr>
  <tr><td>ぶどう</td><td>4</td></tr>
</tbody>
</table>
図16 sample14のプレビュー

:nth-of-type()擬似クラスを使って、例えばtd:nth-of-type(2)は行（row）内の2番目のtd、つまり2列目のセルを選んでいます。

一般に表の揃えや罫線の描き方は各表ごとに異なるので、これらの揃えを論文をまたがる共通のCSSファイルで設定するかどうかは考えどころです。「⁠その論文に含まれる表の罫線と揃え」を設定するCSSファイルを別に用意する方法もあります。

表本体よりも幅の広いキャプション

表のキャプションは、見出しのような短いフレーズのこともあれば、表の長い説明のこともあります。caption要素の幅は、tbody要素など本体の幅より広くなりません。キャプションを広く取りたいときは、table要素をfigure要素に入れて、figcaption要素にキャプションを書きます。これは表本体をMarkdownで書いていても使えます。

sample15.md
table, th, td {
  border: thin solid;
}
sample15.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample15.css'
---
<table>
<caption>長いキャプション 長い長いキャプション 長い長い長いキャプション</caption>
<tbody>
  <tr><td>パイン</td><td>300</td></tr>
  <tr><td>ぶどう</td><td>4</td></tr>
</tbody>
</table>

<figure>
<figcaption>長いキャプション 長い長いキャプション 長い長い長いキャプション</figcaption>
<table>
<tbody>
  <tr><td>パイン</td><td>300</td></tr>
  <tr><td>ぶどう</td><td>4</td></tr>
</tbody>
</table>
</figure>

<figure>
<figcaption>Markdownの表の長いキャプション 長い長いキャプション 長い長い長いキャプション</figcaption>

| 品目 | 数量 |
| :--- | ---: |
| パイナップル | 300 |
| ぶどう | 4 |

</figure>
図17 sample15のプレビュー

長い表

2段組の段やページからあふれるような長い表を、途中で区切って続きを次の段やページに表示させられます。このとき、表の列見出しが続きの表にも表示されます。

sample20.css
:root {
  column-count: 2;
  column-fill: auto;
}
figure.table {
  float: block-start;
  float-reference: column;
  margin-block-start: 0;
  margin-block-end: 1rem;
  margin-inline: 0;
}
figure.table figcaption {
  margin-block-start: 0;
  margin-block-end: 1rem;
}
table {
  border-collapse: collapse;
}
table thead th,
table thead td {
  border-top: 1px solid;
  border-bottom: 2px double;
}
table tbody tr:last-child th,
table tbody tr:last-child td {
    border-bottom: 1px solid;
}
sample20.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample20.css'
---
<figure class="table" id="short-table">
  <figcaption><div lang="ja">短いMarkdownの表</div><div lang="en">Short markdown table</div></figcaption>

| ラベル | ラベル | ラベル | ラベル |
| :-- | :-- | --: | --: |
| セル | セル | 1 | 100,000 |
| セル | セル | 2 | 10,000 |
| セル | セル | 3 | 1,000 |
| セル | セル | 4 | 100 |
| セル | セル | 10 | 10 |

</figure>

<figure class="table" id="long-table" style="float: none;">
  <figcaption><div lang="ja">長いMarkdownの表。</div><div lang="en">Long markdown table</div></figcaption>

| ラベル | ラベル | ラベル | ラベル |
| :-- | :-- | --: | --: |
| セル | セル | 1 | 100,000 |
| セル | セル | 2 | 10,000 |
| セル | セル | 3 | 1,000 |
| セル | セル | 4 | 100 |
| セル | セル | 10 | 10 |
| セル | セル | 100 | 4 |
| セル | セル | 1000 | 3 |
| セル | セル | 10,000 | 2 |
| セル | セル | 100,000 | 1 |

<!-- 省略 -->

| セル | セル | 1 | 100,000 |
| セル | セル | 2 | 10,000 |
| セル | セル | 3 | 1,000 |
| セル | セル | 4 | 100 |
| セル | セル | 10 | 10 |
| セル | セル | 100 | 4 |
| セル | セル | 1000 | 3 |
| セル | セル | 10,000 | 2 |
| セル | セル | 100,000 | 1 |

</figure>
図18 sample20のプレビュー

列見出しは次の段やページにも表示されますが、最後の行の下の罫線は分割された最後の部分の最後の行にしか引かれません。

他の表は上詰めになっていますが、長い表の上詰めは外してあります。それ用のクラスを用意する方法もありますが、ここでは、style属性を設定することで個別にスタイルを変えています。{.table #long-table}といった記法を使っているところでは、{.table #long-table style="float: none;"}という書き方でスタイルを設定することもできます。

図表のidと番号とfigure要素の区別

論文の図表には図番号や表番号を付けてキャプションの前に表示します。その番号を手がかりに、図表は本文から必ず参照されます。後で説明するように、図表の参照には、参照先の図表のidを使います。そこで図表には必ずidを付けます。

次のようにMarkdown形式で図を挿入すると、figクラスやidの"fig-01"はimg要素に設定されます。キャプションはimg要素を囲むfigure要素のfigcaption要素に設定されます。

![図のキャプション](flow.svg){.fig #fig-01}

というMarkdownを書くと、次のHTMLが生成されます：

<figure>
  <img src="flow.svg" alt="図のキャプション" class="fig" id="fig-01">
  <figcaption aria-hidden="true">図のキャプション</figcaption>
</figure>

ここまでで、図にも表にもfigure要素を使うことあることが分かりました。これらの例ではidをfigure要素に付けていました。

図と表は別系統の番号を付けるので、figure要素が図なのか表なのかを区別する必要があります。そこで、例えば図（グラフィックス）のfigure要素にはfigクラスを、表のfigure要素にはtableクラスを設定することにします。ただし、Markdownで図を挿入する書き方だとfigクラスはimg要素に設定されるので、図番号を増加させるために、CSSには次のように設定します：

figure.fig,
figure:has(> img.fig) {
    counter-increment: figure;
    break-inside: avoid;
}

つまり、それが図なのか表なのかは、クラスの設定とfigcaption要素の位置で区別します。キャプションの前の番号が「図…」なのか「表…」なのか、キャプションが下に付くのか上に付くのかが図表の区別です。例えば、過去の論文から引用した表の画像を、表として扱うことができます。

横に並ぶ小さな図表⁠、複数の画像からなる図

紙面の節約などで、小さな複数の図表を横に（inline方向に）並べたいことがあります。また、複数の画像や表で1つの図を構成したいこともあります。

これをCSSのフレックスボックスレイアウト（CSS Flexible Box Layout）で実現してみましょう。次のサンプルでは、minipageクラスを設定したdiv要素をdisplay: flex;とフレックスボックスに設定し、flex-direction: row;で横（row方向）に並べるとしています。

sample22.css
:root {
  counter-reset: figure 0 table 0;
}
.minipage {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 上に揃える */
  margin-block: 1rem;
}
figure {
  margin-block: 1rem;
}
figure.fig,
figure:has(> img.fig) {
  counter-increment: figure;
}
figure.fig figcaption::before,
figure:has(> img.fig) figcaption::before {
  content: "図" counter(figure);
}
figure.table {
  counter-increment: table;
}
figure.table figcaption::before {
  content: "表" counter(table);
}
figure.fig figcaption::before,
figure:has(> img.fig) figcaption::before,
figure.table figcaption::before {
  font-weight: bold;
  font-family: sans-serif;
  margin-inline-end: 1rem;
}
figure.fig img:not(:first-of-type) {
  margin-inline-start: 1rem; /* 画像と画像の間隔 */
}
table {
  border-collapse: collapse;
}
table thead th,
table thead td {
    border-top: 1px solid;
    border-bottom: 2px double;
}
table tbody tr:last-child th,
table tbody tr:last-child td {
    border-bottom: 1px solid;
}
sample22.md
---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample22.css'
---
本文 本文 本文 本文 本文 本文

<div class="minipage">

![小さな図#1](circle.svg){.fig #fig01}

<figure class="table">
<figcaption>小さな表</figcaption>

| 品目 | 数量 |
| :--- | ---: |
| パイナップル | 300 |
| ぶどう | 4 |

</figure>
</div>

本文 本文 本文 本文 本文 本文

<figure class="fig">

![小さな図#2](circle.svg){.fig #fig02}
![小さな図#3](square.svg){.fig #fig03}
<figcaption>2つの画像からなる図</figcaption>
</figure>

本文 本文 本文 本文 本文 本文
図19 sample22のプレビュー

図表番号の付き方を確かめてください。また、![キャプション](img.png)記法が2つ並んだときには、[キャプション]がキャプションに採用されないことに注意してください。

おすすめ記事

記事・ニュース一覧