はじめに
初めまして、20卒エンジニアのakaosです！
アイスタイル Advent Calender2020 9日目の記事になります。
今年4月に入社してから1ヵ月間の全体研修、3ヵ月間のテクノロジー研修を経て、リテール開発グループに配属となりました。普段は、@cosme storeで利用しているPOSレジと@cosmeとのデータ連携APIの開発業務などに取り組んでいます！
目次
- Marpとは？
- Marpを使うための準備
- Tips
- マークダウン記法で画像の位置を調整
- 画像にCSSをあてる
- VSCodeでCSSのパスを指定
- CSSをあてたいファイルとCSSファイルに記述するべき内容
- Exportする場合は生成するスライドにあてたいCSSのパスを指定
- スライドの文字にCSSをあてる
- 最後に
- 参考資料
Marpとは？
Marpは、Markdownからpdfやpptx、はたまたhtmlなどに変換することができるツールです。
Marpに関する記事が割と多くある中でなぜこの記事を書こうと思ったかというと、Marpでざっくりとシンプルなスライドを作る方法は分かったけど、「CSSはどうやって当てたらいいのかよくわからなかった」からです。
Marpを使うための準備
Marpで資料作成をするにあたって使用しているVSCodeの拡張機能とnpmパッケージです。
Tips
ここからは資料作成時に必要になりそうな使い方について書いていきます！
マークダウン記法で画像の位置を調整
プレビューのように画像を配置したい場合は以下のように書くことができます。
---
marp: true
---
<!-- bgで画像を背景に設定し、fitで画像のサイズを自動調整 -->
---
<!-- rightで右寄せ -->
---
<!-- leftで左寄せ -->
---
<!-- 画像を縦に並べる -->
---
<!-- 画像のサイズを%で指定。透明度も設定 -->
---
<!-- 画像を横に2枚並べたい時 -->
 
画像にCSSをあてる
Marpで自由にCSSをあてたい場合、
- VSCodeでCSSのパス指定
- Exportする場合は生成するスライドにあてたいCSSのパス指定
をしてあげます。
VSCodeでCSSのパスを指定
設定を開いてmarp themesとうちCSSファイルのパスを追加。
CSSをあてたいファイルとCSSファイルに記述するべき内容
CSSファイルに記述するべき内容として…
- まず
/* @theme sample2 */としてカスタムテーマの名前を指定してあげます。これがないとCSSが反映されません。 - その後に書いてある
@import 'default';ではdefaultテーマのCSSを継承しています。
/* @theme sample2 */
@import 'default';
作成したCSSファイルをあてたいMarkdownファイルには以下のように、先ほど設定した theme: sample2 を指定してあげる必要があります。
---
marp: true
theme: sample2
---
Exportする場合は生成するスライドにあてたいCSSのパスを指定
pdfやpptx , html にExportする場合、CSSをあてるオプションをつけないと、CSSが反映されません！
marp --theme-set sample2.css -- sample2.md
上記のように設定してあげることで、CSSを反映した状態のhtmlファイルをExportできます。他にpdfファイルをExportしたい場合は以下のような感じです。
marp --theme-set sample2.css --pdf sample2.md
実際、簡単にCSSをあててみました！
---
marp: true
theme: sample2
---
<!--
class: right_bottom
-->
---
<!--
class: right_top
-->
---
<!--
class: left_bottom
-->
---
<!--
class: left_top
-->
/* @theme sample2 */
@import 'default'; /* defaultテーマのCSSを継承 */
section.right_bottom {
background: url(https://placehold.jp/400x400.png) right bottom no-repeat;
}
section.right_top {
background: url(https://placehold.jp/400x400.png) right top no-repeat;
}
section.left_bottom {
background: url(https://placehold.jp/400x400.png) left bottom no-repeat;
}
section.left_top {
background: url(https://placehold.jp/400x400.png) left 40px top 40px no-repeat;
}
2 : スライドの文字にCSSをあてる
---
marp: true
theme: sample3
---
<!--
class: heading
-->
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
---
<!--
class: lists
-->
- 要素1
- 要素2
- 要素3
---
<!--
class: paragraph
-->
パラグラフ
---
```
$hoge = rand(1, 4)
```
/* @theme sample3 */
@import 'default'; /* defaultテーマのCSSを継承 */
section.heading h1 {
color: red;
}
section.lists ul {
border: 1px solid #000000;
}
section.lists ul li {
padding: 10px;
}
section.paragraph p {
font-size: 120px;
text-align: center;
}
最後に
Marpを使えば、今まで時間がかかっていた資料作成の時間も減らせそうですね！
～ 宣伝 ～
新卒はアイスタイルの魅力を届けるために、日々情報発信を行なっています。
弊社の魅力を新卒ならではの視点からご紹介していますので、興味のある方はご覧になってください！
そしてぜひアイスタイルで一緒に働きましょう！（採用ページはこちら）
最後までお読みいただきありがとうございました！
