lesson: 3 レッスン03 サイトデザインを考える

以下，03_exampleディレクトリを使用します。該当ディレクトリ内のプロジェクトファイルを開いてください。

開いたら，一旦buildしてみて確認してください。

3.1 知っておくべきこと

R Markdownでhtmlを生成してデザインを考える上で，以下のことは頭に留めておいてください:

RmdはPandocを利用してhtmlを生成
- Rmd -> (knit) -> md -> (Pandoc) -> html
- 良くも悪くもPandocの影響を色濃く受ける
  - Pandoc ユーザーズガイド日本語版 - Japanese Pandoc User’s Association
  - RStudioの“knit HTML”でPandocに送っている内容 - Qiita
生成されたhtmlにはBootstrapとjQueryが標準で組み込まれる
- Bootstrapベースでデザインすると楽
- 別のcssフレームワークにする場合は以下の記事を参照
  - R Markdownで標準のCSSとhighlightを取り除くには - Qiita

基本的にPandocの仕様で生成されます
- Rmdのサンプルは03_example/id_class_check.Rmd
- 生成されるhtmlは03_example/docs/id_class_check.html
- これの詳しい解説は，以下の記事を参照
  - R Markdownで生成するhtmlタグ要素のidとclassを確認 - Qiita
上記サンプルを参考に，cssを設定すればOK
- サイト全体テーマなら，_site.ymlで指定したcssファイルに
- 個別ページで当てたい場合については後述

Bootstrapはgrid systemを採用しています。R MarkdownではBootstrapを標準で組み込んでいますので比較的簡単に実装できます。

実装する方法はいくつかあります:

個人的には後者をおすすめします

個別ページでcssを設定した場合_site.ymlで指定したcssと差し替える
- サイト設定によるcssを活かしたい場合:
  - cssファイルを2つ(orそれ以上)全てそのページで指定
  - yaml部分でincludeを活用してスタイルシートを指定
  - cssチャンクを利用して部分にstyleを記述
cssチャンク > includeによる指定 > サイト設定の順で優先される
- Rmdサンプルは03_example/css_test.Rmd
- 生成されるhtmlは03_example/docs/grid_test.html

他の複数ページでも同じスタイルを利用するのであれば，yamlのincludeオプションでうまく当てるのがスムーズです。もし「このページだけでちょっと当てたい」というのであればcssチャンクを使うのが楽でしょう。