37  Quarto：Markdownとレイアウト

37.1 Markdown記法の一覧

Quartoでも、文章の設定はYAMLとして、文章の中身はMarkdownで、コードはchunkに記載するのはR markdownと全く同じです。QuartoのMarkdownも、基本的にはR markdownのものとほぼ同じです。ただし、R markdownの教科書に書かれているMarkdownのリストよりも、QuartoのMarkdownガイドにはたくさんの記法についての記載があります。以下にQuartoでのMarkdown記法についての一覧を示します。

QuartoのMarkdown記法一覧

Markdownの記法	表示	意味
_text_	text	斜体
*text*	text	斜体
**text**	text	太字
***text***	text	太字斜体
^1^O~2~	1O2	上付きと下付き
`code`	code	スクリプト表記（インライン）
```code```	code	スクリプト表記
```` ```code``` ````	```code```	コードの表示
~~text~~	text	取り消し線
[Text]{.smallcaps}	Text	small caps（英語のみ）
[text]{.underline}	text	下線
[text]{.mark}	text	ハイライト
> 吾輩は猫である。	吾輩は猫である。	文の引用
$ log(\frac{p}{1-p})=ax+b $	\[ log(\frac{p}{1-p})=ax+b \]	インラインの数式
$$ log(\frac{p}{1-p})=ax+b $$	\[ log(\frac{p}{1-p})=ax+b \]	数式
# header1	header1	ヘッダー（H1）
## header2	header2	ヘッダー（H2）
### header3	header3	ヘッダー（H3）
#### header4	header4	ヘッダー（H4）
###### header5	header5	ヘッダー（H5）
###### header6	header6	ヘッダー（H6）
<https://www.narahaku.go.jp/>	https://www.narahaku.go.jp/	リンク（HTMLを表示）
[興福寺](https://www.kohfukuji.com/)	興福寺	リンク（テキストを表示）
		画像を表示
		画像を表示 （マウスオーバーでtextを表示）
[](link)		画像を表示 （リンク付き）
text[^1] [^1]: 注釈の文	text1	注釈（文は別途準備、ページ末に表示）
[@bibtex]	(久保 2012)	文献の参照

また、上記の他に、以下のようにキーボードショートカットを指定するための表記法もあります。

キーボードショートカットのMarkdown記法

{{< kbd Ctrl+C >}}

Ctrl+CCtrl+C

表にMarkdown記法を加える

上記の表の2列目のように、Markdown記法で記述した要素はMarkdown記法に従ってHTMLに変換されます。ただし、一部変換がうまくいかない場合があります。変換できない場合は、HTMLの記法で書くとHTML表記に従い変換されます。ですので、上の表のソースコードでは、一部HTMLで記載されており、一列目とは記法が異なることが分かるかと思います。

インラインの数式は表中ではうまく変換できず、数式と同じ表記（$$ $$の表記）で表示していますが、通常の文中ではきちんと数式に変換されます。

37.2 箇条書き

Quartoでの箇条書きの記載方法は以下の通りです。記号（*や-）と文章の間にはスペースが1つ必要で、スペースがないとうまく箇条書きにならないことがあります。

Quartoでの箇条書き一覧

Markdownの記法	表示
* 順序なし箇条書き1 + 副箇条1 + 副箇条2 - 副々箇条1	順序なし箇条書き1 副箇条1 副箇条2 副々箇条1
1. 順序あり 箇条書き1 2. 順序あり 箇条書き2 i) 副箇条1 ii) 副箇条2	順序あり 箇条書き1 順序あり 箇条書き2 副箇条1 副箇条2
- [ ] チェック1 - [x] チェック2	チェック1 チェック2
(@) 1項目 中に文を挟んで (@) 2項目	1項目 中に文を挟んで 2項目
::: {} 1. リストの1つ目 ::: ::: {} 1. 別のリストの1つ目 :::	リストの1つ目 別のリストの1つ目
何らかの単語 : 単語の定義	何らかの単語 単語の定義

37.3 表

表は、以下のように+と-、=、|の記号を用いて表します。また、キャプションを入れたいときには、表の上か下に:（コロン）を記載し、その後に文章を追加します。

表のMarkdown記法

+-----+-----+-----+
| pet | age | sex |
+=====+=====+=====+
| dog | 5   | F   |
+-----+-----+-----+
| cat | 3   | M   |
+-----+-----+-----+

: caption

caption

pet	age	sex
dog	5	F
cat	3	M

表内を左揃えにするときは:===、右揃えにするときは===:、中央揃えにするときには:===:を用いて、列名との境を設定します。

左右・中央揃え

+-----+-----+-----+
| pet | age | sex |
+:====+====:+:===:+
| dog | 5   | F   |
+-----+-----+-----+
| cat | 3   | M   |
+-----+-----+-----+

: caption（わかりにくいが、petは左、ageは右、sexは中央揃えになっている）

caption（わかりにくいが、petは左、ageは右、sexは中央揃えになっている）

pet	age	sex
dog	5	F
cat	3	M

また、表の幅は以下のような形で設定することができます。

列の幅を調整する

+-----+-----+-----+
| pet | age | sex |
+=====+=====+=====+
| dog | 5   | F   |
+-----+-----+-----+
| cat | 3   | M   |
+-----+-----+-----+

: 幅は10、10、80で調整 {tbl-colwidths="[10,10,80]"}

幅は10、10、80で調整

pet	age	sex
dog	5	F
cat	3	M

表は以下のように、横に並べることもできます。

表を横に並べる

:::{layout-ncol=2}

: dog-cat table

+-----+-----+-----+
| pet | age | sex |
+=====+=====+=====+
| dog | 5   | F   |
+-----+-----+-----+
| cat | 3   | M   |
+-----+-----+-----+

: cow-pig table

+-----+-----+-----+
| pet | age | sex |
+=====+=====+=====+
| cow | 4   | M   |
+-----+-----+-----+
| pig | 7   | M   |
+-----+-----+-----+

Caption：表を横に並べる
:::

dog-cat table

pet	age	sex
dog	5	F
cat	3	M

cow-pig table

pet	age	sex
cow	4	M
pig	7	M

Caption：表を横に並べる

このMarkdown形式のテーブルをテキストエディタで作成するのはとても面倒ですので、Markdownテーブルジェネレーターがたくさん作られています。QuartoのTableに関するGuideにもジェネレーターの記載があるので、 使い勝手の良いものを探して用いてみるとよいでしょう。

37.3.1 データフレームを表として表示する

表はMarkdownで書く方法だけでなく、Rの関数を使ってデータフレームから表示することもできます。単にデータフレームを表示した場合、以下のようにconsoleに表示されるのと同じような表が挿入されます。

data.frameを表示する

head(iris, 3)

  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1          5.1         3.5          1.4         0.2  setosa
2          4.9         3.0          1.4         0.2  setosa
3          4.7         3.2          1.3         0.2  setosa

Quartoでは、データフレームの表示方法として、knitr::kableやDT::datatable(Xie, Cheng, and Tan 2024)などの、表をきれいに表示するための関数を用いることができます。Rの演算で得られたデータフレームをQuartoで表として表示したい場合には、このどちらかの関数を用いるとよいでしょう。

knitr::kableで表を表示する

knitr::kable(head(iris, 3))

Sepal.Length	Sepal.Width	Petal.Length	Petal.Width	Species
5.1	3.5	1.4	0.2	setosa
4.9	3.0	1.4	0.2	setosa
4.7	3.2	1.3	0.2	setosa

---

DT::datatableで表を表示する

DT::datatable(head(iris, 3))

37.4 図の表示

図は、上に示した通り、![](path/to/image)という形で表示することができます。図は以下のように横に並べて描画することもできます。

図を横に並べる

::: {layout-ncol=2}

![武雄の大楠](./image/takeo.jpg)

![かがみはら宇宙航空博物館](./image/kagamihara.jpg)

caption: 図を横に並べる（layout-ncol）
:::

武雄の大楠

かがみはら宇宙航空博物館

caption: 図を横に並べる（layout-ncol）

---

同様に、layout-nrowで指定すると縦に図を並べることもできます。

また、図のサイズは![](path/to/image){width = 50%}といった形で、Markdown記法の後ろに幅を指定することで変更できます。また、以下のような記法でも、図のサイズや表示位置などを調整することができます。

図のサイズ等の設定

![](./image/takeo.jpg){width = 50%} # 幅を半分にする
![](./image/takeo.jpg){width = 400} # 幅を400ピクセルにする
![](./image/takeo.jpg){height = 4in} # 高さを4インチにする
![](./image/takeo.jpg){fig-align="right"} # 右揃えにする

逆に以下のような方法で大きく図を表示することもできます。

図を大きく表示する

:::{.column-page}
![善光寺](./image/zenkoji.jpg)
:::

善光寺

37.4.1 lightbox

lightboxはWeb上に表示された図をクリックすることで拡大して表示することができるようにする、JavaScriptで作成された機能の一つです。図をクリックすることで、イメージが拡大され、ブラウザ全面に図が表示されるようになります。以下のような形で{.lightbox}を加えることで、lightboxを図に適用することができます。

lightbox

![天橋立](./image/hashidate.jpg){.lightbox}

天橋立

また、YAMLを用いてもlightboxの設定を行うことが出来ます（このテキストではYAMLですべての図にlightboxを適用しています）。YAMLでのlightboxの設定については39章で説明します。

図のサイズなど、複数の設定を1つの図に加えたい場合には、{}の中に複数の設定項目をスペースを空けて記載します。

複数の設定を図に加える

![天橋立](./image/hashidate.jpg){width = 50% .lightbox}

37.5 ビデオの埋め込み

ビデオを埋め込んだHTMLを作成することもできます。ビデオの埋め込みには以下のような記法を用います。

ビデオを埋め込む

{{< video https://www.youtube.com/watch?v=BUcUS2cIieA >}}

37.6 地図などの埋め込み

Google mapsなどの地図を埋め込みたい場合には、Markdownの記法ではなく、HTMLの記法に従いiframeを用います。地図の埋め込みを利用する場合には、Google Mapで特定の地点を選び、『共有→地図の埋め込み』から、iframeの記載のあるhtmlをコピーして用います。

Google Mapの地図の埋め込み

地図の埋め込み

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3104.070237624984!2d135.82681530122332!3d34.466649586096636!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6006cc7787ee33d1%3A0xf4590df74f4fb763!2z55-z6Iie5Y-w5Y-k5aKz!5e0!3m2!1sja!2sjp!4v1748949910999!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

37.7 フローチャートなど

フローチャートなどを表示したい場合、MermaidとGraphvizというツールを用いることができます。いずれもかなり複雑なフローチャートなどを作成することができるツールで、非常に機能が豊富です。このテキストでMermaid、Graphvizの使い方のすべてを説明することはできないため、利用したい場合にはMermaidのドキュメント、Graphvizのドキュメントを参考にして下さい。

Mermaid

```{mermaid}
flowchart LR
    始め --> 終わり
```

flowchart LR
    始め --> 終わり

Graphviz

```{dot}
graph G {始め -- 終わり}
```

37.8 文献の引用

文献の引用は、上記の通り、[@bibtex]という形で引用することになります。ただし、この[@bibtex]だけでは引用文を作成することはできません。

文献を引用する場合、まず、このbibtexと呼ばれる形式のテキストを含むファイル（仮にreferences.bibとします）を準備する必要があります。bibtexは以下のような記載のテキストのことです。references.bibファイルには、このbibtexをテキストで保存しておきます。

bibtex

@Manual{pacman_bib,
  title = {{pacman}: {P}ackage Management for {R}},
  author = {Tyler W. Rinker and Dason Kurkiewicz},
  address = {Buffalo, New York},
  note = {version 0.5.0},
  year = {2018},
  url = {http://github.com/trinker/pacman},
}

上記のbibtexの@Manual{の次には、pacman_bibと記載されています。このpacman_bibがこの文献の情報を引用するときに利用するためのタグになっています。

次に、YAMLで引用文献が記載されたbibtexを含むファイル（references.bib）を指定する必要があります。前の章で説明した通り、YAMLはR markdownやQuartoでファイルの設定を行うためのテキスト形式であり、通常ファイルの一番初めの、---で挟まれた部分や_quarto.ymlに記載します。

referenceを設定するためのYAML

---
bibliography: references.bib # references.bibにbibtexを記載し、保存する
---

上記のように、bibliography: references.bibをYAMLに設定すると、Quartoはreferences.bibのファイルにbibtexの情報を読みに行き、引用文をタグと結び付けられるようにしてくれます。このようにbibtexの設定を行った後、以下のような記載を行うことで、文献を引用できます。

文献の引用

pacman：libraryを簡単に取り扱うためのライブラリ。[@pacman_bibtex]

ロジスティック回帰とロジットリンク関数[see @久保拓弥2012-05-19, p119-127]

glmnet：スパース回帰に関するライブラリ。[@glmnet_bib1; @glmnet_bib2]

ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。[-@akutagawa_bib]

@akutagawa_bib 『ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。』

@久保拓弥2012-05-19[p39]『\「ばらつきは何でもかんでも正規分布」と考えるのはおかしいだろう---ということで、一般化線形モデルが登場します。』

pacman：libraryを簡単に取り扱うためのライブラリ。(Rinker and Kurkiewicz 2018)

ロジスティック回帰とロジットリンク関数(see 久保 2012, p119–127)

glmnet：スパース回帰に関するライブラリ。(Friedman, Tibshirani, and Hastie 2010; Simon et al. 2011)

ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。(2002)

久保 (2012, p39) 『 「ばらつきは何でもかんでも正規分布」と考えるのはおかしいだろう—ということで、一般化線形モデルが登場します。』

37.8.1 bibtexを作成する

bibtexはただのテキストですので、自分で作成することができます。しかし、論文や教科書についての情報を入力したbibtexを自分で作成するのは面倒です。また、ライブラリの引用文をbibtexで準備するのも大変です。

Rでは、ライブラリの引用に関しては、citation関数を用いて表示することができます。

citation関数

citation("pacman")

To cite pacman in publications, please use:

  Rinker, T. W. & Kurkiewicz, D. (2017). pacman: Package Management for
  R. version 0.5.0. Buffalo, New York. http://github.com/trinker/pacman

A BibTeX entry for LaTeX users is

  @Manual{,
    title = {{pacman}: {P}ackage Management for {R}},
    author = {Tyler W. Rinker and Dason Kurkiewicz},
    address = {Buffalo, New York},
    note = {version 0.5.0},
    year = {2018},
    url = {http://github.com/trinker/pacman},
  }

このcitationで表示されるbibtexを用いてもよいですし、toBibtex関数を用いて、bibtexだけを取り出すこともできます。いずれにしても引用に用いるタグがないため、自分でタグをつける必要はあります。

toBibtex関数

toBibtex(citation("pacman"))

@Manual{,
  title = {{pacman}: {P}ackage Management for {R}},
  author = {Tyler W. Rinker and Dason Kurkiewicz},
  address = {Buffalo, New York},
  note = {version 0.5.0},
  year = {2018},
  url = {http://github.com/trinker/pacman},
}

論文であれば、Google scholarで検索し、引用をbibtexに変換することができます。

Google scholarの引用からbibtexを調べる

教科書であれば、上のGoogle scholarを用いてもよいですし、Amazonで販売されている日本語の教科書であれば、Lead2Amazonというサイトを用いて教科書を検索し、bibtexに変換してもよいでしょう。

37.9 レイアウト

上のMarkdown一覧表や善光寺の図では、PCで閲覧した場合、画像や図が左右のナビゲーションの部分にはみ出しています。また、このテキストでは、calloutブロック、タブ表示を使用しています。これらの表示をコントロールするための要素がレイアウトです。各レイアウトの表示方法について以下で説明します。

レイアウトの設定では、セミコロン3つ（:::）の後にレイアウトを指定（{}の中にレイアウトを指定）し、レイアウト内の文や図を記載した後、セミコロン3つ（:::）で閉じます。このセミコロン3つの間に記載されている部分が、指定したレイアウトで表示されます。

calloutブロック

このような表示のことをcalloutと呼びます。

タブ1

タブの中身1

タブ2

タブの中身2

タブ3

タブの中身3

{.column-page}で横幅を広げて表示

37.9.1 calloutブロック

calloutブロックは、以下のように{.callout-tip}という形で記載することで表示させることができます。calloutブロックのタイトルは、この記法の初めの行に##のヘッダーとして記載することで設定できます。

calloutブロックの記法

:::{.callout-tip}
## calloutブロック

このように記載することでcalloutを表示させることができます。
:::

calloutブロック

このように記載することでcalloutを表示させることができます。

calloutブロックには、note、tip、warning、important、cautionの5つの種類があります。利用する際の目的によって使い分けるとよいでしょう。

Note

callout-note

Tip

callout-tip

Warning

callout-warning

Important

callout-important

Caution

callout-caution

37.9.1.1 calloutブロックの折り畳み

また、このテキストで多用しているように、calloutブロックは折りたたむことができます。折りたたむ場合には以下のようにcollapse="true"を加えてcalloutブロックを設定します。icon="false"を追加するとアイコンを消すこともできます。

calloutブロックの折り畳み

:::{.callout-tip collapse="true" icon="false"}
## calloutの折り畳み

このように記載することでアイコン（calloutの左にあるもの）を消し、calloutを折りたたむことができます。
:::

calloutの折り畳み

このように記載することでアイコン（calloutの左にあるもの）を消し、calloutを折りたたむことができます。

37.9.1.2 calloutブロックのデザイン

calloutには3つのデザイン（default、simple、minimal）があります。特に指定しない場合にはdefaultが選ばれます。デザインを指定する場合にはappearance="simple"のような形で指定します。simpleとminimalの差はアイコンの有無だけです。

calloutブロックのデザイン

:::{.callout-tip appearance="simple"}
## callout: simple
`appearance="simple"`を指定しています。
:::

callout: simple

appearance="simple"を指定しています。

callout: minimal

appearance="minimal"を指定しています。

37.10 タブ表示

図や表、Rの演算結果などは、タブを利用して表示することが出来ます。タブの設定には{.panel-tabset}を用い、以下のように設定します。##の後に記載したタイトルがタブに表示されます。

タブの設定

:::{.panel-tabset}
## タブ1
\```{r, fig.height=2, echo=FALSE} # バックスラッシュは不要
plot(cars)
\```

## タブ2

![](./image/todaiji_butterfly.jpg){height=200}

## タブ3

+-----+-----+-----+
| pet | age | sex |
+=====+=====+=====+
| dog | 5   | F   |
+-----+-----+-----+
| cat | 3   | M   |
+-----+-----+-----+
| pig | 4   | M   |
+-----+-----+-----+

:::

タブ1

タブ2

タブ3

pet	age	sex
dog	5	F
cat	3	M
pig	4	M

37.10.1 描画の幅の設定

このテキストで示している通り、Quartoの出力したHTMLでは、PCで閲覧した時には左側・右側にナビゲーションの表示を置くことができます。このナビゲーションの表示に従い、文や図の表示されるサイズは以下のように中央に制限されています。

幅を指定するレイアウト

:::{.column-body}
```{markdown}
デフォルトの場合の表示幅
```
:::

デフォルトの場合の表示幅

この表示幅を調整する場合に用いるのが、{.column-XXX}というレイアウトです。XXXの部分にレイアウトの幅を指定します。指定するレイアウトの例を以下に示します。すべてを使うことはまずないかと思いますが、いくつか覚えておくと表現の幅が広がるでしょう。ただし、このテキストのように、左に章立てなどを表示している場合には、幅を広げる表現とは相性が悪いです。

{.column-body} # 通常の幅

{.column-body-offset}

{.column-body-inset-right}

{.column-body-outset-right}

{.column-page-right}

{.column-screen-inset-right}

{.column-screen-right}

{.column-body-outset-left}

{.column-page-inset-left}

{.column-page-left}

{.column-screen-inset-left}

{.column-screen-left}

{.column-page}

{.column-screen-inset}

{.column-screen}

37.10.2 右の欄に図や文字を表示する：.column-margin

文章や図、表などは、右側のスペースに表示させることもできます（ただし、スマホ等で見ると右側ではなく、文中に挿入される形になります）。この右側に表示させるために用いるレイアウトが{.column-margin}です。

右側のスペースに図を表示する

:::{.column-margin}
![船頭平閘門](./image/koumon.jpg)
:::

船頭平閘門

右側のスペースに表を表示する

:::{.column-margin}
+-----+-----+-----+
| pet | age | sex |
+=====+=====+=====+
| dog | 5   | F   |
+-----+-----+-----+
| cat | 3   | M   |
+-----+-----+-----+

: caption
:::

caption

pet	age	sex
dog	5	F
cat	3	M

右側のスペースに文を表示する

:::{.column-margin}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ...
:::

Lorem ipsum² dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation …

Rのコードを実行し、出力を右のスペースに表示させることもできます。

右側のスペースに表を表示する

:::{.column-margin}
```{r}
plot(cars)
```
:::

plot(cars)

また、注釈に関しては、Markdownの表に記載した方法の他に、右に表示する方法もあります。

注釈を右に表示する

[Lorem ipsum dolor sit amet...]{.aside}

Lorem ipsum dolor sit amet…

この方法で記載した場合には、注釈が文の一番下に表示されることはありません。

Friedman, Jerome, Robert Tibshirani, and Trevor Hastie. 2010. “Regularization Paths for Generalized Linear Models via Coordinate Descent.” Journal of Statistical Software 33 (1): 1–22. https://doi.org/10.18637/jss.v033.i01.

Rinker, Tyler W., and Dason Kurkiewicz. 2018. pacman: Package Management for R. Buffalo, New York. http://github.com/trinker/pacman.

Simon, Noah, Jerome Friedman, Robert Tibshirani, and Trevor Hastie. 2011. “Regularization Paths for Cox’s Proportional Hazards Model via Coordinate Descent.” Journal of Statistical Software 39 (5): 1–13. https://doi.org/10.18637/jss.v039.i05.

Xie, Yihui, Joe Cheng, and Xianying Tan. 2024. DT: A Wrapper of the JavaScript Library ’DataTables’. https://CRAN.R-project.org/package=DT.

久保拓弥. 2012. データ解析のための統計モデリング入門 一般化線形モデル・階層ベイズモデル・MCMC (確率と情報の科学). 単行本. 岩波書店. https://www.amazon.co.jp/dp/400006973X/.

芥川龍之介. 2002. 羅生門/鼻/芋粥/偸盗. 岩波文庫. https://www.amazon.co.jp/%E7%BE%85%E7%94%9F%E9%96%80%E3%83%BB%E9%BC%BB%E3%83%BB%E8%8A%8B%E7%B2%A5%E3%83%BB%E5%81%B8%E7%9B%97-%E5%B2%A9%E6%B3%A2%E6%96%87%E5%BA%AB-%E8%8A%A5%E5%B7%9D-%E7%AB%9C%E4%B9%8B%E4%BB%8B/dp/4003107012.

---

1. 注釈の文
   

2. Lorem ipsumは出版等で用いられる意味のない文字列です。