【Marp】スライドをさっと作成して、CSSで自由にスタイルをあてたい

【Marp】スライドをさっと作成して、CSSで自由にスタイルをあてたい

はじめに

初めまして、20卒エンジニアのakaosです!
アイスタイル Advent Calender2020 9日目の記事になります。

今年4月に入社してから1ヵ月間の全体研修、3ヵ月間のテクノロジー研修を経て、リテール開発グループに配属となりました。普段は、@cosme storeで利用しているPOSレジと@cosmeとのデータ連携APIの開発業務などに取り組んでいます!

目次

  • Marpとは?
  • Marpを使うための準備
  • Tips
    1. マークダウン記法で画像の位置を調整
    2. 画像にCSSをあてる
      • VSCodeでCSSのパスを指定
      • CSSをあてたいファイルとCSSファイルに記述するべき内容
      • Exportする場合は生成するスライドにあてたいCSSのパスを指定
    3. スライドの文字にCSSをあてる
  • 最後に
  • 参考資料

Marpとは?

Marpは、Markdownからpdfpptx、はたまたhtmlなどに変換することができるツールです。

Marpに関する記事が割と多くある中でなぜこの記事を書こうと思ったかというと、Marpでざっくりとシンプルなスライドを作る方法は分かったけど、「CSSはどうやって当てたらいいのかよくわからなかった」からです。

Marpを使うための準備

Marpで資料作成をするにあたって使用しているVSCodeの拡張機能とnpmパッケージです。

Tips

ここからは資料作成時に必要になりそうな使い方について書いていきます!

マークダウン記法で画像の位置を調整

スクリーンショット 2020-12-07 20.13.09.png

プレビューのように画像を配置したい場合は以下のように書くことができます。

---
marp: true
---
<!-- bgで画像を背景に設定し、fitで画像のサイズを自動調整 -->
![bg fit](https://placehold.jp/400x400.png)

---
<!-- rightで右寄せ -->
![bg right](https://placehold.jp/400x400.png)

---
<!-- leftで左寄せ -->
![bg left](https://placehold.jp/400x400.png)

---
<!-- 画像を縦に並べる -->
![bg fit vertical right](https://placehold.jp/400x400.png)
![bg fit vertical right](https://placehold.jp/400x400.png)

---
<!-- 画像のサイズを%で指定。透明度も設定 -->
![bg 40% opacity:.3](https://placehold.jp/400x400.png)

---
<!-- 画像を横に2枚並べたい時 -->
![](https://placehold.jp/400x400.png) ![](https://placehold.jp/400x400.png)

画像にCSSをあてる

Marpで自由にCSSをあてたい場合、

  • VSCodeでCSSのパス指定
  • Exportする場合は生成するスライドにあてたいCSSのパス指定

をしてあげます。

VSCodeでCSSのパスを指定

設定を開いてmarp themesとうちCSSファイルのパスを追加。

marp: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のパスを指定

pdfpptx , 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をあててみました!

スクリーンショット 2020-12-07 20.16.43.png

---
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をあてる

スクリーンショット 2020-12-07 20.30.45.png

---
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を使えば、今まで時間がかかっていた資料作成の時間も減らせそうですね!

~ 宣伝 ~
新卒はアイスタイルの魅力を届けるために、日々情報発信を行なっています。
弊社の魅力を新卒ならではの視点からご紹介していますので、興味のある方はご覧になってください!

そしてぜひアイスタイルで一緒に働きましょう!(採用ページはこちら
最後までお読みいただきありがとうございました!

参考資料

#20卒エンジニア #富山出身 #大学は滋賀にいた