CSS
Vivliostyle
では、論文をVFMで書いてCSSで組んで出力したPDFを学会に投稿…できるでしょうか?
この記事では、論文でよく見られるレイアウトをCSSで実現する方法を、2回に分けて解説します。
では、論文全体のサンプルと、個別のレイアウトのサンプルを見てみましょう。サンプルは実際に動かして確かめられます。例えば論文全体のサンプルsample.
という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を別ファイルとしてみました。これについては、後の
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample.png)
続いて、ポイントを抜粋して見ていきましょう。なお、サイズや向きの異なるページを挿入する例は、全体のサンプルに含めていません。
文章の言語、lang
属性
HTMLでは、ある要素の文章の言語lang
属性で設定します。設定した言語はフォントの選択やハイフネーションを行うかどうかの判断などに使われます。日本語の文章で漢字に日本語のフォントが使われるようにするにはlang='ja'
と設定します。英文でハイフネーションが行われるようにするにはlang='en'
と設定します。この記事のサンプルは、どれも全体としては日本語なのでhtml
要素にlang='ja'
と設定しています。前に示した論文全体のサンプルのlang='en'
と設定しています。それによって、改行
tionalization」html
要素にlang
属性を設定するには、VFMのフロントマターでlang: 'ja'
と記述します。具体的には、以下に続く例を見てください。
見出し
見出しの組み方に、いくつか工夫が必要になります。
見出しとセクション分け
VFMで論文を書くことを想定してCSSを設計するにあたって把握しておきたいのは、VFMはMarkdownの見出しのレベル#
の数)section
要素を生成して階層化するということです
その一方で注意も必要です。# タイトル
といった見出しを何かの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
クラスを除外しています。
:root {
counter-reset: section 0;
}
h2:not(.abstract, .acknowledgement) {
counter-increment: section;
}
h2:not(.abstract, .acknowledgement)::before {
content: counter(section) "章 ";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample11-1.css'
---
## 概要:{.abstract}
概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要。
## 見出し
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
## 謝辞{.acknowledgement}
ありがとうございました。感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample11-1.png)
番号は付きませんが、Markdownのエディターは見出しとして扱うので、エディターのアウトラインに表示されます。次の図で、サンプルのVFMをVisual Studio Codeで表示したときのアウトラインを見てください。{.abstract}
といったクラス設定も表示されて文章中での役割も分かります。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample11-1-outline.png)
「概要:」<p class="abstract">
などとしている箇所がその例です。
: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;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample11-2.css'
---
<p class="abstract">概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要。</p>
## 見出し
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
<p class="acknowledgement">ありがとうございました。感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝 感謝。</p>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample11-2.png)
ただし、こうすると概要や謝辞がMarkdownエディターのアウトライン・p
付きの段落となります。
見出しをrun-inにする
深いレベルの見出しや謝辞の見出しでは、続く段落の冒頭に入れ込むrun-inのレイアウトを求められることがあります。これは、見出しに続く段落のdisplay
プロパティにinline
を設定することで実現できます。見出しに続く段落はh4 + p
というセレクターで選べます。
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;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample10.css'
---
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
<span>(不具合を確認するためのinline要素。通常は不要。)</span>
#### Run-inの見出し ####
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
#### Run-inの見出し ####
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample10.png)
h4要素はinlineに表示されますが、構造上はあくまで見出しです。Markdownエディターのアウトラインや目次に表示されます。文章のツリー構造とレイアウトとを分離する典型例の1つです。
「付 録」、letter-spacing
プロパティ
「付 録」
これはCSSのletter-spacing
プロパティを設定することで実現するとよいです。
h2.appendix {
letter-spacing: 4rem;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample19.css'
---
## 付録{.appendix}
付録 付録 付録 付録 付録 付録 付録 付録
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample19.png)
Vivliostyleのプレビュー画面
付録の章や図表の番号
本文の章番号が
VFMでは## 付録
という形式で見出しを書くとセクションsection
要素)appendix
クラスの見出しh2
要素を直下に含むsection
要素の内側はsection:has(> h2.
というセレクターが、このルールに該当します。
ただし、付録の中に##
レベルの見出しを書くと、##
レベルよりも深い見出ししか置けません。それら見出しを1レベル上の見出しに見せるために、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;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample21.css'
---
## 見出し(h2)
本文 本文 本文 本文 本文 本文
### 見出し(h3)
本文 本文 本文 本文 本文 本文
## 付録{.appendix}
付録 付録 付録 付録 付録 付録
### 見出し(実はh3)
付録 付録 付録 付録 付録 付録
#### 見出し(実はh4)
付録 付録 付録 付録 付録 付録
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample21.png)
section
要素と表示しない見出し
著者
-
著者や所属はフォントなどが他と異なります。そこで、CSSでスタイルを設定するために何らかの方法で印を付ける必要があります。例えば、個々の著者に
author
クラスを設定する、あるいはauthor
クラスのsection
要素で囲む、などです。 -
見出し
( h2
要素など)は、組んだ結果のPDFで非表示にできます。
次のVFMサンプルでは、section:has(> .author)
という記述で、author
クラスの見出しを直下に持つsection
クラス」
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;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample24.css'
---
## 著者{.author}
著者1
著者2
著者3
## はじめに
こんにちは!
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample24.png)
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample24-1.png)
「著者」
段組み
もちろん2段組にできます。
1段のタイトルなどと2段組の本文
論文の本文は2段組だけど、先頭のタイトルや著者は1段というフォーマットは多いです。これは、論文全体を2段組にして、タイトルなどを含むブロックにfloat
プロパティを設定して実現できます。
:root {
column-count: 2;
column-fill: balance;
}
header {
float: block-start;
float-reference: page;
}
p {
margin-break: discard;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample01.css'
---
<header>
# タイトル タイトル タイトル タイトル #
概要 概要 概要 概要 概要 概要 概要 概要 概要 概要
</header>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample01.png)
CSSの段組仕様ではタイトルを段抜きにするのにcolumn-span
プロパティを使うのが標準的ですが、Vivliostyleではこれが使えない制限があり、ページフロートの機能を使って段抜きにします。上のCSSサンプルでfloat: block-start;
とfloat-reference: page;
とがその例で、ページpage
の上block-start
にfloat
させてます。
なお、# タイトル タイトル タイトル タイトル #
行を#
で終わらせています。
最初のページの左段の先頭のマージン
前の例では、p
要素にmargin-break: discard;
を設定して、最初のページの左段の先頭に空白ができるのを防いでいます。
段組みで本文を順に埋める
前の例では本文が2つの段に均等に分割されていました。これを、順に埋めるようにできます。column-fill
プロパティにauto
を設定します。
:root {
column-count: 2;
column-fill: auto;
}
header {
float: block-start;
float-reference: page;
text-align: center;
}
p {
margin-break: discard;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample02.css'
---
<header>
# タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル #
概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要 概要
</header>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample02.png)
英文タイトルや所属住所などを左段の下に詰める
英文タイトルや所属や住所などを、2段組の左段の下に詰めて配置し、上に境界線を引くレイアウトをよく見かけます。所属などのブロックのfloat
プロパティにblock-end
を設定し、float-reference
プロパティにcolumn
を設定して実現できます。
:root {
column-count: 2;
column-fill: auto;
}
.affiliation {
float: block-end;
float-reference: column;
border-block-start: thin solid currentcolor;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample09.css'
---
<div class="affiliation">所属 所属 所属</div>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample09.png)
図表
図表の配置やキャプションには様々な要件があります。
図表を上詰め/下詰めにする
CSSページフロート仕様では、図表をページの上端や下端に詰めて表示できます。学会などで投稿用のLaTeXのスタイルでは、図表はページ上端また下端に詰めて出力する設定になっている場合があります。
まずは上詰めから
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: "図の中身";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample07-1.css'
---
図の前の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
<figure id="fig01">
<div class="dummy-figure"></div>
<figcaption>キャプション</figcaption>
</figure>
図の後の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample07-1.png)
上のCSSサンプルでfigure
要素に設定したfloat: block-start;
とfloat-reference: page;
とで上詰めにしています。上に詰めるので上マージンは不要ですからfigure
要素にmargin-block-start: 0;
と設定します。
続いて下詰めです。float: block-end;
で下詰めになります。
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: "図の中身";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample07-2.css'
---
図の前の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
<figure id="fig01">
<div class="dummy-figure"></div>
<figcaption>キャプション</figcaption>
</figure>
図の後の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample07-2.png)
ダミーの図
.dummy-figure
は、画像などを用意せずに、サイズを変えるなどして図の組まれ方を試すための工夫です。vivliostyle.vh
という単位を、幅%
を使って、プレビューのウィンドウに対して一定の割合のサイズを保つようにしてます。実際のページ組版では使わない設定です。プレビューのウィンドウを広げたり縮めたりして、図と前後の本文との関係がどのように変わるか試してみてください。
図表を段抜きにする
図表を段抜きでfigure
要素にfloat-reference: page;
と設定することで、本文が2段組みの段に収まっていても、図はページの上詰めになります、段内の上ではなく。
: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: "図の中身";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample08.css'
---
図の前の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
<figure id="fig01">
<div class="dummy-figure"></div>
<figcaption>キャプション</figcaption>
</figure>
図の後の 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample08.png)
図と本文の順序に注意してください。従来からのfloat
プロパティ同様に表示される順番が変わることがあります。
表の列の揃え
表では、列ごとに左右中央の揃えが異なることが多いです。
このとき、LaTeXだと、次の{rlr}
のように、個々の表に列の揃えを指定します。
\begin{tabular}{rlr}
% …
\end{tabular}
HTMLではth
要素やtd
要素やcol
要素などのalign
属性は廃止されました
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;
}
---
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>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample14.png)
:nth-of-type()
擬似クラスを使って、例えばtd:nth-of-type(2)
は行td
、つまり2列目のセルを選んでいます。
一般に表の揃えや罫線の描き方は各表ごとに異なるので、これらの揃えを論文をまたがる共通のCSSファイルで設定するかどうかは考えどころです。
表本体よりも幅の広いキャプション
表のキャプションは、見出しのような短いフレーズのこともあれば、表の長い説明のこともあります。caption
要素の幅は、tbody
要素など本体の幅より広くなりません。キャプションを広く取りたいときは、table
要素をfigure
要素に入れて、figcaption
要素にキャプションを書きます。これは表本体をMarkdownで書いていても使えます。
table, th, td {
border: thin solid;
}
---
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>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample15.png)
長い表
2段組の段やページからあふれるような長い表を、途中で区切って続きを次の段やページに表示させられます。このとき、表の列見出しが続きの表にも表示されます。
: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;
}
---
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>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample20.png)
列見出しは次の段やページにも表示されますが、最後の行の下の罫線は分割された最後の部分の最後の行にしか引かれません。
他の表は上詰めになっていますが、長い表の上詰めは外してあります。それ用のクラスを用意する方法もありますが、ここでは、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
要素の位置で区別します。キャプションの前の番号が
横に並ぶ小さな図表、複数の画像からなる図
紙面の節約などで、小さな複数の図表を横に
これをCSSのフレックスボックスレイアウトminipage
クラスを設定したdiv
要素をdisplay: flex;
とフレックスボックスに設定し、flex-direction: row;
で横
: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;
}
---
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>
本文 本文 本文 本文 本文 本文
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample22.png)
図表番号の付き方を確かめてください。また、![キャプション](img.
記法が2つ並んだときには、[キャプション]
がキャプションに採用されないことに注意してください。