Quartoのdivとspan

Quartoでのdivとspanの指定方法
Quarto
Published

August 9, 2024

Modified

December 7, 2024

Quartoでdivとspanタグを明示的に利用するには、特定の記法を使用する。

Markdown Basics – Quarto

https://quarto.org/docs/authoring/markdown-basics.html#sec-divs-and-spans

Quartoのバージョン

quarto::quarto_version()
[1] '1.5.54'

Divの指定

以下のようにして、明示的にdivタグを指定することができる。 divを始めるには、コロン(:)を最低3つ連続して書き、中括弧({})で囲んで、属性を指定することができる。 divを閉じるには、開くのにしようしたのと同じ数のコロンを書く。

::: {.border .bg-primary .text-center .shadow .m-3 .pt-2}
この文字列は[BootstrapのAPI](https://getbootstrap.jp/docs/5.3/utilities/api/)で修飾されます
:::

この文字列はBootstrapのAPIで修飾されます

idclasskey=valueはそれぞれ以下の様に設定できる。

#redtext {
    color: #990000;
}
:::{#redtext}
text
:::

:::{.fw-bold}
text
:::

:::{contenteditable="true"}
text
:::

text

text

text

入れ子になったDiv

divタグは入れ子にして、指定することも可能である。 それぞれのdivの間には一行以上の空行を入れる必要がある。

:::::{#redtext}
text

::::{.fw-bold}
text

:::{.text-decoration-underline contenteditable="true"}
text
:::

::::

:::::

text

text

text

Spanの指定

spanタグを設定するには以下の様にする。

[これはspanタグで修飾される]{#redtext .fw-bold contenteditable="true"}

これはspanタグで修飾される