R Markdownで作成する資料にカスタムボックスを入れる

# これを読んでできるようになること
## 1. R Markdownファイルでカスタムボックスが含まれたHTMLファイルを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/213170f3-fb80-8ac0-51c0-ff31de8982b9.png)

## 2. R Markdownファイルでアイコン入りのカスタムボックスが含まれたHTMLファイルを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/84b58ee2-bd0c-10d7-531f-c88f198cfe34.png)

# Rのバージョン等
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/ca9d2910-ce1f-0f97-24b3-60e679a9b6a1.png)


# 1. アイコンを入れない通常のボックス (```<div>```タグで操作)の挿入

R Markdwonファイル内でHTMLの ```<div>``` タグと ```style``` 属性を用いてCSSスタイルを適用することで様々なカスタムボックスを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/28655d81-1081-94a8-e933-a8207054c733.png)

```HTML
<div style="border: 2px solid #4CAF50; padding: 10px; background-color: #f9f9f9;">
  これはカスタムボックスです。ここにコンテンツを追加します。
</div>
```
- border：ボックスに枠線をつける。枠線の太さ、色を指定できる。
- padding：枠線とボックス内のコンテンツの間に余白を作る。
- background-color：ボックスの背景色を指定する。


## 枠線 (border)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/7f23f8b1-e0f3-1a28-c619-e129869201e9.png)

```HTML
<div style="border: 3px dashed #FF5733; padding: 10px; background-color: #f9f9f9;">
  borderを3px、枠線を点線、枠線の色をオレンジ色に変更しました。
</div>
```
線の種類は文字で指定します。様々な種類があるようで、こちらに例がありました（[★スタイルシートリファレンス](https://www.htmq.com/style/border-style.shtml)）。

## 内側の余白 (padding)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/d738757d-a70a-51ee-c196-909501fd8023.png)

```HTML
<div style="border: 3px dashed #FF5733; padding: 20px; background-color: #f9f9f9;">
  これは余白（padding）が20pxのカスタムボックスです。より余白が広いです。
</div>
```

## 背景色 (background-color)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/d325ab9a-e654-5349-0c8f-253727ef3df2.png)
```HTML
<div style="border: 3px dashed #FF5733; padding: 10px; background-color: #74f8fc;">
  これはカスタムボックスです。ここにコンテンツを追加します。
</div>
```

## 文字の位置

```text-align:```を指定します。

### 中央寄せ (```text-align: center```)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/205dc04a-7d96-2dc2-5c2c-608d4040a7de.png)
```HTML
<div style="border: 2px solid #4CAF50; padding: 10px; background-color: #f9f9f9; text-align: center">
  これはカスタムボックスです。ここにコンテンツを追加します。
</div>
```
### 左寄せ (```text-align: left```)
デフォルトは左寄せの設定です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/8b5dfabc-e265-1591-3deb-e2ba20a3aaf2.png)

```HTML
<div style="border: 2px solid #4CAF50; padding: 10px; background-color: #f9f9f9; text-align: left">
  これはカスタムボックスです。ここにコンテンツを追加します。
</div>
```
### 右寄せ (```text-align: right```)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/03b0decf-a850-345c-8f15-498838f5f73b.png)
```HTML
<div style="border: 2px solid #4CAF50; padding: 10px; background-color: #f9f9f9; text-align: right">
  これはカスタムボックスです。ここにコンテンツを追加します。
</div>
```
## ボックスの丸み（```border-radius: ```）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/a7694083-5058-6ba1-9cd1-19a975aecd36.png)

```HTML
<div style="border: 2px solid #4CAF50; padding: 10px; background-color: #f9f9f9; text-align: center; border-radius: 10px">
  これはカスタムボックスです。ここにコンテンツを追加します。
</div>
```
```border-radius: 0px```だと四角のボックスになります。数値は、角の円の半径の大きさのようです（[今さら聞けない！？CSSのborder-radiusで様々な角丸に挑戦！](https://www.webcreatorbox.com/tech/border-radius)）。丸みを帯びたボックスにしたい場合は、```10px```くらいでよいと思います。```40px```だと以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/d5b6ba49-998c-cdc6-2939-b82e58dfb651.png)

ちなみに4つの角を別々にも設定可能みたいです（[今さら聞けない！？CSSのborder-radiusで様々な角丸に挑戦！](https://www.webcreatorbox.com/tech/border-radius)）。```border-**top/bottom**-**right/left**-radius:```で指定します。
```HTML
<div style="border: 2px solid #4CAF50; padding: 10px; background-color: #f9f9f9; text-align: center; border-top-left-radius: 0px; border-top-right-radius: 10px;
  border-bottom-right-radius: 20px;  border-bottom-left-radius: 30px;">
  これはカスタムボックスです。ここにコンテンツを追加します。
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/67944c99-24fa-a999-a81f-a14b30b3e2ec.png)

個人的に好きなカスタムボックス
```HTML
<div class="alert alert-info">
  <strong>Info!</strong> 色味がおしゃれ.
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/d26e672a-97c8-4474-9475-9866b57dfc57.png)


# 2. アイコンのあるカスタムボックスを挿入
HTMLでCSS属性を使うのは一緒ですが、やり方が少し違います。

## 手順1：HTMLのチャンクに文字や余白などの設定をする
R Markdownファイル内に、以下のチャンクを作ります。R Markdwonで資料作る場合、基本的にチャンクは ```{r}```となってますが、今回はHTMLに関する処理を記述するので、```{=html}```と指定します。その中に、カスタムボックス内のデザインを指定します。

```HTML
<style>
.infobox {
  padding: 1em 1em 1em 4em;
  border: 2px solid orange;
  border-radius: 10px;
  background: #f5f5f5 5px center/3em no-repeat;

}

</style>
```
- padding：枠線とボックス内のコンテンツの間に余白を作る。
- border：ボックスに枠線をつける。枠線の太さ、色を指定できる（**この指定では色コードではなぜか反映されません。ですので、色の名前で指定します**）。
- background-color：ボックスの背景色を指定する。
- border-radius：ボックスの丸みを指定します。
- background：背景の設定。詳細はこちらが詳しいです（[background](https://developer.mozilla.org/ja/docs/Web/CSS/background)）

## 手順2：アイコンに使用する画像を指定する
同じ```{=html}```チャンクに、使用する画像を指定します。今回は、[いらすとや](https://www.irasutoya.com/)にある**⚠️**のアイコンを挿入します。


```.caution```と名付け、```url()```の中に画像へのパスを設定します。いらすとやで任意の画像を探したら、右クリックで「リンクのアドレスをコピー」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/c6f49a0e-c2d0-77f6-c121-6c5554d76e9e.png)


それを```url()```の中に貼り付けます。

```HTML
.caution {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzMqkpQ7vLUKvumbm6AFwTLQiCe7tlDb2Q0MAiISLsesZHnhj0kbRjB4U3se3UrDIHfIy0hlahyphenhyphenQu-V2tOR2LcV_lX7U8P5a8jtqPYv3Ah4L-JoYi8PhoaoehumGIdp2vrsX0rRyhXqwA/s800/mark_chuui.png");}
```

ここまでの手順のコードをまとめると、以下の画像のようにR Markdownファイルに記載があると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/595d2ef4-cd05-300a-c83e-288966441c74.png)

:::note
自分のPC内の画像のパスを```url()```に指定することも可能です。
:::

## 手順3： カスタムボックスを挿入したい個所に、文面と手順1、2の設定を入力する
```R
::: {.infobox .caution data-latex="{caution}"}
**注意** <br>
・ 鹿の子鹿のここしたんたん🦌鹿の子鹿のここしたんたん🦌鹿の子鹿のここしたんたん🦌
:::
```

```{}```の中に、手順1で定義したボックスや文字の設定、手順2で定義した画像を入力します。
 
最終的に以下のようになっていればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/d5f238c2-83ab-5cb8-de88-f36c89be62e0.png)



## Let's Knit!
- 設定どおりに出力されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/2227388d-cf4e-3956-1701-ff74469b83c9.png)

::: note
今回は```.infobox```と名付け、その中に設定を書き込みましたが。別の名前にしてもいいですし、複数のボックスごとに設定を変えたい場合は、別の名前で違う設定を複数入れることも可能です。以下の画像では、新しいボックスの定義を```.onepiece```、画像の定義を```.lufy```として追加しました。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/e18e5ed4-eaf3-98a5-043f-2abd2b15d0d0.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/8073c95b-98ed-fc2a-e356-653f21598438.png)


# 引用資料
- [HTMLクイックリファレンス：★スタイルシートリファレンス](https://www.htmq.com/style/border-style.shtml)
- [Webクリエイターボックス：今さら聞けない！？CSSのborder-radiusで様々な角丸に挑戦！](https://www.webcreatorbox.com/tech/border-radius)
- [Mozilla: background](https://developer.mozilla.org/ja/docs/Web/CSS/background)
- [いらすとや](https://www.irasutoya.com/)
- [R Markdown クックブック：9.6 カスタムブロック](https://gedevan-aleksizde.github.io/rmarkdown-cookbook/custom-blocks.html)