7.1 カスタム CSS を適用する

HTML 文書の外観をカスタマイズしようと思うのなら, CSS と JavaScript を少しでも勉強することを強くお勧めします. blogdown 本 (Xie, Hill, and Thomas 2017) の Appendix B には HTML, CSS, JavaScript の簡単なチュートリアルがあります.

初心者にとっては, CSS のセレクタと優先度のルールを理解することは極めて重要です. さもなければ自分のカスタム CSS が意図したように機能しないことに混乱することになるでしょう (おそらく優先度が十分でないから).

Rmd 文書に1つかそれ以上のカスタムスタイルシートを読み込ませるには, 次の例のような css オプション を使うことができます.

output:
  html_document:
    css: "style.css"

複数のスタイルシートを読み込ませるには, このようにブラケットで囲んだリストを使います.

output:
  html_document:
    css: ["style-1.css", "style-2.css"]

あるいは, css コードチャンク を使って, Rmd 文書に 直接 CSS のルールを埋め込むこともできます. 例えばこのように.

ここに `css` コードチャンクを埋め込む.

```{css, echo=FALSE}
p {
  font-size: 32px;
}
```

チャンクオプション echo = FALSE は CSS コードを出力にそのまま表示させないことを意味しますが, CSS コードを含む <style> タグは HTML 出力ファイルには生成されます.

参考文献

Xie, Yihui, Alison Presmanes Hill, and Amber Thomas. 2017. Blogdown: Creating Websites with R Markdown. Boca Raton, Florida: Chapman; Hall/CRC. https://bookdown.org/yihui/blogdown/.