【RStudioで自動レポート作成#4】CSSコードの利用

投稿者 Dken2021年8月18日2021年8月18日

記事の目的

RStudioを使用して、自動のレポート作成方法の基礎について解説していきます。

今回は、レポート作成で使用することができる基本的なCSSコードについて解説していきます。

前提知識として、【RStudioで自動レポート作成#1】RMarkdownの基本はすでに見ていることとします。Rmdファイルの作成の仕方と実行の仕方がわかれば大丈夫です。また、【RStudioで自動レポート作成#3】HTMLコードの利用も見ていることとします。この記事で作成した見出し、表、リストをCSSで装飾する方法を解説します。

目次

CSSコードの使用法
実際のCSSコードとその対応

1 CSSコードの使用法

以下の画像の赤枠部分のように、あらかじめ作成したCSSコードを指定することで、CSSファイルをこのレポートに適応することができます。今回使用したCSSファイルは後で解説します。以下の画像から、表とリストが装飾できていることが確認できます。(CSSファイル指定部分以外は前回の記事とコードは同じ)

2 実際のCSSコードとその対応

2.1 画像で対応を確認

2.2 対応するコード

/*2.ヘッダーの部分*/
h1 {
    padding: 0.5em;/*文字周りの余白*/
    background: #dcdcdc;/*背景色*/
    border-left: solid 10px gray;/*左線（実線 太さ 色）*/
  }

/*3.テーブルの部分*/
table{
    width: 50%;/*横幅*/
    text-align: center;/*中央揃え*/
  }
th {
    padding: 10px;/*文字周りの余白*/
    background: #dcdcdc;/*背景色*/
    border: solid 1px;/*線の種類 太さ*/
}
td {
    padding: 10px;/*文字周りの余白*/
    border: solid 1px;/*線の種類 太さ*/
}

/*4.リストの部分*/
ol {
    color: blue;/*文字色*/
    background: #dcdcdc; /*背景色*/
    padding: 0.5em 0.5em 0.5em 3em; /*ボックス内の余白*/
    border: solid 3px gray; /*線の種類 太さ 色*/
    max-width: 200px;
  }