脚注ガイド

---
title: "例1: HTML直書き脚注（GCPMクラス方式）"
vfm:
  footnote: gcpm
---

HTML中に`<span class="footnote">`として記述した脚注[^1]は、テーマCSS（theme-base / theme-techbookなど）の`.footnote { float: footnote }`によってページ下部の脚注エリアに送られる。

本文中に複数の参照を入れた場合[^2]でも、マーカーは`::footnote-call`と`::footnote-marker`擬似要素で連番つきに生成される。

[^1]: 脚注の本文。`float: footnote`によりレイアウト時にページ下部に移動される。

[^2]: もう一つの注。連番は自動的に振られる。

<p>HTML中に<code>&#x3C;span class="footnote"></code>として記述した脚注<span class="footnote" id="fn-1" role="doc-footnote">脚注の本文。<code>float: footnote</code>によりレイアウト時にページ下部に移動される。</span>は、テーマCSS（theme-base / theme-techbookなど）の<code>.footnote { float: footnote }</code>によってページ下部の脚注エリアに送られる。</p>
<p>本文中に複数の参照を入れた場合<span class="footnote" id="fn-2" role="doc-footnote">もう一つの注。連番は自動的に振られる。</span>でも、マーカーは<code>::footnote-call</code>と<code>::footnote-marker</code>擬似要素で連番つきに生成される。</p>

---
title: "例3: DPUB-ARIA脚注（テーマCSSなし）"
vfm:
  footnote: dpub
---

本文中に`[^1]`と書くと、VFM dpubモードは`<a role="doc-noteref">`[^1]と`<aside role="doc-footnote">`を出力する。

Vivliostyle.js v2.41+が`float: footnote`を自動で適用するため、テーマCSSなしでもページ下部の脚注エリアに配置される[^2]。

[^1]: 脚注の本文。CSSは何も書いていない。

[^2]: もう一つの注。連番は自動。

<p>本文中に<code>[^1]</code>と書くと、VFM dpubモードは<code>&#x3C;a role="doc-noteref"></code><a id="fnref1" href="#fn1" class="footnote-ref" role="doc-noteref"><sup>1</sup></a>と<code>&#x3C;aside role="doc-footnote"></code>を出力する。</p>
<p>Vivliostyle.js v2.41+が<code>float: footnote</code>を自動で適用するため、テーマCSSなしでもページ下部の脚注エリアに配置される<a id="fnref2" href="#fn2" class="footnote-ref" role="doc-noteref"><sup>2</sup></a>。</p>
<aside id="fn1" class="footnote" role="doc-footnote"><a href="#fnref1" class="footnote-back" role="doc-backlink"><sup>1</sup></a>脚注の本文。CSSは何も書いていない。</aside>
<aside id="fn2" class="footnote" role="doc-footnote"><a href="#fnref2" class="footnote-back" role="doc-backlink"><sup>2</sup></a>もう一つの注。連番は自動。</aside>

---
title: "例: footnote-display: inline"
vfm:
  footnote: gcpm
---

`footnote-display: inline`を指定すると、複数の脚注が同じ行に流れ込む[^1]。本文中の参照を3つ並べた場合[^2]でも、脚注エリアの縦方向のスペース消費が抑えられる[^3]。

[^1]: 短い注。

[^2]: もう一つの短い注。

[^3]: 別の短い注。

<p><code>footnote-display: inline</code>を指定すると、複数の脚注が同じ行に流れ込む<span class="footnote" id="fn-1" role="doc-footnote">短い注。</span>。本文中の参照を3つ並べた場合<span class="footnote" id="fn-2" role="doc-footnote">もう一つの短い注。</span>でも、脚注エリアの縦方向のスペース消費が抑えられる<span class="footnote" id="fn-3" role="doc-footnote">別の短い注。</span>。</p>

---
title: "例: ::footnote-markerのlist-style-position: outside"
vfm:
  footnote: gcpm
---

`::footnote-marker`に`list-style-position: outside`を指定すると、マーカーが本文の外側にぶら下がる[^1]。複数行にわたる脚注の継続行が、番号の下ではなく本文の左端に揃って読みやすくなる[^2]のが利点。

[^1]: この注の番号はぶら下げインデントで本文の左側に張り出し、複数行に渡る場合の継続行は番号の下ではなく本文の左端に揃う。

[^2]: もう一つの注。同じくぶら下げインデントが適用される。

<p><code>::footnote-marker</code>に<code>list-style-position: outside</code>を指定すると、マーカーが本文の外側にぶら下がる<span class="footnote" id="fn-1" role="doc-footnote">この注の番号はぶら下げインデントで本文の左側に張り出し、複数行に渡る場合の継続行は番号の下ではなく本文の左端に揃う。</span>。複数行にわたる脚注の継続行が、番号の下ではなく本文の左端に揃って読みやすくなる<span class="footnote" id="fn-2" role="doc-footnote">もう一つの注。同じくぶら下げインデントが適用される。</span>のが利点。</p>